フォントペアリングツール

What font pairing is and why it matters

Font pairing is the craft of choosing two typefaces — usually one for headings and one for body text — that work together rather than fight. Good pairing is almost invisible: the page simply reads well and feels coherent. Bad pairing is jarring, like two people talking over each other. This tool lets you preview heading-and-body combinations live with your own text, gives you 22 hand-picked pairings to start from, lets you mix any two of roughly 40 Google Fonts yourself, and hands you the exact CSS to use the result on your own site.

The principle behind a good pair: contrast with harmony

The reliable rule professional designers lean on is contrast without conflict. You want the two fonts to be clearly different so the heading stands apart from the body, but to share an underlying sensibility — similar proportions, era, or mood — so they still feel like one design. The most dependable way to get safe contrast is to pair a serif with a sans-serif: the little feet on serif letters and the clean lines of sans-serifs read as obviously distinct, while both can share a calm, readable tone. Many of the curated pairings here do exactly that — a characterful display serif for headlines over a plain, highly legible sans for paragraphs.

How the curated pairings are organised

Each of the 22 presets carries a short "vibe" label so you can match a pairing to the feeling you want, not just the letterforms:

Notice the last one: pairing a font with itself is a legitimate strategy. A single versatile family used at different weights and sizes (bold large heading, regular small body) is the safest pairing of all, because harmony is guaranteed — you create contrast through weight and scale instead of through two designs.

A worked example

Pick "Playfair Display + Source Sans Pro." The tool loads both fonts from Google Fonts on demand and renders your sample heading in Playfair Display — a high-contrast serif with dramatic thick-and-thin strokes that signals sophistication — over body text in Source Sans Pro, a quiet, neutral sans that disappears so the words come through. Replace the preview text with your own headline and a paragraph of real copy, bump the size selector to Large, and you can judge the pair against the actual words you will publish, not "lorem ipsum." Then read the generated CSS at the bottom: it includes the @import lines for both fonts and the font-family rules for headings and body, ready to copy.

The CSS you get

The snippet is production-ready and looks like this in shape:

• an @import url(...) for each Google Font (a single import when you pair a font with itself);
• h1, h2, h3 { font-family: 'Heading Font', serif; }
• body, p { font-family: 'Body Font', sans-serif; }

The Copy CSS button puts it on your clipboard. For better performance on a real site, consider moving the @import to a <link> tag in your HTML head and adding a fallback font, but the snippet is a correct, working starting point.

Practical tips

• Preview with your real content. A pairing that looks great on "The quick brown fox" can fall apart on a long, comma-heavy sentence. Paste a true paragraph before deciding.
• Limit yourself to two families. Three or more typefaces almost always looks chaotic. Use weight, size, and colour for further variation instead of adding fonts.
• Body legibility beats heading flair. Choose the body font first — it carries 95% of your words — then pick a heading that complements it. A gorgeous display font over an unreadable body is a bad trade.
• Match the vibe to the message. "Bold advertising" suits a landing page; "Elegant editorial" suits a magazine or wedding site. The label is there to steer you.

Common mistakes

• Pairing two fonts that are too similar. Two different sans-serifs of comparable weight often look like a mistake rather than a choice — the eye senses something is off without knowing why. Go for clear contrast or use one family throughout.
• Forgetting load performance. Every font and weight you import is a download. The curated pairs here keep to two families and the common 400/700 weights for a reason; loading a dozen fonts slows your page.
• Ignoring fallbacks. If a Google Font fails to load, the browser falls back to the generic family in your CSS. Keep the serif/sans-serif keyword at the end of each rule so text stays readable regardless.

The previews pull fonts directly from Google Fonts, so an internet connection is needed to display them; the CSS the tool generates is yours to use anywhere.