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. Rate any typography implementation 0-10 against the principles below. Always state the current score and the specific improvements needed to reach 10/10.

Two Contexts for Type

All typography falls into two categories:

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: When typography aligns with how the brain processes text — word shapes, consistent rhythm, distinct letterforms — readers absorb content faster with less fatigue. Fighting these mechanics creates friction that drives readers away.

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: