Typography IS the design. Before color, before layout, get this right.
Pairing logic
Two voices, distinct jobs:
- Display carries headlines: high personality, set large, tight tracking (-0.01 to -0.03em), line-height ≤ 1.1.
- Body carries reading: neutral enough to disappear at 16–19px, line-height 1.6–1.75.
- Mono (optional third) marks machine things: labels, code, data, timestamps.
Contrast the pair on structure, not just style: serif display + sans body, or condensed caps display + humanist body. Two geometric sans faces fight; two serifs blur.
Verified pairings
| Register | Display | Body | Mono |
|---|---|---|---|
| Editorial | Fraunces | Source Serif 4 | Spline Sans Mono |
| Technical | Big Shoulders Display | Barlow | JetBrains Mono |
| Warm organic | Young Serif | Karla | — |
| Precise modern | Instrument Sans (600+) | Instrument Sans (400) | Spline Sans Mono |
| Luxury | Cormorant Garamond | Jost (300) | — |
| Playful | Baloo 2 | Nunito | — |
Size system
Build a modular scale and touch nothing else:
--text-xs: 0.75rem (labels, captions)
--text-sm: 0.875rem (secondary, UI)
--text-base: 1rem (body)
--text-lg: 1.25rem (lede)
--text-xl: clamp(1.5rem, 3vw, 2rem) (h3)
--text-2xl: clamp(2rem, 4.5vw, 3rem) (h2)
--text-hero: clamp(2.75rem, 7vw, 4.5rem) (h1)
clamp() handles responsiveness without breakpoint soup. Headlines use fluid clamps; body text stays fixed — reading comfort doesn't scale with viewport.
The details that separate set type from default type
- Measure: 60–72 characters per line for body text.
max-width: 42remis your friend. - Tracking: negative on large display sizes, positive (+0.14em+) on uppercase micro-labels, zero in between.
- Hanging punctuation: pull quotes and bullets visually align to the margin, not the text edge.
- Real small caps or tracked caps: never let the browser fake small caps.
- Tabular figures in any aligned numeric column:
font-variant-numeric: tabular-nums. - Italic as spice: one italic phrase per headline maximum — it's the strongest emphasis you own.