Brand Extractors·4 min read

How to Pair Fonts for a Website: Heading, Body, Accent

Most websites need two fonts, and choosing them is harder than it sounds. Two similar sans serifs look like a mistake, two loud display faces fight, and a beautiful heading font can make body text tiring to read. The Font Pairing Generator shortcuts the trial and error: it suggests heading, subheading and body fonts from Google Fonts, lets you lock the ones you like and shuffle the rest, and previews them on real layouts. This guide explains how to use that loop well.

Open the free Font Pairing Generator All insights

Give each font a job

Heading, body, accent.

The heading font carries personality. It appears large and briefly, so it can be a high-contrast serif, a geometric sans or a display face. The body font carries reading: it has to stay calm at 16 to 18 px over long paragraphs, which is why the generator only picks body fonts from families known to read well small.

The subheading slot sits in between. Often it reuses the body font in a heavier weight and uppercase with some letter spacing, or it borrows the heading font at a lighter weight. At high contrast the generator sometimes picks a monospace face for it, which suits technical and editorial brands.

Contrast without conflict

The slider does the thinking.

Pairs work when the fonts differ clearly on one axis and agree on the rest. A serif heading over a sans serif body is the classic version: different structure, similar proportions. Two fonts that are almost alike look like an accident.

The Contrast slider encodes that idea. Low keeps heading and body in the same category or style, for a quiet, unified look. High pushes them into different categories, such as a display or serif heading over a sans body. Medium mixes both. Some suggestions come from a list of 40 tested pairings, such as Playfair Display with Source Sans 3, and the rest are built from each font's category and style tags.

Lock what you have, shuffle the rest

Most projects start with one font.

Brand guidelines often fix one typeface and leave the partner open. Pick that font in the heading or body list, click its lock, and press the space bar: every suggestion now pairs with your font. The arrows next to the counter step back through up to 50 earlier pairings, so a good one you skipped is never lost.

If you start from a live website, run it through the Website Font Detector first. Its pairing ideas link straight into the generator with the site's heading and body fonts loaded and locked.

Test on real layouts

Pangrams hide problems.

Switch between Article, Landing page and Cards, and open Edit the sample text to paste your own headline and a real paragraph. Long words, numbers and brand names show spacing problems that the quick brown fox never does. Tick Dark background, since thin weights that look elegant on white can break up on dark.

Adjust sizes and letter spacing per slot while you look. Uppercase subheadings nearly always need extra spacing, and very bold headings often look better slightly tighter. The weight lists only show weights each family actually has.

From pairing to production code

Copy, paste, ship.

The HTML link tab gives the preconnect and stylesheet tags for Google Fonts with exactly the weights you use, plus bold for body text. The CSS tab starts with the same import and sets font-family, weight, size and line height for headings, a .subheading class and body text. The Tailwind tab gives fontFamily entries named heading, subheading and body.

Load only the weights you need, since every extra weight is another file to download. The Share tab's link reopens the same pairing, which is handy for sign-off, and Save keeps favourites on this device.

A worked pairing for a small studio site

One locked font, three rounds.

An architecture studio already uses Inter in its app and wants a website that feels more editorial. Choose Inter in the Body list and lock it, set Contrast to High, and press the space bar. The first rounds suggest Playfair Display, Fraunces and Cormorant Garamond as headings. Playfair looks too fashion-led for the brand and Cormorant too thin at small heading sizes, so keep going until Newsreader appears, then lock it too.

The subheading slot has picked IBM Plex Mono, which suits drawings and project numbers. Set it to 500, uppercase, with 0.08 em spacing. Paste a real project description into the sample text, switch to Cards and then Dark background, and check that the headings still read. Save the pairing, send the share link to the team for a quick vote, and paste the HTML link and CSS into the site once everyone has approved it.

Mistakes that make pairings fail

A few habits cause most bad pairings.

Using a display or script font for body text because it looked good in the heading.
Pairing two fonts from the same category that are only slightly different.
Loading six weights of each family and slowing every page for one bold word.
Judging a pair only in light mode, or only at heading sizes.
Ignoring language support: check that both families cover the characters your content needs.

Try it now

Open Font Pairing Generator

The tool is one click away. No sign up, no upload, no payment.

Open Font Pairing Generator

Write a review