Fundamentos de Tipografía
8 demos interactivos — aprende haciendo, no leyendo
La tipografía es la arquitectura invisible de la comunicación. Bien hecha, los lectores nunca la notan — simplemente absorben el contenido sin esfuerzo. Mal hecha, todo se siente raro sin que nadie sepa por qué. Estos 8 demos te permiten sentir la diferencia directamente.
Tracking (Letter-spacing)
Uniform spacing added between every letter in a word or block of text.
SUBLIMEARTS
Tight tracking (negative) feels compact. Loose tracking (positive) feels airy and formal. Headlines often use tight; all-caps text needs loose.
Kerning
Adjustment of space between specific letter pairs — unlike tracking which is uniform.
Notice how "AV" naturally looks too far apart at 0. The diagonal strokes create optical space. Negative kerning between A and V is standard in typography.
Leading (Line Height)
The vertical space between lines of text — named after the lead strips printers once placed between lines.
Good typography is invisible. When done well, readers experience the content, not the type. Leading is one of the most powerful tools — too tight and text feels suffocating, too loose and it falls apart.
Body text works best between 1.4–1.7. Headlines often use 1.0–1.2. Below 1.0 lines overlap.
Font Weight
The thickness of letter strokes, from Thin (100) to Black (900).
Sublimearts
400
Not all fonts support all weights. System UI typically supports 100–900. Use bold (700) for headlines, regular (400) for body.
Serif vs Sans-serif
Serifs are the small strokes at the ends of letterforms. Sans-serif has none.
"The quick brown fox jumps over the lazy dog."
System UI (Sans-serif)
Serifs aid readability in long print text. Sans-serif is typically cleaner on screens. Neither is better — context decides.
Text Alignment
How text is positioned horizontally within its container.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, and spacing.
Left-align for most body text. Center for headlines and callouts. Justify only with narrow columns — otherwise creates awkward "rivers" of whitespace.
Type Scale & Hierarchy
A consistent ratio between font sizes creates visual order and leads the reader's eye.
A ratio of 1.25 (Major Third) is subtle. 1.618 (Golden Ratio) is dramatic. Most design systems use 1.2–1.333.
Contrast & Legibility
The difference between text color and background determines readability. WCAG requires at least 4.5:1 for normal text.
This text changes contrast as you move the slider. Notice when it becomes hard to read — that is your legibility threshold. Good design never crosses it for body text.
Opacity: 100% — ✓ Legible
WCAG AA requires a contrast ratio of 4.5:1 for body text. On a dark background like this, white at ~45% opacity roughly hits that threshold.
¿Necesitas un diseñador que aplique esto a tu sitio?
Hablemos →