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:
| 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"—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
Structural Assessment
Practical Needs
See references/evaluating-typefaces.md for detailed criteria.
Choosing Typefaces
Start with purpose, not aesthetics. Ask:
- What is the content's tone? (formal, casual, technical, friendly)
- Where will it be read? (phone, desktop, print)
- How long will people read? (glance vs. extended)
- What personality should it project?
Selection Process
- Define the job: Body text? Headlines? UI elements? Each may need different faces
- Match tone to content: A financial report needs different type than a bakery menu
- Test at actual sizes: A face beautiful at 72px may be illegible at 14px
- Check the family: Ensure needed weights, italics, and styles exist
- Test with real content: Lorem ipsum hides problems
Safe Starting Points
For body text, these reliably work:
| Serif | Sans-Serif |
|---|
| Georgia | -apple-system, BlinkMacSystemFont |
| Source Serif Pro | Source Sans Pro |
| Freight Text | Inter |
| Charter | IBM Plex Sans |
| Literata | Atkinson Hyperlegible |
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.
| Contrast Type | Example |
|---|
| Structure | Serif headline + sans-serif body |
| Weight | Light headline + regular body |
| Era | Humanist + geometric |
| Width | Condensed headline + normal body |
Pairing Strategies
- Serif + Sans-serif: The classic approach. Uses structural contrast.
- Same designer: Faces designed by one person often share DNA that harmonizes (e.g., FF Meta + FF Meta Serif)
- Superfamilies: Designed to work together (e.g., Roboto + Roboto Slab)
- 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
| Property | Optimal Range | Notes |
|---|
| Body font size | 16-18px | 16px minimum; err larger for reading-heavy sites |
| Line length (measure) | 45-75 characters | 66 characters ideal; use unit or |
| Line height | 1.4-1.8 | Longer lines need more; shorter need less |
| Paragraph spacing | 1em-1.5em | More space = more separation between ideas |
| Heading scale | 1.2-1.5 ratio | Establish clear hierarchy without extremes |
Line Length Rules
css
/* 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
| Context | Line Height |
|---|
| Headlines | 1.1-1.25 |
| Short UI text | 1.3-1.4 |
| Body paragraphs | 1.5-1.7 |
| Wide columns | 1.7-1.8 |
Building Type Hierarchies
Create distinction through variation in three properties:
| Level | Size | Weight | Color |
|---|
| H1 | 2.5-3rem | 700 | #111 |
| H2 | 1.75-2rem | 600 | #111 |
| H3 | 1.25-1.5rem | 600 | #333 |
| Body | 1rem (16-18px) | 400 | #333 |
| Secondary | 0.875rem | 400 | #666 |
| Caption | 0.75rem | 400 | #888 |
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
Responsive Typography
Type must adapt to screens and reading contexts.
Fluid Typography with clamp()
css
/* 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
| Viewport | Adjustments |
|---|
| Mobile (<640px) | Increase body size to 17-18px; reduce line-length limits; tighter heading scale |
| Tablet (640-1024px) | Standard sizing; enforce line-length limits |
| Desktop (>1024px) | Can use larger display type; maintain line-length |
See references/responsive-typography.md for implementation patterns.
Practical Checklist
Before shipping typography:
Quick Fixes
| Problem | Fix |
|---|
| Text feels cramped | Increase line-height to 1.6+; add paragraph spacing |
| Lines too long, hard to track | Add to text containers |
| Headings look disconnected | Reduce space above heading; keep space below |
| Text looks blurry | Check font-smoothing; try different weight; increase size |
| Fonts loading slowly | Subset fonts; use ; preload critical fonts |
| Body text too small | Increase to 18px; mobile users hold phones farther than you think |
| Hierarchy is unclear | Increase size/weight differences between levels |
| Typefaces clash | Simplify to one face; or ensure clear contrast |
| Text hard to read | Check contrast ratio; increase font weight on light backgrounds |
CSS Quick Reference
css
/* 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