Font pairings by industry, and why the category is a trap

Read four "fonts for X" guides across four unrelated sectors and the overlap is striking. A geometric sans for anything technology-adjacent. A transitional serif for anything that wants to seem established. A high-contrast display serif for anything luxury. A rounded sans for anything friendly.

The convergence happens because industry is a proxy variable. What the writer means by "fintech" is *needs to signal institutional trust*, and what they mean by "creative agency" is *needs to signal distinctiveness over legibility*. Those are the real inputs. Once you name them directly, the sector label stops adding information — and it stops leading you to the same three fonts as every competitor in your category.

The third axis is the one designers skip and engineers discover. A face that is beautiful in a 48px heading can be unusable in a 12px table label, and most interface work happens at the small end. Test at 12px before you fall in love at 48px.

These are defensible defaults, with the reasoning stated so you can disagree with it, and a differentiating alternative for each because the default is what your competitors already used.

Each sector below carries a live specimen rather than a screenshot: the heading face, the body face and the mono face rendered at every step of a real scale, in the browser you are reading this in. A pairing shown as an image tells you nothing about how it sets at caption size, and caption size is where pairings fail.

For a deeper treatment of the SaaS case specifically, including a mono face for data and how many weights you actually need, see SaaS font pairing.

A pairing that is right on paper and wrong in the browser is still wrong. Four delivery decisions that change what your reader actually sees.

The fallback-metrics row is the highest-value one and the least known. A layout shift on every first visit is a real quality signal to users and to page-experience metrics, and it is fixable with a handful of CSS descriptors rather than a font change.

/* A metric-matched fallback: same footprint, no reflow on load. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: "Inter", "Inter Fallback", sans-serif; }

The exact percentages differ per typeface and are worth measuring rather than copying. Several frameworks now generate them automatically when fonts are declared through their font API, which is the easiest way to get this right.

Before committing to a pairing, five tests. Each catches a different failure and all of them are faster than discovering the problem in build.

1. 1

   Set your real headline, not a placeholder

   Lorem ipsum has no capitals in awkward places, no numbers, and no long compound words. Your actual product name and value proposition will have all three.

2. 2

   Type Il1 O0 and a long number

   Capital I, lowercase l, digit 1; capital O, digit 0. Then a realistic order number or currency amount. If any pair is ambiguous, the face is wrong for anything transactional.

3. 3

   Render body text at 14px and read a full paragraph

   Not a line. A paragraph. Fatigue and rhythm problems only appear over distance, and body text is where readers spend their time.

4. 4

   Check the weights you actually have

   A pairing that depends on a weight the webfont does not ship will silently synthesise it, and synthesised bold is visibly worse. Confirm every weight in your scale exists as a real cut.

5. 5

   Look at it next to two competitors

   This is the industry-convention check, used correctly: not to find your font, but to confirm you did not land on theirs.

Choosing the pairing is half the work. The other half is recording it precisely enough that it gets reproduced — by a new engineer, or by a coding agent writing screens you never review line by line.

We sampled 299 DESIGN.md files published for AI agents to read. 83% mention typography, and 44% contain no concrete size value anywhere. They name a font and stop, which leaves every size, weight and tracking decision to the model — and the model resolves it the way its training data does, which is the same way everyone else's does.

## Typography

Display: Playfair Display — headings 32px and above only.
UI and body: Inter (variable) — everything else.

Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48.
Weights: 400 and 600 only. Never above 600.
Tracking: -0.02em at 32px+, 0 from 14-24px, +0.02em on 12px caps.

Never set Playfair below 32px.
Never use Playfair for UI labels, buttons or table content.
Numerals are always Inter, always tabular in tables.

Note that half of that is prohibitions. A pairing recorded as two font names permits every misuse of both; the constraints are what make the pairing hold. More on writing guidance an agent will follow.