Typography & Fonts
The most important design element most people ignore — typefaces, readability, and web font performance.
Why Typography Is 95% of Web Design
Web design is 95% typography. The majority of your website is text. Users read headlines, body copy, links, form labels, buttons. How these are styled determines:
- •Readability — can users actually read the content?
- •Visual hierarchy — what's important and what's supporting?
- •Credibility — does the typeface communicate professionalism?
- •Speed — does text load quickly and render immediately?
- •Accessibility — is the text large enough and high contrast enough to read?
Yet most people spend 50% of design time on colors and images, and 5% on typography. Backwards priority.
Web Fonts vs System Fonts
System Fonts (Free)
Fonts already installed on the user's device. Arial, Helvetica, Times New Roman, Georgia, etc. Browser falls back to these.
Pros:
- • Instant load (no download)
- • Smallest file size
- • Maximum accessibility
- • Consistent rendering
Cons:
- • Limited selection (~5 good choices)
- • Every site looks similar
- • Limited personality/brand
- • Dated aesthetic
Web Fonts (Downloaded)
Custom fonts downloaded from services like Google Fonts or Adobe Fonts. Thousands of options.
Pros:
- • Huge selection (thousands of fonts)
- • Brand differentiation
- • Modern aesthetic
- • Design control
Cons:
- • Download delay (100-300kb)
- • Performance impact
- • Rendering delay while loading
- • Accessibility issues if not optimized
Modern approach: Use web fonts but optimize them aggressively. Subset to only the characters you need. Use modern font formats (WOFF2). Lazy load if not critical.
Font Loading and Performance
The key to web fonts is the font-display CSS property, which controls what happens while fonts are loading:
| font-display | Behavior | Use Case | Impact |
|---|---|---|---|
| auto | Show invisible text until font loads | Default, usually bad | Invisible text flash (FOIT) |
| block | Show invisible text, swap when loaded | Serif fonts (headlines) | Significant delay, then swap |
| swap | Show fallback text, swap to web font | Best practice | Flash of unstyled text (FOUT) is acceptable |
| fallback | Invisible for 3s, then swap | Compromise | Brief invisible text, then swap |
| optional | Show fallback, don't swap if slow | Safe for slow networks | May never load web font |
Best choice for most sites: font-display: swap — show system font immediately, swap to web font when ready. Users can read immediately, and get the custom font shortly after.
Typographic Hierarchy
Hierarchy guides users through content. Different sizes and weights communicate importance:
H1: Primary Heading
Largest, most prominent. The page's main topic. Usually one per page. 32-48px typical size.
H2: Section Heading
Breaks content into logical sections. Multiple per page. 24-32px typical.
H3: Subsection Heading
Further breakdown within sections. 20-24px typical.
Body text: 16-18px typical. Most readable size for extended reading. Smaller than headlines, but not tiny.
Users scan in F-patterns — left to right, top to bottom. Large headings create stopping points. Small body text fills in details. Good hierarchy makes scanning work.
The Font Pairing Problem
Choosing two typefaces that work together is harder than it looks. Bad pairings look amateurish:
Bad Pairing
Comic Sans + Times New Roman. Comic Sans for everything looks unprofessional. Pairing it with formal serif is jarring.
Okay Pairing
Two similar sans-serifs. Works, but no personality. Safe but boring.
Good Pairing
Modern serif (e.g., Merriweather) + clean sans-serif (e.g., Open Sans). Contrast in style, harmony in weight and spacing.
Safe pairing strategy: One serif font for headings, one sans-serif for body. Or two sans-serifs with very different personalities (one geometric, one humanist).
Use Google Fonts and preview combinations before deciding. Pair fonts, don't match them. Visual contrast is good. Stylistic harmony is good. Sameness is boring.
Platform Typography Control Comparison
| Platform | Font Selection | Custom Fonts | Size Control | Line Height Control |
|---|---|---|---|---|
| Wix | Limited preset | Google Fonts only | Preset sizes | No control |
| Squarespace | Curated selection | Google Fonts limited | Preset sizes | No fine control |
| WordPress | Any font via plugin | Full flexibility | Full control | Full control |
| Webflow | Any web font | Google, Adobe, custom | Full control | Full control |
| Custom Code | Any web font | Full flexibility | Full control | Full control |
Web Font Sources
Google Fonts (Free)
1000+ fonts, all free. Good for open-source and small projects. Optimize font loading, not slow.
Adobe Fonts (Subscription)
Thousands of professional fonts. ~$50/month. Worth it if you need quality typefaces for multiple projects.
Typekit (Adobe)
Premium subset of Adobe Fonts. Included with Creative Cloud. $12-20/month standalone.
Custom Fonts
Self-host any font or buy desktop licenses. More control, more responsibility for performance.
The Readability Checklist
Before finalizing typography, check:
- ✓Body text is at least 16px (or 14px minimum, 16px preferred)
- ✓Line height is at least 1.5 (1.6-1.8 ideal for web)
- ✓Line length is 50-75 characters wide (not full viewport width)
- ✓Contrast ratio is at least 4.5:1 for body text (WCAG AA)
- ✓Font weights are differentiated (don't use 5 shades of gray)
- ✓Hierarchy is clear (headings much larger than body)
- ✓Font files load in under 1 second
Typography and SEO/Accessibility
Typography affects more than just aesthetics:
SEO Impact
- • Proper heading hierarchy (H1, H2, H3) signals content structure
- • Readable text improves engagement (bounce rate signal)
- • Fast font loading contributes to Core Web Vitals
- • Proper contrast ensures text is readable to crawlers too
Accessibility Impact
- • Large text size helps people with low vision
- • High contrast essential for colorblind users
- • Proper spacing helps dyslexic readers
- • Clear hierarchy helps screen reader users navigate