Font Pairing Suggester
Brief
A suggester is a shortlist machine, not an oracle: it removes the combinations that fail structurally and leaves the choice to the preview.
Ranked shortlist
| Heading face | Body face | Score | Why it ranked |
|---|---|---|---|
| Inter | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief | |
| Space Grotesk | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief | |
| DM Sans | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief | |
| Manrope | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief | |
| Poppins | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief | |
| JetBrains Mono | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief | |
| Bebas Neue | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief | |
| Inter | 6 | different classifications, so the roles read apart · serif heading suits a editorial brief |
Click a heading face to load the pair into the preview.
Preview top three
Choose a pairing in minutes
The suggestion engine ranks every heading/body combination in the preview catalog by three rules and shows its reasoning, so a shortlist can be tested instead of guessed.
Choose a pairing in minutes
The suggestion engine ranks every heading/body combination in the preview catalog by three rules and shows its reasoning, so a shortlist can be tested instead of guessed.
Choose a pairing in minutes
The suggestion engine ranks every heading/body combination in the preview catalog by three rules and shows its reasoning, so a shortlist can be tested instead of guessed.
// each candidate pair is scored, then sorted descending
score = 0
if (heading.kind !== body.kind) score += 3 // roles must read apart
score += briefFit(heading.kind) // serif for editorial, sans for product…
if (heading.kind === "mono" && brief !== "technical") score -= 2
if (heading.kind === "display") score += 1 // display faces are expressive by designYou Might Also Need
The font pairing suggester scores every heading and body combination in the catalogue against three rules, ranks them and shows its reasoning. It is a shortlist machine rather than an oracle: it removes the combinations that fail structurally and leaves the choice to the preview.
What is Font Pairing Suggester?
The font pairing suggester scores every ordered pair of faces in the catalogue against a brief, then returns a ranked shortlist of eight and previews the top three.
- Five briefs are offered: editorial and long-form reading, product interface, brand and marketing, technical documentation, and a warm humanist brief.
- Each candidate pair is scored by a rule based scorer, and every ordered combination is evaluated rather than a hand-picked list.
- The first rule adds three points when the two faces differ in classification, because the roles have to read apart before anything else matters.
- The second rule scores the brief fit: a serif or display heading suits an editorial page, a sans or monospace heading suits a product or technical one, and the warm brief spreads its favour more evenly.
- The third rule removes a monospace heading outside a technical brief and adds a point for a display heading, since display faces are expressive by design.
The shortlist is the useful part, and the reasoning column is what makes it arguable rather than opaque. Each row states why it ranked, either naming the classification difference and the brief fit or admitting that the two faces share a classification and would have to be differentiated by weight instead. Only eight pairs are shown from the full set of ordered combinations, and clicking a heading face in the table loads that pair into the preview below, where the heading sample and the body sample are rendered together at their respective sizes. Each row also reports its score, so the gap between the top suggestion and the fifth is visible and a close score can be treated as a tie to be judged visually.
- The rules are structural and simple: they say nothing about how the two faces look together on the page.
- Classification comes from the catalogue's own labels, so a face whose label is broad, such as a serif that behaves like a display face, is scored on the label rather than on its behaviour.
- The scorer ranks heading and body roles only, so caption, interface and quotation roles are outside it.
- Weights, sizes and measures are not considered, so a pair that scores well can still be set badly.
- Eight suggestions are shown from the full set, and the underlying order is broken by score rather than by diversity, so a shortlist can contain similar combinations.
Use it when a project needs a pairing quickly and the alternatives keep collapsing into the same handful of familiar combinations, or when a client wants the reasoning behind a pairing rather than an assertion. The why column is what makes the second case work. Where an editorial pair has to be chosen deliberately rather than suggested, the serif and sans pairing tool presents curated combinations with their rationale, and where a display and body pairing is the shape of the brief, the display body pairing tool reports the size ratio. The serif sans pairing tool and the display body pairing tool cover those two shapes directly, the multi font comparison measures faces against each other, and the heading and caption pairing covers the third role a page usually needs.
How to use Font Pairing Suggester
- Choose the brief that describes what the page is for, which re-scores every combination immediately.
- Read the shortlist from the top, paying more attention to the why column than to the scores.
- Click a heading face in the table to load that pair into the preview, then judge it on the heading and body samples together.
- Take the two or three pairs that survive the preview and set them at real sizes before deciding, since the ranking is structural rather than visual.
When to use Font Pairing Suggester vs related tools
Reach for it when a pairing is needed quickly, when the shortlist keeps producing the same familiar combinations, or when the reasoning behind a pairing has to be shown to someone else. Where the brief is editorial and the choice should be deliberate, the serif sans pairing tool presents curated combinations with their rationale, the display body pairing tool covers a hero line against body copy, and the font harmony visualizer shows how the chosen faces sit together across several roles.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.