Web Typography

A practical guide to choosing, pairing, and implementing typefaces for the web. Typography serves communication — the best typography is invisible, immersing 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.

The "clear goblet" principle: Typography should be like a crystal-clear wine glass — the focus is on the wine (content), not the glass (type). Readers should absorb meaning, not notice letterforms.

Readers don't read, they scan. Eyes jump 7-9 characters at a time (saccades), pausing briefly (fixations). Good typography supports this natural pattern.

Scoring

Goal: 10/10. When reviewing or creating typography implementations, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and 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" — they're versatile across sizes, weights, and contexts without drawing attention to themselves. 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, and good typography supports this natural pattern.

Why it works: When typography aligns with how the brain processes text — through word shape recognition, consistent rhythm, and clear letterform distinction — 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, not smooth scanning. Line length and letter spacing directly affect saccade efficiency
• Fixation points — eyes pause briefly to absorb content. Dense or poorly spaced text increases fixation duration and slows reading
• Word shapes (bouma) — experienced readers recognize word silhouettes, not individual letters. Maintaining distinct boumas aids recognition speed
• Legibility vs. readability — legibility is whether individual 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 typeface can be legible but poorly set, making it unreadable

Product applications:

Copy patterns:

/* Optimal reading rhythm for body text */
.prose {
  font-size: 1.125rem;     /* 18px */
  line-height: 1.6;
  max-width: 65ch;          /* ~45-75 characters */
  letter-spacing: normal;   /* Don't force tracking on body text */
}

Ethical boundary: Typography decisions should always prioritize reader comprehension and comfort over visual novelty. Sacrificing readability for aesthetic effect excludes readers and undermines the content's purpose.

See: references/typeface-anatomy.md for terminology, letterform parts, and classification systems.

2. Evaluating Typefaces

Core concept: A typeface must pass technical, structural, and practical quality checks before it earns a place in a project. Beautiful specimens fail on screen; rigorous evaluation prevents costly mid-project typeface swaps.

Why it works: Screen rendering, variable bandwidth, and diverse devices impose constraints that print never faced. A typeface that passes structural assessment (consistent strokes, open counters, distinct letterforms) and practical assessment (file size, license, rendering) will perform reliably across the full range of real-world conditions.

Key insights:

• Technical quality — consistent stroke weights, even color (visual density) across text blocks, good kerning pairs (AV, To, Ty), complete character set (accents, punctuation, figures), and multiple weights (at minimum: regular, bold, italic)
• Structural assessment — adequate x-height (larger = better screen readability), open counters and apertures (a, e, c shapes), distinct letterforms (Il1, O0, rn vs. m), and appropriate contrast (thick/thin stroke variation)
• Practical needs — works at intended sizes (test at actual use size), renders well on target screens and browsers, acceptable file size for web loading, and appropriate license for the project
• Real content testing — always test with real content, not Lorem ipsum. Dummy text hides problems with character frequency, word length, and paragraph rhythm

Product applications:

Copy patterns:

/* Test typeface at actual use sizes */
body { font-size: 16px; }           /* Minimum body size */
.caption { font-size: 0.75rem; }    /* Stress-test small sizes */
h1 { font-size: 3rem; }            /* Check large-size character */

/* Verify rendering with font-smoothing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Ethical boundary: Always verify typeface licensing before implementation. Using unlicensed fonts exposes projects to legal risk and undermines the type design community that creates these tools.

See: references/evaluating-typefaces.md for detailed quality assessment criteria and structural analysis.

3. Choosing Typefaces

Core concept: Start with purpose, not aesthetics. The content's tone, reading context, duration, and personality should drive typeface selection — not personal preference or trend following.

Why it works: When typeface selection is grounded in content requirements, the result feels inevitable rather than arbitrary. Purpose-driven choices also survive stakeholder review better because they can be justified with clear reasoning rather than subjective taste.

Key insights:

• Define the job first — body text, headlines, and UI elements may each need diffe