Web Typography
A practical guide to choosing, pairing, and implementing typefaces for the web. The best typography is invisible — it immerses readers in content rather than calling attention to itself.
Core Principle
Typography is the voice of your content. The typeface you choose sets tone before a single word is read — a legal site shouldn't feel playful; a children's app shouldn't feel corporate. Follow the "clear goblet" principle: typography should be like a crystal-clear wine glass, keeping focus on the wine (content), not the glass (type).
Scoring
Goal: 10/10. Score = number of the 10 Quick Diagnostic rows the implementation satisfies. Bands: 9-10 = body 16px+, measure under 75ch, line-height 1.4+, clear level contrast, font payload under 200KB, fallbacks set, survives 200% zoom; 5-6 = readable but missing measure control, fallbacks, or zoom resilience; <=3 = sub-16px body, no measure cap, FOIT, or unreadable hierarchy. Always state the current score and the specific diagnostic rows failing.
Two Contexts for Type
All typography falls into two categories:
| Context |
Purpose |
Priorities |
| Type for a moment |
Headlines, buttons, navigation, logos |
Personality, impact, distinctiveness |
| Type to live with |
Body text, articles, documentation |
Readability, comfort, endurance |
Workhorse typefaces excel at "type to live with" — versatile across sizes, weights, and contexts without drawing attention. Examples: Georgia, Source Sans, Freight Text, FF Meta.
Typography Framework
1. How We Read
Core concept: Understanding reading mechanics is the foundation for every typography decision. Eyes don't scan smoothly — they jump in bursts.
Why it works: Fighting these mechanics creates friction that drives readers away; aligning with them lets readers absorb content faster with less fatigue.
Key insights:
- Saccades — eyes jump in 7-9 character bursts; line length and letter spacing directly affect saccade efficiency
- Fixations — eyes pause briefly to absorb content; dense or poorly spaced text slows reading
- Word shapes (bouma) — experienced readers recognize word silhouettes, not individual letters
- Legibility vs. readability — legibility is whether characters can be distinguished (a typeface concern); readability is whether text can be comfortably read for extended periods (a typography concern: size, spacing, line length). A legible typeface can still be set unreadably
Product applications: