Font pairing previewer

Why pair fonts at all

Type does two jobs on a website. Headings have to grab attention and set a tone in a second; body text has to disappear so people can read for minutes without effort. One typeface can do both, and a single family with a strong bold is a perfectly good choice. But most memorable sites split the jobs: a display face with personality for headlines, and a workhorse for everything else. Font pairing (or “font combinations”, if that is what you searched for) is the craft of choosing those two so they feel like one voice.

The principle: contrast in one thing, harmony in the rest

Good pairs differ clearly in one dimension, usually classification or weight, and agree on the others. A high-contrast serif such as Playfair Display over a neutral sans like Source Sans 3 works because the difference is obvious and intentional. Two geometric sans-serifs that are nearly identical do not: the eye notices that something changed but cannot tell why, and it reads as a mistake.

• Match the x-height. The height of lowercase letters drives how big a font looks. If the heading face has a tall x-height and the body a short one, the page feels mismatched even when the point sizes are sensible.
• Share a mood or an era. A 1920s geometric sans and a Renaissance serif can work, but only if the brand is meant to feel classic and modern at once. When in doubt, pick fonts from the same world: tech with tech, editorial with editorial.
• Use a superfamily for a safe win. IBM Plex, Red Hat and Geist ship sans, serif or mono cuts drawn on the same skeleton. They pair by construction.
• Let the heading do the talking. Expressive fonts (Syne, Bricolage Grotesque, Bodoni Moda) belong at 32px and up. Below that, their quirks turn into noise.

A quick reference

How I test a pairing

Never judge fonts from a specimen sheet of the alphabet. Set real copy at real sizes, which is why the preview is a landing page rather than a pangram. My checklist:

• Body text at 16–18px with a line-height of 1.5–1.7 and lines no longer than about 75 characters. If it looks grey or cramped, the pair fails regardless of how good the headline looks.
• Headline at its real maximum size, then at mobile size. Some display faces only work big.
• Dark mode. Light text on dark backgrounds looks bolder and blurs thin strokes, so hairline serifs often need a heavier weight there.
• Numbers, punctuation and buttons. A beautiful serif with awkward figures will hurt a pricing table.

Once a pair passes, build the size steps with the fluid type scale generator and check text colours with the colour contrast checker. The typography glossary entry covers the vocabulary.

Loading fonts without slowing the page

Every weight is a separate file, typically a few tens of kilobytes for a Latin subset in WOFF2. Load only what you use: the snippets this tool generates request the one heading weight you picked plus regular and bold for the body. Variable fonts, which most of these families are, put every weight in a single file and are the better choice when you need three or more weights.

Keep display=swap so text shows immediately in a fallback, add the two preconnect hints if you link to Google, and prefer self-hosting. In Next.js, next/font/google does it for you at build time: no runtime request to Google, a metric-matched fallback to cut layout shift, and nothing for European privacy rules to object to.

Common mistakes

• Three or four families on one page. It reads as indecision, and each one costs load time.
• Script or display fonts used for body text or buttons.
• Loading nine weights “just in case” and using two.
• Letter-spacing body text. Tighten big headings slightly (about −0.01 to −0.03em) and leave body alone.

Type is the quickest way to make a brand feel considered. If you want it chosen and set properly across a whole identity, that is part of my branding work.