How to use the Font Pairing Generator
- Narrow the mood. Tap a chip such as Editorial, Handmade or Techy, or set Heading style and Body style if you already know you want, say, a slab headline over a sans serif. The counter next to the arrows shows how many of the 62 curated pairings are left.
- Browse or shuffle. Step through the list with the arrow buttons, or press Shuffle for a random pick. Fonts load from Google Fonts only when a pairing needs them.
- Lock what you like. Found the right headline face? Press Lock next to it and shuffle again: only the body font changes. The badge tells you whether the result is one of our curated pairings or your own remix.
- Test it on your words. Click into the preview card and type your studio name, a product title or a real paragraph from your site. Adjust Heading size, Heading weight, Body size and Line height, and try the Paper and Dark backgrounds.
- Take the code. Copy embed code gives you the
<link>tags (or an@importline) that request only the weights you’re using. Copy CSS gives thefont-familystacks with fallbacks, sizes in rem and your line height.
Why a pairing needs contrast, not similarity
A heading font and a body font have different jobs. The headline sets the voice in a few words, at sizes where every curve shows. The body text has to disappear: at 16–18 px, over hundreds of words, it should feel effortless. Two fonts that are almost alike fight each other, because the reader senses a difference without being able to name it. Two fonts that differ clearly in one way, and agree in others, look intentional.
The most reliable contrast is structure: a serif against a sans serif. Playfair Display’s thick-and-thin strokes over Source Sans 3’s even strokes is a classic for that reason. If you prefer two sans serifs, make the gap obvious in weight or width, like condensed Oswald at 600 over Open Sans at 400. Same-family pairs such as Source Serif 4 with Source Sans 3, or IBM Plex Mono with IBM Plex Sans, are the safest of all: they were drawn with shared proportions, so they contrast in style but agree in rhythm.
What should agree? Mainly the x-height (the height of lowercase letters) and the overall color of the text block. If the heading face has tall lowercase letters and the body face has tiny ones, the page looks patched together even when each font is lovely on its own.
Line length matters as much as the fonts. Robert Bringhurst’s long-standing guideline puts a comfortable line at 45 to 75 characters. The preview card caps the paragraph at 64 characters (max-width: 64ch) so you judge the body font in a realistic column, not stretched across a monitor.
Reading a pairing by type family
The tool labels every font by its broad family. This table shows how the families in the list tend to behave, with examples you can load right away.
| Family | Examples in the tool | Pairs well with | Watch out for |
|---|---|---|---|
| Garalde (old-style serif) | EB Garamond, Cormorant Garamond, Crimson Pro | Geometric or humanist sans headings | Small x-heights; set body text a size larger |
| Transitional serif | Libre Baskerville, Source Serif 4, PT Serif | Neutral sans for UI and captions | Can feel formal for playful brands |
| Didone (high contrast) | Bodoni Moda, Abril Fatface, Prata | Calm sans body text | Hairlines thin out at small sizes; keep it for headings |
| Slab serif | Roboto Slab, Zilla Slab, Bitter, Arvo | Grotesque or humanist sans | Two slabs together look heavy |
| Geometric sans | Montserrat, Poppins, Jost, Outfit | Old-style or transitional serifs | Round letters run wide; lines get long |
| Grotesque / neo-grotesque | Inter, Work Sans, Archivo, Libre Franklin | Expressive serif or display headings | Two grotesques side by side look accidental |
| Script and hand | Great Vibes, Sacramento, Caveat, Kalam | Quiet sans or Garamond body | Never in all caps, never for paragraphs |
Loading Google Fonts without slowing the page
Each weight of a static font is its own file, so a pairing that uses four weights of each family can mean eight downloads before the text looks right. The embed code here asks only for the heading weight you chose plus regular and bold for the body (when the family has them). For a typical pairing like Playfair Display 700 with Source Sans 3 400 and 700, that’s three styles.
The display=swap parameter shows text in a fallback font first and swaps in the web font when it arrives, so nobody stares at blank space. The two preconnect lines let the browser open connections to fonts.googleapis.com and fonts.gstatic.com early. If you need italics, extend the request yourself, for example family=Source+Sans+3:ital,wght@0,400;0,700;1,400.
Some studios, especially in the EU, self-host fonts instead of calling Google’s servers, partly because of a 2022 Munich court ruling about sending visitors’ IP addresses to Google. The CSS from Copy CSS works either way: only the embed lines change.
Tips from practice
Check the characters you actually use. Type your real name, prices and any accented letters into the preview. Plenty of display fonts look great in English headlines and then lack a ø, a ł or a proper € sign.
Keep scripts away from buttons and labels. A script like Pacifico or Great Vibes can carry a logo-style headline, but buttons, navigation and form labels should use the body font. Readers scan those words; they don’t admire them.
Spend your contrast in one place. If the fonts already differ in structure, keep the weights moderate. A Didone at 900 over a bold sans shouts twice. Pick one loud element and let the rest stay calm.
Pair the type with a scale, not random sizes. Once the fonts are settled, set heading sizes from a ratio with the Type Scale Generator so the H2 and H3 feel related to the H1. Then confirm the text color reads well with the Contrast Checker.
Write the pairing down. Save the family names, weights, sizes and line height in your brand notes, or bookmark the page: the link keeps the whole pairing in its address.