The Weight of Type
Oliver Reichenstein famously stated: "95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography."
Typography is not choosing a pretty font. It's designing how language is experienced.
The Fundamentals
Font vs Typeface
A typeface is the design (e.g., Helvetica). A font is a specific weight and style of that typeface (e.g., Helvetica Bold Italic). In digital design, these terms are often used interchangeably, but the distinction matters for precision.
Type Classification
- Serif (Times, Georgia, Playfair) — Traditional, authoritative, editorial
- Sans-serif (Helvetica, Inter, Space Grotesk) — Modern, clean, digital-native
- Monospace (JetBrains Mono, Fira Code) — Technical, code, data
- Display (Glitz, Hellcross, Bebas) — Headlines, impact, personality
- Handwritten/Script (Caveat, Dancing Script) — Casual, personal
The Type Scale
A consistent type scale creates visual rhythm. Popular approaches:
Major Third (1.25 ratio):
- 12px → 15px → 19px → 24px → 30px → 37px → 47px
Perfect Fourth (1.333 ratio):
- 12px → 16px → 21px → 28px → 37px → 50px → 67px
Tools like Type Scale (type-scale.com) help you generate these.
Font Pairing Principles
Contrast, Not Conflict
Pair fonts that are different enough to create contrast but share enough DNA to feel cohesive:
- Serif heading + Sans-serif body (classic, reliable)
- Display heading + Clean body (impactful, modern)
- Same family, different weights (safe, harmonious)
Proven Pairings
- Playfair Display + Source Sans Pro — Editorial elegance
- Space Grotesk + Space Mono — Tech-forward (used by Teravolt)
- Inter + JetBrains Mono — Clean and technical
- Clash Display + Satoshi — Bold and modern
The Two-Font Rule
For most projects, two typefaces are enough — one for headings, one for body. Three is the maximum before things get chaotic.
Readability Rules
Line Length
The ideal line length for body text is 50-75 characters per line (including spaces). This is backed by research from the Baymard Institute.
Too short → Choppy reading rhythm Too long → Eye fatigue, losing your place
Line Height (Leading)
- Body text: 1.5–1.8× the font size
- Headings: 1.1–1.3× the font size
- Tight leading feels dense and energetic
- Loose leading feels open and breathable
Letter Spacing (Tracking)
- Large headings: Tighten slightly (-0.5px to -2px)
- Small caps / labels: Open up (+1px to +3px)
- Body text: Leave at default
Font Size Minimums
- Body text: Never below 16px on screens (browser default for a reason)
- Mobile body: 16px minimum (prevents iOS zoom on input focus)
- Secondary text: 14px minimum
- Captions/labels: 12px minimum (use sparingly)
Web Font Performance
Fonts impact performance more than most realize:
- A typical Google Font request adds 100-300ms to load time
- Multiple weights can add 500KB+ to page weight
Optimization strategies:
- Self-host fonts — Eliminates DNS lookup to Google's servers
- Use
— Shows fallback font immediatelyfont-display: swap - Subset fonts — Only include Latin characters if that's all you need
- Variable fonts — One file for all weights (Inter Variable is ~100KB vs ~600KB for all static weights)
- Preload critical fonts —
<link rel="preload" as="font">
Accessibility in Typography
- Never rely on font styling alone to convey meaning (bold for emphasis is fine, but pair with semantic HTML like
)<strong> - Ensure contrast — 4.5:1 minimum for body text
- Allow users to resize — Your layout should handle 200% zoom without breaking
- Avoid justified text on the web — It creates uneven spacing that hurts readability for dyslexic users
"Type is what meaning looks like." — Ellen Lupton, typographer and author