Why Typography Matters
Typography is 95% of web design. That's not hyperbole — most of what users see and interact with is text. Yet many designers treat typography as an afterthought, picking fonts based on "what looks cool" rather than understanding why certain choices work.
Good typography is invisible — it lets users focus on content without distraction. Bad typography is painfully visible: hard to read, confusing hierarchy, clashing fonts that fight for attention.
What You'll Learn
- The 5 font categories and when to use each
- How to create clear typographic hierarchy
- 5 proven font pairings that work together
- Readability rules for web and mobile
Type Anatomy
Understanding type anatomy helps you communicate with other designers and make informed font choices. Here are the essential terms:
Letterform Parts
- Baseline: The invisible line letters sit on
- X-height: Height of lowercase letters (like "x")
- Cap height: Height of capital letters
- Ascender: Parts that rise above x-height (b, d, h)
- Descender: Parts that dip below baseline (g, p, y)
Spacing Terms
- Kerning: Space between specific letter pairs
- Tracking: Overall letter spacing across text
- Leading: Space between lines (line-height)
- Measure: Width of a text block (line length)
Pro Tip: When pairing fonts, match x-heights. Fonts with similar x-heights look harmonious together even if they're from different families.
Font Categories
Fonts fall into five main categories. Understanding these helps you choose the right font for your project's mood and purpose.
Serif
Fonts with small decorative strokes (serifs) at the ends of letters. Traditional, trustworthy, readable in print.
Sans-Serif
Fonts without serifs. Clean, modern, highly legible on screens.
Monospace
Every character has the same width. Originally for typewriters and coding.
Display/Decorative
Distinctive fonts designed for headlines and short text. High personality, low readability at small sizes.
Script/Handwritten
Fonts that mimic handwriting or calligraphy. Personal and elegant but harder to read.
Typographic Hierarchy
Hierarchy tells users what to read first, second, and third. Without clear hierarchy, everything competes for attention and nothing wins.
H1 — Page Title
32-48pxBold (700)One per page. Tells users and search engines what the page is about.
💡 Should be visible without scrolling on desktop.
H2 — Section Headers
24-32pxSemi-Bold (600)Major sections of content. Scannable landmarks.
💡 Users scan H2s to decide if content is relevant.
H3 — Subsections
18-24pxMedium (500)Break up longer sections. Group related content.
💡 Should be noticeably smaller than H2 but larger than body.
Body Text
16-18pxRegular (400)Main content. Where users spend most reading time.
💡 16px minimum on web. 1.5-1.75 line height for readability.
Small/Caption
12-14pxRegular (400)Secondary information, timestamps, labels, captions.
💡 Use sparingly. Too much small text = eye strain.
Font Pairing
The key to font pairing: contrast with harmony. Pair fonts that are different enough to create interest, but share enough DNA to feel cohesive.
Pairing Principles
- Contrast: Pair serif with sans-serif, not two similar serifs
- Match x-heights: Fonts look better together when lowercase letters align
- Limit to 2-3: One for headings, one for body, maybe one for accents
- Same designer: Fonts from the same foundry often pair well
5 Proven Font Pairings
High contrast between decorative serif headlines and clean sans-serif body creates visual interest while maintaining readability.
Vibe: Editorial, sophisticated
Geometric sans headlines with readable serif body text. Works for blogs, magazines, and content-heavy sites.
Vibe: Modern yet warm
Single font family with multiple weights. Consistent and efficient. Great for UI and apps.
Vibe: Clean, systematic
Condensed bold headlines grab attention while Open Sans provides excellent body text readability.
Vibe: Bold, contemporary
Well-balanced contemporary serif paired with friendly sans-serif. Perfect for lifestyle and wellness brands.
Vibe: Elegant, balanced
Readability & Legibility
Legibility is whether letterforms are distinguishable. Readability is whether text blocks are comfortable to read. Both matter.
Line Length (Measure)
45-75 characters per lineWhy: Too long and eyes lose their place. Too short disrupts reading rhythm.
✅ Use max-width on text containers. For body text, aim for 65 characters.
Line Height (Leading)
1.4-1.6 for body textWhy: Tight leading makes lines blur together. Too loose breaks visual connection.
✅ Start with 1.5 and adjust. Headlines can be tighter (1.1-1.3).
Letter Spacing (Tracking)
0 for body, +0.05em for capsWhy: Body text is designed to work at default. ALL CAPS benefits from more space.
✅ Only adjust for headlines, buttons, or all-caps text.
Contrast
4.5:1 minimum (WCAG AA)Why: Low contrast = unreadable for many users, especially in bright light.
✅ Test with WebAIM contrast checker. Avoid gray text on white.
Font Size
16px minimum for bodyWhy: Smaller text causes eye strain on screens. Mobile users hold phones at arm's length.
✅ When in doubt, go bigger. Nobody complains about readable text.
Type Scale Systems
A type scale creates consistent, harmonious sizing by using a mathematical ratio. Instead of random sizes, each level is proportionally related.
Minor Third (1.2)
Ratio: 1.2
Best for: Compact UIs, mobile apps, limited space
Major Third (1.25)
Ratio: 1.25
Best for: Balanced designs, most web projects
Perfect Fourth (1.333)
Ratio: 1.333
Best for: Editorial, blogs, content-heavy sites
Golden Ratio (1.618)
Ratio: 1.618
Best for: High contrast, dramatic headlines, posters
Tool: Use type-scale.com to generate custom scales and preview them in real-time.
Responsive Typography
Typography needs to adapt to different screen sizes. What works on desktop might be unreadable on mobile.
Key Principles
Fluid Typography
Use CSS clamp() to scale font sizes smoothly between breakpoints:font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem)
Relative Units
Use rem or em instead of px. This respects user preferences and scales proportionally.
Mobile-First Line Length
On mobile, full-width text is usually fine. On desktop, constrain to 65-75 characters.
Test on Real Devices
Browser dev tools aren't perfect. Test on actual phones to catch readability issues.
Common Mistakes
❌ Using too many fonts
Why it's a problem: Creates visual chaos and slows page load.
Fix: Stick to 2-3 fonts max: one for headings, one for body, maybe one for accents.
❌ Poor contrast
Why it's a problem: Light gray text on white is unreadable for many users.
Fix: Test with WCAG contrast checker. Use 4.5:1 minimum for body text.
❌ Inconsistent sizing
Why it's a problem: Random sizes make hierarchy unclear and feel unprofessional.
Fix: Use a type scale. Define sizes in your design system and stick to them.
❌ Ignoring line length
Why it's a problem: Long lines make reading exhausting. Short lines feel choppy.
Fix: Aim for 45-75 characters per line. Use max-width on containers.
❌ Tight line height on body text
Why it's a problem: Lines blur together, especially for dyslexic readers.
Fix: Use 1.5 or higher for body text. Headlines can be tighter.
❌ All caps for long text
Why it's a problem: ALL CAPS IS HARDER TO READ because we lose word shapes.
Fix: Reserve caps for short labels, buttons, or stylistic headers only.
Typography Checklist
Use this checklist to audit your typography before shipping.
Foundation
Readability
Pairing
Responsive
Everything You Need to Know
Quick answers to help you get started
Stay in the Loop Design Updates
Get practical design tips and new updates. No spam, unsubscribe anytime.