Font Pairing
The practice of combining two or three typefaces that complement each other for headings and body text.
Plain English
Font pairing creates typographic personality. A serif heading with a clean sans-serif body is the most common pairing — the serif draws the eye with character, the sans-serif keeps body text readable. The key rule: create contrast, not conflict. Two very similar fonts look like an accident; two very different fonts that share proportions or history look intentional. When in doubt, one great font at multiple weights beats two mediocre ones.
Technical
Best-practice pairings use fonts with complementary contrast: one with personality (the display/heading font) and one optimised for readability at small sizes (the body font). Good pairing principles: (1) Serif + sans-serif is a proven formula. (2) Both fonts from the same designer often share underlying proportions. (3) Variable fonts pair well with themselves — use the variable axes to differentiate heading and body. When loading Google Fonts for pairing, subset aggressively to minimise performance impact.
Live Demo
Font pairings
The Art of Typography
Typography is the art of arranging type to make written language legible and beautiful. Every design decision communicates something to the reader.
Designing for Clarity
Typography is the art of arranging type to make written language legible and beautiful. Every design decision communicates something to the reader.
Contrast between heading and body creates hierarchy and interest.
Usage
✓ Good usage
Pair Playfair Display at 700 for headings with Inter at 400 for body — the serif gives character and the sans-serif keeps long text readable.
✗ Bad usage
Pairing two display fonts (e.g. Lobster + Pacifico) — both compete for attention and neither is legible at body sizes.
Recommended values
- Playfair Display (heading) + Inter (body) — editorial, premium
- Fraunces (heading) + DM Sans (body) — warm, friendly, modern
- Space Grotesk (heading) + Inter (body) — tech, startup
- Merriweather (heading) + Lato (body) — readable, professional
- One font, multiple weights — always safe; Inter 700 heading / 400 body
Common mistakes
- Pairing two visually similar sans-serifs — the difference looks accidental rather than intentional.
- Using a display font (Lobster, Pacifico) at body sizes — display fonts are only legible at 24px+.
- Loading too many font weights — increases page load time significantly.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use Playfair Display (400/700) for all headings and Inter (400/500/600) for body, labels, and UI text. Load only the weights you use. Set font-display: swap to prevent invisible text during font load.