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 Philosophy

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.

How We Read

Understanding reading mechanics improves typography decisions:

• Saccades: Eyes jump in 7-9 character bursts, not smooth scanning
• Fixation points: Eyes pause briefly to absorb content
• Word shapes: Experienced readers recognize word silhouettes, not individual letters
• Bouma: The overall shape of a word—maintaining distinct boumas aids recognition

Legibility vs. Readability:

• Legibility = Can individual characters be distinguished? (typeface concern)
• Readability = Can text be comfortably read for extended periods? (typography concern—size, spacing, line length)

A typeface can be legible but poorly set, making it unreadable. Both matter.

Evaluating Typefaces

Quick assessment checklist:

Technical Quality

• Consistent stroke weights across characters
• Even color (visual density) across text blocks
• Good kerning pairs (AV, To, Ty, etc.)
• Complete character set (accents, punctuation, figures)
• 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)
• Appropriate contrast (thick/thin stroke variation)

Practical Needs

• Works at intended sizes (test at actual use size)
• Renders well on target screens/browsers
• Acceptable file size for web loading
• Appropriate license for project

See references/evaluating-typefaces.md for detailed criteria.

Choosing Typefaces

Start with purpose, not aesthetics. Ask:

1. What is the content’s tone? (formal, casual, technical, friendly)
2. Where will it be read? (phone, desktop, print)
3. How long will people read? (glance vs. extended)
4. What personality should it project?

Selection Process

1. Define the job: Body text? Headlines? UI elements? Each may need different faces
2. Match tone to content: A financial report needs different type than a bakery menu
3. Test at actual sizes: A face beautiful at 72px may be illegible at 14px
4. Check the family: Ensure needed weights, italics, and styles exist
5. Test with real content: Lorem ipsum hides problems

Safe Starting Points

For body text, these reliably work:

Pairing Typefaces

One to two typefaces maximum. More requires exceptional skill. When in doubt, use one family with weight variation.

Contrast Principle

Successful pairings create clear contrast—faces should be obviously different, not confusingly similar.

Pairing Strategies

1. Serif + Sans-serif: The classic approach. Uses structural contrast.
2. Same designer: Faces designed by one person often share DNA that harmonizes (e.g., FF Meta + FF Meta Serif)
3. Superfamilies: Designed to work together (e.g., Roboto + Roboto Slab)
4. Same era: Typefaces from the same period share proportional assumptions

See references/pairing-strategies.md for specific combinations.

Pairing Mistakes

• Too similar: Two serifs or two sans faces that look almost alike
• Competing personality: Both faces trying to be distinctive
• Era clash: Mixing renaissance and postmodern without intention
• Weight imbalance: One face overwhelms the other

Typographic Measurements

Line Length Rules

/* Optimal: 45-75 characters */
.prose { max-width: 65ch; }

/* If wider, increase line-height to compensate */
.wide-text {
  max-width: 80ch;
  line-height: 1.8;
}

Line Height Adjustments

Building Type Hierarchies

Create distinction through variation in three properties:

Don’t combine all levers at once. H1 doesn’t need to be largest AND boldest AND darkest. Use enough to create clear hierarchy, no more.

Hierarchy Checklist

• Can you tell what’s most important at a glance?
• Does squinting still reveal the hierarchy?
• Are there clear “levels” or does everything blend?
• Is there enough contrast between adjacent levels?

Responsive Typography

Type must adapt to screens and reading contexts.

Fluid Typography with clamp()

/* Scales between 16px (320px viewport) and 20px (1200px viewport) */
body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

/* Fluid headings */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

Breakpoint Considerations

See references/responsive-typography.md for implementation patterns.

Practical Checklist

Before shipping typography:

• Body text is 16px or larger
• Line length doesn’t exceed 75 characters
• Line height is 1.4 or greater for body text
• Sufficient contrast between type levels
• Typefaces tested at actual sizes on actual screens
• Font files loading performantly (< 200KB total)
• Fallback fonts specified
• Works with browser zoom (test at 200%)
• Headings don’t orphan single words on lines
• Links are visually distinct

Quick Fixes

CSS Quick Reference

/* Core typography setup */
body {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.125rem;      /* 18px */
  line-height: 1.6;
  color: #333;
}

/* Constrain line length */
.prose {
  max-width: 65ch;
}

/* Heading rhythm */
h1, h2, h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

/* Fluid type */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Font loading */
@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

See references/css-implementation.md for complete patterns.

Reference Files

• typeface-anatomy.md: Terminology, letterform parts, classification systems
• evaluating-typefaces.md: Quality assessment, structural analysis, technical requirements
• pairing-strategies.md: Combining typefaces, contrast methods, proven combinations
• responsive-typography.md: Fluid type, viewport units, breakpoint strategies
• css-implementation.md: @font-face, loading strategies, variable fonts, performance

Book Reference

On Web Typography by Jason Santa Maria Publisher: A Book Apart (2014) ISBN: 978-1937557065 Amazon