🔤 Web Typography: How to Choose Perfect Fonts
Quick Takeaway: Typography is 90% of web design. Great typography is invisible—it guides readers effortlessly through content. This guide covers font selection, pairing strategies, and modern CSS techniques for beautiful, readable text.
Why Typography Matters More Than You Think
Studies show that good typography increases reading comprehension by up to 20% and can improve conversion rates by 10-15%. Users form opinions about your site's credibility within 50 milliseconds—and typography plays a huge role.
Understanding Font Categories (With Examples)
Serif Fonts
Traditional, authoritative, great for long-form reading:
- Georgia - Web-safe, highly readable
- Merriweather - Modern serif designed for screens
- Playfair Display - Elegant, perfect for headings
- Source Serif Pro - Excellent for body text
Sans-Serif Fonts
Clean, modern, versatile:
- Inter - Designed for UI, excellent legibility
- System UI - Native feel, zero load time
- Roboto - Google's workhorse, highly versatile
- Open Sans - Friendly, neutral, web-optimized
Display Fonts
Use sparingly for impact:
- Montserrat - Bold geometric sans
- Poppins - Modern, friendly
- Bebas Neue - Condensed, attention-grabbing
Font Pairing Strategies That Actually Work
| Style | Heading Font | Body Font | Use Case |
|---|---|---|---|
| Classic | Playfair Display | Source Sans Pro | Editorial, luxury brands |
| Modern | Montserrat | Inter | Tech, startups |
| Minimal | System UI | System UI | Clean, fast-loading |
| Bold | Bebas Neue | Roboto | Creative portfolios |
CSS Typography: Modern Best Practices
1. Fluid Typography with clamp()
/* Smooth scaling typography */
:root {
--font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
--font-size-h2: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
}
body {
font-size: var(--font-size-base);
line-height: 1.6;
}
h1 {
font-size: var(--font-size-h1);
line-height: 1.1;
letter-spacing: -0.02em;
}2. Optimal Line Length & Spacing
.prose {
max-width: 65ch; /* Optimal reading width */
line-height: 1.6; /* Comfortable leading */
letter-spacing: -0.01em; /* Slightly tighter for screens */
text-wrap: pretty; /* Prevent widows (modern browsers) */
}
/* Responsive line height */
@media (max-width: 640px) {
.prose {
line-height: 1.5;
}
}3. Font Loading Strategy
/* Prevent layout shift */
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
font-weight: 400 700;
font-style: normal;
}
/* Preload critical fonts */
/* Use variable fonts when possible */
@supports (font-variation-settings: normal) {
:root {
--font-sans: 'InterVariable', sans-serif;
}
}Accessibility Requirements
- Contrast Ratio: Minimum 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- Minimum Size: 16px for body text (12px absolute minimum)
- Line Height: 1.5 minimum for body, 1.2-1.3 for headings
- Paragraph Spacing: At least 1.5× the line height
- Avoid Justified Text: Creates uneven spacing, hard for dyslexic readers
Common Typography Mistakes
- Too many fonts: Stick to 2-3 max (one for headings, one for body, maybe one accent)
- Poor contrast: Light gray text on white backgrounds is a accessibility nightmare
- All caps for long text: Harder to read—use for short labels only
- Ignoring mobile: What looks good on desktop may be unreadable on phone
- Using images for text: Not accessible, not searchable, doesn't scale
Tools & Resources
- Contrast Checker - Verify WCAG compliance
- Font Size Calculator - Calculate optimal sizes
- Line Height Calculator - Perfect vertical rhythm
- Google Fonts: Free, web-optimized fonts
- Fontshare: High-quality free fonts by Indian Type Foundry
- Type Scale: Visual typography calculator (type-scale.com)
Conclusion
Great typography is invisible—it serves the content, not the designer. Start with a solid foundation: choose 2-3 complementary fonts, set up a fluid type scale with clamp(), ensure proper contrast and spacing, and always test on real devices. Your readers will thank you.