Almost every article about font pairing is a list of pairs that somebody thought looked nice. The pairs are usually fine and the list is useless the moment your project needs something not on it. What is worth learning is the reasoning underneath, which is short.
The one rule: contrast or harmony, never neither
Two typefaces on a page either belong to the same world or are visibly from different ones. What fails is the middle: two faces similar enough that the difference looks accidental. A reader cannot tell whether you chose two things or made a mistake, and that uncertainty is the whole of why some pairings feel wrong without anyone being able to say why.
So the first question is not "do these go together" but "am I aiming for contrast or for harmony". Both work. Neither works badly.
Contrast: the reliable version
A serif for headings and a sans for body, or the reverse, is the oldest working pairing there is. It works because the difference is categorical rather than a matter of degree — nobody looks at Playfair Display above Inter and wonders whether it was intentional.
Contrast in weight is the same principle inside one axis: a heavy display setting over a regular body. Contrast in width, or between a display face and a plain one, does the same job. The requirement is only that the difference is obvious at a glance.
Harmony: the version with a shortcut
The safest harmony is a superfamily — one designer’s sans and serif drawn together, sharing proportions and x-height. IBM Plex Sans with IBM Plex Serif, or Source Sans 3 with Source Serif 4. The pairing question has already been answered by the person who drew both, which is why these are hard to get wrong.
The other harmony worth knowing is one typeface used at two very different weights and sizes. It is not a pairing at all, technically, and for a great many projects it is the right answer — the discipline reads as confidence rather than as a limitation.
The two things to check before committing
X-height
The height of the lowercase relative to the capitals is what makes two faces set at the same size look like different sizes. Two faces with very different x-heights need their sizes adjusted against each other, and if you do not the body text will look either shrunken or oversized under the heading. Set them side by side at the same value and look at the lowercase before you decide anything else.
Mood, said out loud
A geometric sans is neutral and slightly cold. A humanist sans is warm. A Didone is formal and expensive. A slab is sturdy and a bit blunt. Two faces whose moods contradict each other will fight regardless of how well their proportions match — and naming the mood in a word is usually enough to notice the contradiction before you have built the page.
Pairings worth starting from
Not because they are the only ones, but because each demonstrates one of the principles above. Playfair Display over Inter is categorical contrast. Lora over Work Sans is the same idea at lower volume, for something that has to be read rather than admired. Space Mono over Inter is contrast by category rather than by style, and it is why so many technical sites look the way they do.
| Family | Variable download | Static download |
|---|---|---|
| Playfair Display | 270 KB2 files | 1.0 MB12 files |
| Inter | 957 KB2 files | 9.1 MB54 files |
| Lora | 224 KB2 files | 555 KB8 files |
| Work Sans | 341 KB2 files | 1.5 MB18 files |
| Source Serif 4 | 989 KB2 files | 6.0 MB64 files |
How to test a pair in two minutes
Set a real heading and a real paragraph — your own words, not filler — at the sizes you will actually use, and look at them small. Most pairings that fail, fail at body size rather than in a specimen. The Lorem Ipsum tool here will set any font in this archive at a chosen size inside a frame you can drag to the width of your real column, which is the part a specimen cannot show you.
Then leave it and come back. A pairing that still looks deliberate an hour later is a pairing. One that has started to look like an accident was always going to.