Why Typography Is More Than Font Choice
Typography shapes how people feel about your content before they read a single word. A well-set page builds trust, improves readability, and reinforces your brand. Poor typography — even with a beautiful font — creates fatigue and drives visitors away. This guide covers the practical decisions that separate good web typography from great.
Understanding Font Categories
Before picking a font, understand what each category communicates:
- Serif fonts (e.g., Georgia, Merriweather): Traditional, authoritative, trustworthy. Great for editorial and long-form content.
- Sans-serif fonts (e.g., Inter, Roboto): Modern, clean, approachable. The default choice for UI and web apps.
- Display/Decorative fonts: High personality, low readability at small sizes. Use only for headlines.
- Monospace fonts (e.g., Fira Code, JetBrains Mono): Essential for code blocks and technical content.
How to Pair Fonts Effectively
The safest pairing strategy: one font for headings, one for body text. Keep these principles in mind:
- Create contrast: Pair a serif heading font with a sans-serif body font (or vice versa).
- Share a mood: A playful display font doesn't pair well with a stiff geometric sans-serif.
- Limit yourself: Two typefaces is usually enough. Three is the maximum.
Reliable Free Pairings (via Google Fonts)
| Heading Font | Body Font | Mood |
|---|---|---|
| Playfair Display | Source Sans 3 | Editorial, elegant |
| Plus Jakarta Sans | Inter | Modern, tech-forward |
| Merriweather | Open Sans | Trustworthy, readable |
| Space Grotesk | DM Sans | Creative, contemporary |
Setting a Type Scale
A type scale is a set of harmonious font sizes based on a ratio. Using a consistent scale creates visual rhythm across your site. A common approach is the Major Third scale (ratio: 1.25):
- Body: 16px
- Small: 12.8px
- H4: 20px
- H3: 25px
- H2: 31px
- H1: 39px
Tools like typescale.com let you preview and export scales instantly.
Critical Readability Settings
Even the best font fails without proper settings:
- Font size: 16px minimum for body text. Don't go smaller.
- Line height: 1.5–1.7 for body, 1.1–1.3 for headings.
- Line length: 60–80 characters per line is the readability sweet spot. Use
max-widthto enforce this. - Letter spacing: Slightly increased tracking on all-caps labels and buttons improves legibility.
Performance Considerations
Web fonts have a performance cost. Load only the weights you use. If using Google Fonts, add display=swap to prevent invisible text during loading. Consider variable fonts, which pack multiple weights into a single file — reducing HTTP requests and file size.
Final Checklist
- Maximum two typefaces in use
- Body text ≥ 16px with line-height ≥ 1.5
- Text line length capped at ~75 characters
- Sufficient contrast (4.5:1 minimum for body text)
- Only loading font weights that are actually used
Typography isn't a one-time decision — revisit it as your design evolves. Small adjustments in size, spacing, and weight can transform a mediocre layout into one that genuinely delights readers.