moodspec
← All articles

Craft · · 4 min

Choosing type pairings for product UI

A practical way to pick two typefaces that hold up across a landing page, an app and an email.

Most product interfaces need exactly two typefaces: one with a voice, for headings, and one that disappears, for body and UI. A third is a decision you will spend the rest of the project defending — to teammates, to yourself at 2am, and now to an agent that has to guess which of the three a given label belongs to.

Two is not a rule of taste. It is a rule of maintenance.

Pick the body face first

This is the reversal that makes the rest easy. Almost everyone starts with the heading face, because that is the fun one and the one that shows up in the mockup. But the body face is doing ninety percent of the work and is subject to almost all of the constraints.

It has to survive:

  • 13px, on a real screen. Not 32px in a hero. Many faces that look characterful large turn to mush at UI sizes.
  • Tabular numbers, if you show any figures in a table or an invoice. A face without them makes columns wobble. Check for a tnum feature; MDN's font-variant-numeric page covers how to switch it on.
  • Form labels, placeholder text and disabled states, which are usually set in a lighter grey and lose a great deal of their weight.
  • A dense table, which is the single most punishing context in most products.
  • Long strings that cannot wrap — email addresses, IDs, file names.

Test it in the worst place in your product before you fall in love with it in the best place. If it holds up in a 13px disabled form label inside a table row, it will hold up in a hero.

Then pick a heading face that contrasts in structure

The common mistake is pairing two faces that differ in mood but not in structure — two humanist sans-serifs, one slightly rounder. That reads as an accident rather than a decision. Readers cannot name what is wrong; they just feel the page is slightly off.

Real contrast comes from structural difference:

  • A serif against a grotesque
  • A condensed display against a neutral sans
  • A geometric against a humanist

Contrast in weight alone is not contrast. Bold Inter over Regular Inter is a hierarchy, and a perfectly good one — but it is one typeface, and you should call it that rather than pretending you have paired something.

Matthew Butterick's Practical Typography is the best free treatment of this, and it is blunt in a way that saves time: most typographic problems are solved by fewer choices made more deliberately.

Write the pairing down with its rules

Here is where most pairings fail, and it has nothing to do with the faces.

You choose two typefaces, you use them correctly for a week, and then a new page needs a section label at 11px and someone reaches for the display face because it looks better in isolation. Six months later the display face appears at seven sizes across four contexts and the pairing has quietly stopped existing.

The fix is to record the rules alongside the names:

  • Which sizes each face owns — display from 24px up, body everywhere else
  • What tracking headings get at each size — tight display type usually needs negative tracking, body type almost never does
  • Whether the display face is ever allowed below 24px, and the answer should usually be no
  • Which weights are in play — and if you have picked a variable font, which axis values are sanctioned

The GOV.UK Design System type scale is a good model for how specific this can get without becoming unusable.

Why the rules matter more than the names

If you work with a coding agent, the difference between a pairing that survives and one that does not is almost entirely in this last step.

Told "we use Newsreader and Inter", an agent will use both — and it will guess at everything else. It will set a section label in Newsreader because the label felt important. It will apply the heading tracking to body copy. It will reach for a third weight you never sanctioned. Every guess is locally reasonable and the aggregate is drift.

Told "Newsreader for display at 24px and above, tracking −0.03em; Inter for everything else; Newsreader is never used below 24px", it has no guessing to do. Those rules are the artefact — see how to teach a coding agent your design taste for the general shape of this, and the docs for how the rules reach the agent in the first place.

Font names alone are not a system. The rules are the system, and they are the part that has to be written down.

Further reading

Keep reading