Font pairing for websites: why one family often wins
Most sites look more designed with one well-chosen font family used in several weights than with a fashionable pairing. A second typeface earns its place only when it does a job the first can't, such as long-form serif reading or code. If you do pair, pick faces with a clear contrast in role and a shared structure underneath.
Why pairing became the default advice
Print designers have long combined a display face for headlines with a text face for reading, because the needs at 72pt and 9pt really are different. When web fonts became easy to load, that advice moved online, and lists of font combinations for websites became a genre of their own. The trouble is that many of those pairings solve a print problem screens no longer have. Modern families come with a wide range of weights, sometimes widths and optical sizes, so one family can cover headline, body, labels and numbers on its own.
What one family gives you
- Coherence for free. Letter shapes, proportions and spacing already agree between headline and body, so nothing feels assembled.
- Hierarchy from size and weight. A 72px light headline, a 20px regular deck, 17px body and 13px semibold labels give four clear levels from one family.
- Fewer files. One variable font file, or two or three static weights, instead of two families with several weights each. Every extra family adds requests and bytes and widens the chance of a visible font swap as the page loads.
- Fewer decisions. No arguments about which face a button or a caption should use.
When a second face earns its place
| Case | Pairing | Why one family isn't enough |
|---|---|---|
| Long-form reading | A serif for body text with a sans for interface | Some readers and brands prefer a serif for long articles; the sans handles menus and buttons |
| Code or data | A monospace alongside the main face | Code samples and tabular data need fixed-width characters |
| A strong identity | A distinctive display face for large headlines only | The brand has a face that would be unreadable as body text |
| Several writing systems | A second family that covers scripts the first doesn't | Not every family includes Arabic, Devanagari or CJK glyphs |
Outside those cases, font pairing for websites is usually decoration. Three faces is almost always too many: by then visitors notice the fonts rather than the words.
How to pair fonts well, if you do
- Give each face one job. Display for headlines only, text face for everything else. Don't let the display face creep into buttons and labels.
- Contrast in style, match in structure. A serif and a sans with similar x-heights and proportions sit together comfortably. Two sans-serifs that are almost alike look like a mistake.
- Check them at real sizes. Set an actual headline, a paragraph and a button. Pairings that look good in a specimen often clash in a layout.
- Match the mood. A geometric sans with a sharp, high-contrast serif reads as fashion; a humanist sans with a sturdy slab reads as practical.
- Limit weights. Two weights of each face is usually plenty.
A note on Google font pairings
Free font libraries made a handful of families extremely common, and certain pairings appear on so many templates and generated sites that they signal “default” rather than “chosen”. That doesn't make those faces bad; it means they carry less identity. If you choose from a free library, look past the first page of popular results. Overused fonts in web design covers which ones and what to use instead.
Accessibility
Whatever you choose, body text should be at least 16px, with a line height around 1.4 to 1.6 and a reading width of 60 to 75 characters. Decorative display faces need generous size and contrast and shouldn't be used for long text or labels. Avoid faces where similar letters (I, l and 1; O and 0) are hard to tell apart in places where it matters, such as booking codes.
One family per site in Anticode
Every one of Anticode's seven design systems uses exactly one font family: Geist for Editorial, IBM Plex Sans for Technical, Jost for Luxury, Fredoka for Playful, Archivo for Brutalist, Figtree for Organic and Inter Tight for Swiss. Hierarchy in each comes from the system's sizes, weights and spacing, which is the approach this page recommends.
Two checks keep it that way. The Critic flags pages using more than one family or one pairing, and pages using the handful of fonts nearly every AI-built site picks. The design gate blocks publishing a page that loads a third font family or falls back to a serif face.
Questions people ask
How many fonts should a website use?
One family is enough for most sites. Two can work when each has a distinct job. Three is almost always too many.
Should I pair a serif with a sans-serif?
It's the classic pairing and works when the serif handles long reading and the sans handles interface. If your pages are mostly short, one sans family is simpler.
Do more fonts slow down a website?
Each family and weight is another file to download. A single variable font, or a few weights of one family, keeps loading light.