Font Pair Suggester
Discover beautiful Google Font pairings for your projects.
Reviewed by Aygul Dovletova · Last reviewed
How to Use the Font Pair Suggester
- Pick a category - Modern, Classic, Playful, Elegant, or Minimal. The category filter narrows the curated list to pairings that share an emotional register.
- Scan the preview cards. Each card renders an H1, an H2, and a paragraph in the actual fonts so you can judge x-height ratios and how the display face sits against its body counterpart.
- Click a card to expand the pairing into a larger live preview with long-form paragraph text, which is where most rendering problems become visible.
- Copy the CSS - the snippet includes the
<link>to the Google Fonts&display=swapstylesheet plus thefont-familydeclarations for headings and body. - Paste the link tag into your
<head>and apply thefont-familyrules to your heading and body selectors.
What Makes a Pairing Work
The curated list follows three typographic principles that long predate the web. First, contrast of classification: pair a humanist serif (Lora, Crimson Pro) with a geometric sans (Poppins, Montserrat) so the two faces disagree on structure rather than compete on it. Second, shared x-height ratio: when display and body are set at the same font-size, their lowercase heights should feel visually matched, which is why pairings like Playfair Display over Source Sans work but Playfair over Montserrat feels top-heavy (Playfair has a small x-height, Montserrat a large one). Third, vertical metrics compatibility: both fonts ship hhea and OS/2 tables that declare ascent, descent, and line gap; mismatched metrics cause visible line-height drift when you switch mid-paragraph. The suggester pre-screens these with the font-file metadata and only surfaces pairs whose ratios fall inside a tolerant range.
Where You Actually Use a Font Pair
- Marketing landing pages where a display serif sells the headline and a pragmatic sans carries the body copy.
- Editorial blogs that need reading stamina - a text-optimized serif for body and a distinctive sans for the site chrome.
- Portfolio sites, which benefit from one voice font (usually the display choice) that signals personality without fighting the work samples.
- Product documentation, where the display face handles nested section headings and the body face handles prose plus inline
codewhen paired with a monospace third. - Newsletters and email templates, where the pairing must also look sane in fallback stacks because many clients block web fonts.
Pitfalls in Real Projects
The first trap is cumulative layout shift. Two web fonts means two FOUT or FOIT transitions; unless you use font-display: swap plus size-adjust and ascent-override descriptors (CSS Fonts Level 4) to match fallback metrics, the page reflows twice. The second is non-Latin coverage: many display faces ship only Latin Extended; if your product supports Cyrillic, Arabic, or CJK, a pairing that works in English breaks the moment a user name switches scripts. The third is weight availability: if you reference a 300-weight body but request only 400 and 700 in the URL, you silently get synthetic bolds that look muddy - always include every weight in the &wght@ URL parameter. The fourth is license scope: bundling font files into a desktop or mobile app often requires foundry-specific clearance even for OFL fonts.
The Spec Layer: CSS Fonts Module Level 4
Modern font pairing lives inside CSS Fonts Module Level 4, which introduced three capabilities that the suggester relies on. Variable fonts (the @font-face font-weight: 100 900 range syntax) allow a single file to serve all weights of Inter or Poppins, cutting the network cost of a pair in half. Metric overrides (ascent-override, descent-override, line-gap-override, and size-adjust) let you trick the browser into laying out a system fallback font with the same metrics as the web font, eliminating the layout-shift flash during load. And font-feature-settings exposes OpenType features (ss01 stylistic sets, liga ligatures, tnum tabular numerals) that change how a given pair actually reads - Source Serif with cv11 enabled is arguably a different pairing partner than without it.
Comparison to Designer Tools and Figma
Figma\'s Design Tokens panel lets you preview any Google Font instantly but does not teach you which pairings fit together, so the usual Figma workflow is to decide the pair somewhere else and set it in Figma. Typewolf and Fonts In Use are authoritative inspiration libraries for real-world pairings but they do not hand you copyable CSS. Type.samples and Fontjoy are closer peers - Fontjoy uses an embedding model to propose visually different-yet-compatible faces but sometimes surfaces pairs that break at long-form reading. A human-curated list like this one is narrower but every pair is battle-tested; the tradeoff is you see fewer combinations. If your brand needs a commercial face (Söhne, Neue Haas Grotesk, Calibre), none of these free-Google-Fonts tools apply - go straight to the foundry.
Frequently Asked Questions
Why pair a serif with a sans instead of two sans faces?
Two sans faces often compete for the same typographic role because their skeletons are too similar, producing that "slightly off" feel where nothing is wrong but nothing is right either. Serif-plus-sans pairings force a hard structural contrast - one font has ornamental strokes, the other does not - which makes the hierarchy between heading and body instantly legible. Two-sans pairings absolutely can work, but they require one of the pair to be meaningfully different in width or weight (a condensed grotesque with a humanist sans, for example).
Does using two fonts hurt performance?
Only a little, if you are careful. Each variable font is typically 60-200KB gzipped; at two, you are still under the 500KB fonts budget most audits use. Self-hosting with <code>font-display: swap</code>, preloading WOFF2 files, and using <code>size-adjust</code> overrides brings the cost near zero.
What is the ideal x-height relationship between display and body?
At matched <code>font-size</code>, aim for the display face to have an x-height roughly 90-105% of the body's. Above about 110% the display starts shouting; below 85% it looks timid next to a bulky body. The ratio is measurable from the font's OS/2 table.
Can I customize the weights that get loaded?
Yes. The copy-CSS output includes a <code>&wght@</code> parameter listing the weights; add any weight in the font's available range separated by semicolons (e.g. <code>&wght@300;400;500;700;900</code>). Referencing a weight that is not listed in the URL forces Chrome and Firefox to synthesize a bold by algorithmically smearing the strokes, which looks noticeably worse than a real designed weight.
Are the fonts free for commercial use?
Every pair in the tool is shipped through Google Fonts under the Open Font License or Apache License 2.0, both of which permit commercial use, modification, and bundling. The only caveat is that some foundries (for example the Adobe-hosted Source family) ask for attribution in your licensing page. If you plan to embed the font in a native desktop or mobile application bundle, read the specific foundry's page - app-binary embedding sometimes needs a separate line in the license terms.
Why does my hero text shift on page load?
That is the classic FOUT: the browser paints fallback metrics first, then swaps in the web font and recalculates line heights. The fix is in CSS Fonts Level 4: declare an <code>@font-face</code> rule for a local fallback stack with <code>ascent-override</code>, <code>descent-override</code>, and <code>size-adjust</code> tuned so that the fallback and the web font lay out identically. Fonts like Inter publish official override values; for others, the tool Fontsource provides pre-computed pairs.
Do these pairings work in Figma and Sketch?
Yes, because Google Fonts ships every pair through its desktop Google Fonts Activation service and through Figma's built-in Google font picker. Type the exact font-family name and weight and the design file renders identically to the web output. One gotcha: variable-font axes other than weight (for example optical size or slant) are not always respected by older Sketch versions.
What happens to the design if a visitor has no network?
With <code>font-display: swap</code>, the browser renders your CSS fallback stack immediately and swaps in the web font when and if it arrives. If the visitor is fully offline and the font is not in the HTTP cache, they see the fallback indefinitely - which is why the <code>font-family</code> fallback chain matters. Always list a system alternative that is reasonably close in style (<code>"Poppins", system-ui, -apple-system, sans-serif</code>).
Does the tool track which pairing I picked?
No. The category filter, preview expansion, and copy button all run in the local Preact component state. The only network request the page makes on your behalf is the preview iframe's request to fonts.googleapis.com, which is the same request your production site will eventually make. Your choice does not get logged, aggregated, or sold.
Can I pair three fonts instead of two?
Yes, and for documentation-heavy products you often want to: one display, one body, one monospace for code. The third font almost always exists outside the pairing decision because monospace choice is driven by its own criteria (coding ligatures, unambiguous 0/O and 1/l/I forms). Keep the display-and-body pair tight and pick the mono independently.
Why do some pairs look off in Safari but fine in Chrome?
Safari's CoreText renderer applies slightly different hinting and subpixel positioning than Chrome's HarfBuzz and Firefox's DirectWrite. At body sizes below about 16px the same web font can look a hair heavier in Safari than in Chrome. The fix is not to hack per-browser CSS but to nudge the body font-size up by one step, since small body text is generally a bad idea for readability anyway.
More CSS & Design
Aspect Ratio Calculator
Calculate and visualize aspect ratios for any dimensions.
Open toolBlob Shape Generator
Generate organic blob shapes as SVG.
Open toolBorder Radius Generator
Create CSS border-radius with a visual corner editor.
Open toolCSS Box Shadow Generator
Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.
Open toolColor Palette Generator
Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).
Open toolColor Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool