Typography in Web Design: A Complete Guide

Typography is 95% of web design. Most web content is text—articles, product descriptions, interfaces, navigation. Yet typography is often treated as an afterthought, slapped on at the end with default fonts and arbitrary sizes. Good typography enhances readability, establishes hierarchy, and reinforces brand identity. Bad typography creates friction, confusion, and abandonment. This guide covers everything from font selection to responsive scaling.

Font Selection and Pairing

Choosing fonts is about more than aesthetics—it's about readability, brand alignment, and technical performance. Your font choices set the tone before users read a single word.

For more insights on this topic, see our guide on Green Web Design and Sustainability: Build Eco-Friendly Websites That Reduce Carbon.

Font categories and when to use them:

• Sans-serif: Clean, modern, highly readable on screens. Best for body text, UI, and digital-first brands. Examples: Inter, Roboto, Helvetica, Arial. Use when: Tech, modern businesses, apps, content-heavy sites.
• Serif: Traditional, authoritative, elegant. Better for print but modern serifs work on screens. Examples: Georgia, Merriweather, Playfair Display. Use when: Publishing, luxury brands, traditional businesses, long-form reading.
• Monospace: Fixed-width, technical, code-like. Examples: Courier, Fira Code, JetBrains Mono. Use when: Code snippets, technical documentation, developer tools.
• Display/Decorative: Expressive, unique, attention-grabbing. Should be used sparingly. Examples: custom branded fonts, artistic headlines. Use when: Headlines only, not body text. Branding moments.

Font pairing principles:

• Limit to 2-3 fonts maximum: One for headings, one for body, optionally one for accents (quotes, captions). More creates visual chaos.
• Contrast in style, similarity in mood: Pair a bold display serif with a clean sans-serif body. Both should feel like they belong to the same brand but serve different purposes.
• Use font superfamilies: Families like Inter, Roboto, or IBM Plex come with multiple weights and styles, reducing the need for multiple font files.
• Test readability: Pair fonts, then write actual content in them. Does the combination feel cohesive? Is body text still readable at smaller sizes?

Classic font pairings:

• Playfair Display (serif, headings) + Source Sans Pro (sans-serif, body)
• Montserrat (sans-serif, headings) + Merriweather (serif, body)
• Inter (sans-serif, everything)—a superfamily that handles headings and body
• Roboto (sans-serif, UI) + Lora (serif, editorial content)

Tools for font discovery and pairing: Google Fonts (free, huge library), Adobe Fonts (subscription, high-quality), FontPair.co (pairing suggestions), Typ.io (real-world examples), FontJoy (AI-powered pairing generator).

Establishing Visual Hierarchy

Typographic hierarchy guides users through content, showing what's important and how information relates. Without hierarchy, everything looks equally important—which means nothing stands out.

Building hierarchy with type:

• Size: Larger text = more important. H1 should be significantly larger than H2, which should be larger than body text. Aim for a 1.25-1.5x multiplier between levels.
• Weight: Bold text draws attention. Use for headings, labels, key terms. Don't bold entire paragraphs (defeats the purpose).
• Color: Darker text = primary content. Lighter gray for secondary (captions, metadata). Reserve brand colors for emphasis or links.
• Spacing: Increase space above headings to create visual breaks. Headings should be closer to the content they describe than to previous sections.
• Style: Italics for emphasis or quotes. ALL CAPS for labels (use sparingly—harder to read). Underlines for links only (avoid underlines elsewhere—creates confusion).

Type scale systems:

• Modular scale: Use a mathematical ratio to calculate font sizes. Common ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Tools: Type-scale.com, Modularscale.com.
• Example scale (1.25 ratio, 16px base): Body: 16px, Small: 13px, H4: 20px, H3: 25px, H2: 31px, H1: 39px, Hero: 49px.
• Benefits: Creates visual rhythm, ensures consistency, makes responsive scaling easier.

Common hierarchy mistakes:

• Too many heading levels: If you're using H1-H6, your content is probably too complex. Simplify structure.
• Skipping levels: Going from H2 to H5 confuses screen readers and breaks semantic structure.
• Inconsistent spacing: Using different margins above/below headings across pages creates visual inconsistency.
• Overuse of bold: If everything is bold, nothing stands out. Use strategically.

Readability and Legibility

Readability is how easily users can understand text. Legibility is how easily they can distinguish individual characters. Both are critical for user experience.

Optimal text settings for body content:

• Font size: 16-18px minimum for body text on desktop. 14px is too small for most users. Mobile: 16px minimum (prevents iOS zoom-on-focus).
• Line height (leading): 1.5-1.7 for body text. Tighter (1.2-1.4) for headings. More space improves readability but too much makes text feel disconnected.
• Line length: 50-75 characters per line (about 8-12 words) is optimal. Longer lines force eye strain and tracking issues. Use max-width on content containers.
• Paragraph spacing: 1-1.5em between paragraphs. Creates visual breaks without needing line breaks.
• Letter spacing (tracking): Default for body text. Increase slightly (0.02-0.05em) for all-caps text. Decrease for display sizes if font feels loose.

Contrast and color:

