Font pairings that explain themselves.
Discover beautiful Google Fonts combinations with plain-English explanations of why they work. Generate, lock, and export in seconds.
Open the ToolHow TypeDuo Picks a Pairing
Pair Playfair Display with a sans body. Which sans? Inter, Source Sans 3, Work Sans, and Raleway all have defenders. The wrong question is “which sans is best.” The right one is “which signal in Playfair Display am I echoing or contrasting.” Answer that, and the field of fifty-plus candidates collapses to about four.
TypeDuo’s pairing engine runs three signals, ranked by decisiveness: classification, x-height, and stroke contrast. Weight harmony is a tiebreaker. Below is the decision tree the generator uses, written out so you can override it when your taste disagrees with the math.
The three signals that determine whether a pairing works
Pick the heading first. Body follows from heading, not the reverse.
The signals, ordered by how much they settle the question:
- Classification. Serif, sans-serif, slab, monospace, display. Two fonts from the same classification rarely produce hierarchy; the eye reads them as variants of one voice.
- X-height. Lowercase height relative to cap height. Mismatched x-heights force the reader to re-calibrate every time the eye crosses from heading to body.
- Stroke contrast. The gap between thickest and thinnest parts of a letterform. High-contrast typefaces (Playfair Display, EB Garamond, Cormorant Garamond) carry personality; low-contrast ones (Inter, Roboto, Source Sans 3) carry almost none, on purpose. Pair high with low.
We weight classification heavier than x-height. A classification mismatch with shared x-height still reads as hierarchy. A classification match with shared x-height reads as one voice in two outfits.
Classification contrast: the branching rule that comes first
For forty years, editorial design has defaulted to serif heading plus sans body. Serifs carry calligraphic memory at display size; sanses disappear at body size. The inverse, sans heading plus serif body, has its own logic: long-form reading on screens benefits from a serif's ink density, and a confident geometric sans heading (Montserrat, Poppins, Work Sans at 700) reads as editorial minimalism rather than corporate slide deck.
Three rules cover most cases:
- Heading is a high-contrast serif: body must be a low-contrast sans. Playfair Display wants Inter. Cormorant Garamond wants Source Sans 3.
- Heading is a sans: body can be a humanist serif (Lora, Spectral) or a different sans, but only if the body sans has a meaningfully higher x-height. Raleway over Open Sans works. Raleway over Raleway is one font.
- Heading is a slab: body should be a humanist sans with medium x-height. Slabs are loud and benefit from a quiet body.
Should I ever use the same font for heading and body?
Only with a typeface designed for it. Inter, Source Sans 3, and Roboto Serif have weight ranges built for single-family hierarchies. Playfair Display does not. If you go single-family, change weight by at least 400 units between heading and body.
X-height and stroke contrast: the refinement pass
Once classification gives you a shortlist, x-height and stroke contrast pick the winner. The table below is the lookup the generator uses internally. It's also the answer to “why did TypeDuo suggest this sans and not the one I expected.”
| Signal | Use a serif heading when | Use a sans heading when |
|---|---|---|
| X-height | Heading is low and body is medium-to-high. Playfair Display (low) over Inter (high) is canonical: heading floats, body sits flat and reads. | Heading matches body. Montserrat (high) over Open Sans (high) keeps the eye on one baseline grid. |
| Stroke contrast | High-contrast heading, low-contrast body. EB Garamond or Cormorant Garamond with Lato or Nunito body gives the heading the personality and the body none. | Both sit low-contrast. Work Sans 700 over Source Sans 3 400 reads as one disciplined voice. Avoid high-contrast display sans with high-contrast serif body. |
| Classification | Body is a sans-serif or humanist sans. Bitter or Merriweather as body works only with a slab heading. | Body is a humanist serif or a second sans with clearly different proportions. Lora or Spectral under a geometric sans is the inverted-editorial pairing that's quietly correct for long-form screens. |
What if the rules say “use Inter” but Inter feels wrong?
Trust the feeling, but locate it. Usually “wrong” means density is off (too many high x-heights together) or the personality budget is misallocated (the heading should do the work; the body keeps stealing the spotlight). Lock the heading, regenerate twice, and watch which body fonts the engine keeps surfacing.
Early on, we kept hitting pairings that scored well on the math but felt cold in real layouts. We added weight harmony as a fourth tiebreaker after seeing too many trios where 400-weight body couldn't hold its own against 700-weight headings on a wide column. The fix: require at least one weight bridge when the visual weight gap exceeded 300 units.
When the rules produce a trio you still don't trust
Sometimes the algorithm produces a defensible pairing you just don't like. The signals are necessary, not sufficient.
Three escape hatches.
First, check whether your real content will look like the preview. The default preview is a 16 words headline at 36 px and a 40 words body paragraph at 18 px. If your actual content is a three-word product name and 400 words of dense documentation, the trio that wins the preview may lose for your reality. Edit the preview inline. The pairing's character shifts the moment you swap “The weight of words” for what you're actually setting.
Second, lock the slot you trust and regenerate. If the heading is right, lock it. If the body feels readable, lock that. Let the engine churn through the third slot.
Third, override directly. The font browser shows every font in the curated library with classification, x-height, and stroke-contrast metadata. Pick the body font you want, set it manually, and let the rationale tell you whether the choice holds up. The rationale is generated from the relationship between fonts. If the explanation reads as forced, the pairing probably is.
The library is fifty-plus fonts, not fifteen hundred, on purpose. We tested this against a full Google Fonts crawl in 2024 and the extra 1,450 fonts contributed almost no winning pairings. Tools that try to use the whole catalog (fontjoy.com being the most-cited example) end up surfacing pairings the user has to filter by gut anyway, because Inter (released 2017) and Playfair Display (designed in 2011) sit next to revival faces with no proven screen behavior. Fonts with poor screen rendering, incomplete character sets, or irregular spacing failed at the body slot before being considered for heading. Curating to the survivors is the difference between “any pairing the tool gives you is shippable” and “fix this in CSS.”
A pairing the math says is correct but your eye says is wrong is information. Lock and regenerate before reaching for a different tool.
Frequently Asked Questions
How do I generate a font pairing for my website?
Open TypeDuo and press Generate (or hit the Space bar). The tool returns a heading, subheading, and body trio drawn from a curated set of Google Fonts and Fontshare typefaces, along with a plain-English explanation of why those fonts work together. Lock any slot you like, regenerate the others, edit the preview text inline, then click Export to copy the Google Fonts embed link and CSS font-family declarations into your project. No signup, no cost, runs entirely in the browser.
Why does this font pairing work?
Every TypeDuo pairing is rationalized in plain English using four properties: classification, x-height, stroke contrast, and weight harmony. A pairing works when the heading font is different enough from the body font to serve a different role (usually different classification or much higher stroke contrast) but similar enough in x-height and apparent weight that the eye moves between them without recalibrating. The rationale text on each card names the specific relationship — for example, “high-contrast transitional serif against a low-contrast humanist sans, matched x-height.”
What makes a font pairing work?
Two fonts work together when they're different enough to do different jobs but similar enough to read like one design. A serif heading with a sans body is the classic move. A high-contrast display face paired with a workhorse text face is another. What matters is that the underlying properties (x-height, weight, tone) roughly match, even if the surface styles don't. Pairings break when the fonts are too similar (two humanist sans-serifs that look like cousins) or when they're miles apart (a brush script next to a precise neo-grotesque). TypeDuo's generator skips both extremes.
Why does x-height matter for pairing?
X-height is the height of lowercase letters without ascenders or descenders, measured from the baseline. It determines how large text feels at a given point size, not how large it actually is. Two fonts set at 16px can look dramatically different in body copy if their x-heights diverge — one reads as normal, the other as cramped or oversized. When heading and body fonts share a similar x-height, the eye moves between them without recalibrating, which preserves reading flow. TypeDuo tags each font's x-height as low, medium, or high and matches accordingly.
What is stroke contrast and why does it affect pairing?
Stroke contrast is the ratio between the thickest and thinnest parts of a letterform. High-contrast fonts like Bodoni or Didot have dramatic hair-thin horizontal strokes against thick vertical ones, which gives them a formal, fashion-magazine feel. Low-contrast fonts like Futura or Avenir keep nearly uniform stroke weight throughout, which reads as stable and technical. Pairing fonts with complementary contrast levels creates visual separation between heading and body roles without forcing a classification switch. TypeDuo names the contrast relationship in each pairing's rationale.
Can I pair two serif fonts together?
Yes, but it takes more care than mixing classifications. Two serifs from the same sub-classification (two transitional serifs, for example) will often feel redundant because they're built the same way. Pairing a high-contrast Didone (like Playfair Display) with a sturdy slab serif (like Roboto Slab) works because the stroke-weight difference is large enough to separate their roles. Another reliable pattern: a decorative display serif for headings with a readable text serif for body, where the display face has obvious personality the text face lacks.
What is the difference between a heading and body font?
A heading font is set large, read briefly, and carries personality — it sets the tone of the page. A body font is set small, read for long stretches, and prioritizes legibility over personality. The two jobs ask for different things: heading fonts can have high stroke contrast, distinctive letterforms, and tighter spacing because the eye sees them as a graphic shape. Body fonts need a sturdy x-height, even color, generous spacing, and quiet letterforms so the words disappear into the meaning. TypeDuo separates the two roles explicitly and applies different scoring to each slot.
How do I know if my font pairing is good?
Three quick checks. First, contrast: the heading and body should be visibly different at a glance — if you have to squint to tell them apart, they're competing rather than cooperating. Second, harmony: the x-height and apparent weight should feel related, so the eye doesn't recalibrate when it crosses from heading to body. Third, tone: both fonts should agree about whether the page is formal, friendly, technical, or expressive. TypeDuo's plain-English rationale on each pairing names exactly which relationships are working, so you can sanity-check against these three criteria without guessing.
How do I export a font pairing as CSS?
Click the Export panel below the specimen card. TypeDuo generates two copy-ready blocks: a Google Fonts embed link (with the exact families and weights you have selected) that goes in the <head> of your HTML, and a CSS block with font-family declarations for headings, subheadings, and body. Paste both into your project and the trio renders identically to the preview. Fontshare-hosted fonts include their own embed link in the same panel. No account required, no download step.
What are the best Google Fonts that pair well together?
There's no single best answer because the right pairing depends on tone (formal vs. friendly), reading length (display vs. long-form), and brand personality. That said, a few combinations recur because the underlying properties match well: Playfair Display + Source Sans 3 (high-contrast serif + neutral sans), Fraunces + Inter (modern serif + workhorse sans), Space Grotesque + Inter (geometric sans + neutral sans with matched x-height), and DM Serif Display + DM Sans (designed as a family). TypeDuo will surface dozens of these pairings on demand and rationalize each one.
Can I lock one font and regenerate the others?
Yes — every slot has a lock toggle. When you find a heading you like but the body font isn't working, click the lock on the heading and press Generate (or Space). TypeDuo keeps the locked slot and only swaps the unlocked ones, so you can explore the compatible body and subheading options for that specific heading. Lock multiple slots to narrow the search; clear all locks to start fresh. The pairing rationale updates each time to explain the new combination.
Is TypeDuo free to use?
Yes, fully free with no signup, no account, and no paywall. TypeDuo runs entirely in your browser and the export feature gives you the Google Fonts embed link and CSS declarations at no cost. Every font in the curated library comes from Google Fonts or Fontshare, both of which release fonts under open licenses (SIL Open Font License or equivalent) that permit personal and commercial use. The site is supported by unobtrusive display ads.
Are all the fonts free to use?
Yes. Every font in the TypeDuo library comes from Google Fonts or Fontshare. Both libraries offer fonts under open licenses (SIL Open Font License or equivalent) that permit personal and commercial use at no cost, including embedding in websites, apps, and printed materials. You can self-host them or link to the CDN. The CSS export feature generates both the Google Fonts embed link and the font-family declarations you need, so you can paste them directly into your project.
How many fonts are in the curated library?
About 50, intentionally curated rather than exhaustive. Google Fonts hosts 1,500+ families, many with problems: poor screen rendering, missing diacritics, irregular spacing, outdated hinting. TypeDuo selects fonts that render cleanly across browsers, ship a full Latin character set, have multiple weights, and have clear enough classification characteristics that the pairing logic can reason about them. Smaller library, better pairings.
Privacy
TypeDuo runs entirely in your browser. Font selections and theme preferences stay in localStorage on your device. We use PostHog for anonymous usage analytics. Full privacy policy
Contact
Built by Infinite Orchard. Questions, feedback, or font suggestions: support@infiniteorchard.com