Tools — 03
Two typefaces, one argument.
A pairing is not a decoration: it is the tone of voice before a single word is read. These twelve combinations are curated, not generated — each one previewed at the size you would actually set it, as a headline with a paragraph underneath, because that is the only test that matters.
Pairings
Filter by mood
12 pairings shown.
Editorial
Fraunces + Inter
Design systems fail slowly, and always in the same places.
Most drift is visible the moment you can read the token schema and the component inventory at once. The audit is not the hard part — acting on it is.
A display serif with optical sizing against a neutral grotesque. The default answer for long-form.
Editorial
Playfair Display + Source Sans 3
Built for the quiet parts of the interface.
Contrast ratios, deprecation notices, the accessible name of a button. Nobody photographs them, and every product depends on them.
High-contrast didone headline over a humanist sans. Reads as fashion print at large sizes.
Editorial
Bricolage Grotesque + Inclusive Sans
Removing something is also a design decision.
A deprecation without a migration path is a broken promise with a timestamp. Governance you cannot inspect is just an opinion.
The pairing this site runs on: an idiosyncratic display grotesque with a legibility-first body sans.
Technical
IBM Plex Sans + IBM Plex Mono
Four buttons, all named Button.
parseTokenSchema() reads the CSS custom properties directly, so the site is governed by the same parser it documents.
One family, two voices. Mono body keeps code, values and prose on the same rhythm.
Technical
Space Grotesk + Inter
Local first, always.
A tool that reads every page you visit should not also be a network client. Nothing leaves the machine.
Geometric display with tight tracking against a workhorse UI sans. Product-documentation default.
Technical
JetBrains Mono + Source Sans 3
contrast(ink, paper) = 15.94:1
Every threshold in this tool is computed from the WCAG relative-luminance formula, client-side, with no rounding before the comparison.
Mono headline, sans body. Signals engineering surface without making paragraphs hard work.
Governance-Report
Libre Franklin + Lora
Quarterly design system health report
Twelve components exceeded their deprecation window. Four have no migration path recorded. Ownership is unassigned on two.
Civic-grotesque headline over a text serif. Made for documents people are asked to sign off.
Governance-Report
Archivo + Newsreader
Breaking changes, by blast radius
The analyzer resolves each change to the set of consumers that import it, so severity is measured in teams affected, not in files touched.
Condensable grotesque with a screen-first serif. Dense tables stay readable underneath.
Governance-Report
Work Sans + Crimson Pro
Deprecation policy, version 3
A component enters deprecation with a named replacement, a codemod where one is possible, and a removal date that has already been communicated.
Quiet, institutional, low-drama. Good for policy pages nobody should have to decode.
Playful
Outfit + Nunito Sans
Say hello to your new colour ramp
Ten steps, contrast-checked against white and black, exportable as a Tailwind config in one click.
Rounded geometric headline, soft body sans. Warm without tipping into childish.
Playful
Baloo 2 + Karla
Nothing here yet
Pick a base colour and a ratio. The scale builds itself, and every value is copy-ready the moment it appears.
Heavy rounded display with a slightly quirky grotesque body. Onboarding and empty states.
Playful
Chivo + DM Sans
Ship the fix, not the finding.
Every report ends in a diff you can apply. That is the whole product philosophy, compressed into one sentence.
Punchy grotesque headline over a friendly low-contrast sans. Marketing pages with an edge.
On loading
Every preview here is served from this domain. The copy-ready block uses a Google Fonts import because that is the fastest path in most projects — swap it for self-hosted files if your site makes the same promise this one does.
Reference
A reliable font pairing needs contrast in one dimension and agreement in the rest: pair a display face with a text face, keep their x-height and apparent size compatible, and use no more than two families. Matching moods matter less than matching proportions.
How do you pair two typefaces?
Choose one face to be seen and one to be read. The display face carries headlines, where its personality is an asset at large sizes; the text face carries body copy, where personality becomes fatigue.
Then check they agree on proportion. Two faces at the same font-size can look a size apart if their x-heights differ, which is why a pairing that works in a specimen falls apart in a paragraph.
How many typefaces should one site use?
Two families is the working default: one display, one text. A third is justified only by a genuinely different job, such as a monospace for code.
Each additional family costs render-blocking weight and a possible layout shift. Two families at two weights each is four files; the same at four weights is eight, and the difference is measurable in Largest Contentful Paint.
Do self-hosted fonts perform better than Google Fonts?
Self-hosting is faster in every current browser. Cache partitioning ended cross-site font reuse, so a visitor gets no benefit from having loaded the same Google font elsewhere, and the third-party origin adds a DNS lookup, a TCP connection and a TLS handshake before the first byte.
Self-hosting also removes a third-party request from the page, which is why every font on this site is served from its own origin.
Common questions
- What is the safest font pairing?
- A geometric or grotesque sans for headlines with a humanist sans or a transitional serif for body text. The contrast is legible at a glance and neither face fights the other in a paragraph.
- Can you pair two serifs?
- Yes, if they differ in structure rather than just in name — a high-contrast display serif with a sturdy text serif. Two serifs from the same era and similar proportions read as a mistake rather than a pairing.
- Are the fonts in this tool free to use?
- Every family previewed here is an open-source typeface available through Fontsource. Check each family's own licence before commercial use; most are SIL Open Font License.