Pairing Two Typefaces Without Guessing

Font pairing is usually taught as a gallery: here are ten combinations that look nice, pick one. That works until you have a brief where none of the ten fit. Underneath the gallery there is a method, and it is short enough to learn in one sitting. This post sets it out, in the order you would actually make the decisions.

Consider using one family first

The safest pairing is no pairing. Many modern families ship in a wide range of weights and widths, and some come as a superfamily with a serif and a sans built on the same skeleton. A page set in one family, using weight and size for hierarchy, is almost impossible to get wrong, and it loads faster because the browser fetches fewer files.

Reach for a second typeface when you want a voice the first one cannot provide: a headline with personality above plain, readable body text, or a technical monospace for code inside an otherwise warm design. If you cannot name the job the second face is doing, you do not need it yet.

Set the body text before you choose anything else

The body face carries almost all the reading, so it decides whether the design works. Choose it on how it behaves in paragraphs at real size, not on how its name looks in a specimen.

• Line length. Aim for roughly 60 to 75 characters per line on desktop. Shorter on narrow screens, but the same principle: the eye needs a predictable return point.
• Line height. Longer lines and larger x-heights want more leading. Start around 1.5 times the font size for body text and adjust by eye.
• Size. Set it on the device the reader uses, not on your monitor at full zoom. Text that felt generous in the design file often lands small on a phone.

Only when the paragraph looks right should you start looking for a companion.

The two rules that decide a pair

A pair works when the two faces are clearly different in structure and clearly compatible in proportion.

Different in structure means the reader can tell at a glance that they are two voices, not a mistake. Serif against sans is the obvious version. So is a high-contrast display face against a plain workhorse, or a condensed face against a normal-width one. The failure mode is two faces that are nearly the same: two humanist sans-serifs, for instance, read as an accident rather than a decision.

Compatible in proportion means their basic measurements agree. Compare x-heights by typing the same word in both at the same size: if one looks noticeably smaller, you will spend the rest of the project compensating with size tweaks. Check the width of the letters, and check the era they come from. A geometric sans from the 1920s and a transitional serif from the 1750s can work, but they are two strong historical statements, and you should pick that on purpose.

A quick test: type the word "Hamburgefonstiv" in both faces, one above the other, at the same size. Structural difference should be obvious. Proportional disagreement will be obvious too.

Three patterns that rarely disappoint

• Characterful sans for headings, neutral serif for body. The headline carries the brand, the paragraph stays comfortable for long reading.
• Serif display face, plain sans body. The version most editorial sites use, because it reads as considered without making the body text work hard.
• One superfamily, two members. The serif for headings and the sans for interface text, or a condensed width for large type and the normal width for paragraphs. Guaranteed proportional agreement.

Where pairs go wrong

• Two faces competing for attention. One face leads and the other supports. If both have strong personality, the page has no focus.
• Too many weights. Three sizes and two weights will cover most hierarchies. Every extra style is another file to load and another decision to keep consistent.
• Synthetic bold and italic. If you load only the regular weight, the browser will fake the rest by smearing or slanting the letters. Load the real styles or do not use them.
• Choosing on the specimen. Specimens are set by people who know the typeface. Paste in your own content, including the long client name and the awkward product title, before you commit.

The practical checks before you ship

Test with real content at real sizes, on a phone as well as a laptop. Look at numbers, currency symbols and any accented characters your languages need, since incomplete character sets are a common late surprise. Check the licence: web use, app use and social media assets are often separate permissions, and an open-source licence is worth the two minutes it takes to confirm.

On the technical side, load only the weights and character subsets you use, self-host or preload the critical face, and set a font-display strategy so text is readable while the file arrives. A beautiful pair that flashes invisible text for a second is a worse experience than a plain one that appears immediately.

None of this requires taste you were born with. It requires one face chosen for reading, a second chosen for a job you can name, and a check that the two agree on proportion and disagree on structure.