• Body text: Use dark gray (#333 or darker) on white, or light gray (#ddd or lighter) on dark backgrounds. Pure black on pure white can be too harsh.
• WCAG standards: 4.5:1 minimum contrast ratio for normal text, 3:1 for large text (18pt+). Use WebAIM Contrast Checker to validate.
• Avoid low-contrast trends: Light gray text on white (#999 on #fff) fails accessibility standards and strains eyes.

Readability testing:

• Read your content on actual devices at arm's length (typical reading distance)
• Test with users 40+ years old (presbyopia affects readability after 40)
• Use browser zoom to simulate vision impairment
• Check readability in bright sunlight (mobile) and low-light (desktop/mobile)

Web Fonts and Performance

Custom web fonts enhance brand identity but can significantly impact page load times. A font file that takes 2 seconds to load delays text rendering and frustrates users.

Font loading strategies:

• Font-display: swap: Show fallback font immediately, swap when custom font loads. Prevents invisible text (FOIT) but causes layout shift.
• Font-display: optional: Use custom font only if it loads within 100ms, otherwise stick with fallback. Best for performance-critical sites.
• Font-display: fallback: Block for 100ms, swap for 3s, then give up. Balanced approach.
• Preload critical fonts: Add <link rel="preload" href="font.woff2" as="font"> in <head> for above-the-fold fonts.

Optimizing font files:

• Use WOFF2 format: Best compression (30% smaller than WOFF). Supported by all modern browsers.
• Subset fonts: Remove unused characters (accents, symbols) to reduce file size. Google Fonts lets you specify character sets.
• Limit font weights: Each weight is a separate file. Do you really need 100, 200, 300, 400, 500, 600, 700, 800, 900? Stick to 400, 600, 700.
• Self-host when possible: Hosting fonts yourself (vs. Google Fonts CDN) gives you more control and can be faster with proper caching.

System font stack alternative:

• Use native system fonts for instant loading and optimal readability: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
• Pros: Zero load time, familiar to users, optimized for each OS. Cons: Less brand distinction.
• Used by: GitHub, WordPress admin, Medium (for speed).

Responsive Typography

Responsive typography scales text appropriately across devices. Desktop sizes don't work on mobile, and mobile sizes feel timid on large screens.

Approaches to responsive type:

• Media query breakpoints: Define font sizes at key breakpoints (mobile, tablet, desktop). Simple but requires manual tuning. Example: H1 at 32px mobile, 48px tablet, 64px desktop.
• Fluid typography (viewport units): Use vw (viewport width) units for scaling. Example: font-size: calc(16px + 1vw); scales with screen size. Requires min/max constraints.
• Clamp function: CSS clamp(min, preferred, max) is the modern standard. Example: font-size: clamp(32px, 5vw, 64px); scales between 32px and 64px based on viewport.

Responsive type best practices:

• Scale headings more than body: H1 might be 2x larger on desktop vs. mobile, but body text only 1.2x larger (16px → 18-19px).
• Adjust line height: Shorter lines (mobile) need more line height. Longer lines (desktop) can have tighter line height.
• Reduce line length on larger screens: Use max-width: 70ch; on content containers so text doesn't stretch across ultra-wide monitors.
• Test on real devices: Simulators don't capture actual readability at arm's length on different screen sizes.

Example responsive scale:

• Body: clamp(16px, 1rem + 0.5vw, 18px)
• H3: clamp(20px, 1.25rem + 1vw, 28px)
• H2: clamp(28px, 1.75rem + 2vw, 40px)
• H1: clamp(36px, 2.25rem + 3vw, 64px)

Accessibility and Inclusive Typography

Typography must work for everyone, including users with visual impairments, cognitive disabilities, and reading disorders like dyslexia.

Accessibility guidelines:

• Minimum 16px body text: Anything smaller is hard to read for many users.
• Avoid justified text: Creates uneven word spacing ("rivers") that disrupts reading flow. Use left-aligned for body text.
• Don't use all-caps for long text: Harder to read because words lack distinctive shapes. Fine for short labels or headings.
• Sufficient contrast: 4.5:1 minimum for body text. Test with WebAIM or browser DevTools.
• Allow user zoom: Don't disable pinch-zoom on mobile. Some users need to enlarge text.
• Respect user preferences: Check for prefers-reduced-motion and prefers-color-scheme media queries. Don't animate text if motion is reduced.

Dyslexia-friendly considerations:

• Use sans-serif fonts (easier to distinguish characters)
• Increase line height (1.5-2.0 for dyslexic readers)
• Avoid italic and light fonts for long text
• Use larger font sizes (18px+)
• Consider OpenDyslexic or Comic Sans as optional themes (controversial but some users prefer them)

Screen reader considerations:

• Use semantic HTML (<h1>, <p>, <strong>, not <div> with CSS styling)
• Don't use font effects to convey meaning—screen readers can't interpret "red and bold" as "error"
• Avoid text in images (inaccessible to screen readers unless alt text describes it)

Related Reading

• Color Psychology in Web Design: Choosing Colors That Convert
• UX Research Methods for Small Teams
• Dark Mode Design Guide: Implementation Best Practices