Font Pairing Previewer

Q: Which characters are included?

The preview loads the latin subset English, French and most Western European languages, with accents, œ, « » and the euro sign and, when the font has them and your text needs them, the latin ext Central European letters such as č, ł, ő, ț , Cyrillic and Greek subsets. Fonts without a subset show those letters in the fallback font: Lato, Work Sans or Space Grotesk have no Cyrillic, and only Inter, Roboto, Open Sans, Source Serif 4 and Fira Code have Greek. None of the 20 fonts has Arabic letters. On Polish, Czech, Greek, Bulgarian, Ukrainian and similar pages, the install box also lists the import lines of the subset your language needs.

Preview font pairings for headings and body text with 20 open-license fonts, adjust size and line height, and copy the CSS font-family stacks.

Suggested pairs

Heading font Body font

Heading size Body size Line height Heading weight Dark background

Heading text Body text

Preview

CSS code

Self-hosting with Fontsource

Install the npm packages and import only the weights you use. The fonts are then served from your own site, without a font CDN.

How to use the font pairing previewer

Start with one of the Suggested pairs (Editorial, Modern blog, Landing page, News, Elegant, Tech magazine, Book, Classic, Documentation, Playful). Each button shows the heading font and the body font it applies.
Or choose your own Heading font and Body font. The lists are grouped into sans-serif, serif, display, monospace and handwriting fonts. Swap fonts exchanges the two.
Adjust the Heading size, the Body size and the Line height, and pick the Heading weight (Bold (700) or Regular (400)). Tick Dark background to check the pair in dark mode.
Replace the Heading text and Body text with your own words: a real title and a real paragraph tell you much more than a pangram. Leave an empty line between paragraphs.
Copy the CSS code, then follow Self-hosting with Fontsource to add the fonts to your project.

The fonts load the first time you pick them (about 12 to 50 KB per weight). They are served from this site, never from a font CDN.

What makes a good font pairing

Contrast, not conflict. The classic recipe is a serif for one role and a sans-serif for the other: Playfair Display over Lato, or Montserrat over Merriweather. Two fonts that are similar but not identical (two geometric sans-serifs, say) often look like a mistake.
A calm body font. The body text is where people spend their time. Choose a font with open letter shapes and a generous x-height (Inter, Lato, Open Sans, Source Serif 4, Merriweather) and keep display fonts such as Playfair Display, DM Serif Display, Oswald or Caveat for short headings.
Matching proportions. Fonts with similar x-heights sit well together on the same line and in the same column.
Two fonts are enough. Create hierarchy with size, weight and spacing instead of a third typeface.

For readable body text, 16 to 20 px with a line height between 1.4 and 1.7 is a good starting range, with about 60 to 75 characters per line. Headings usually need a tighter line height (1.1 to 1.3), which the CSS code sets for you.

The CSS code

The code declares two custom properties, --font-heading and --font-body, each with a fallback stack: if the web font has not loaded yet, the browser shows a similar system font (Georgia for serifs, the system UI font for sans-serifs). Sizes are written in rem (16 px = 1rem), so they follow the reader’s browser font-size setting.

Self-hosting and licenses

All 20 fonts come from Fontsource, which packages open-source fonts for npm. The install box gives the npm install command and the import lines for the latin subset and only the weights you use; your bundler then copies the woff2 files into your build. Serving fonts from your own domain is faster (no extra connection), works offline and avoids sending your visitors’ IP addresses to a third-party font service, a known GDPR issue in the EU.

Every font here is under the SIL Open Font License 1.1, according to its package metadata: you may use it on websites, in apps and in print, commercially or not, and embed it. You may not sell the font files on their own. If you modify a font, it must keep the OFL and must not use the original reserved name. The license file is included in each package.

Frequently asked questions

Does this tool use Google Fonts?

No. Many of these families are also available on Google Fonts, but here the files come from the Fontsource npm packages and are served by this site. No request goes to Google or to any other font CDN.

Why do some headings not get bolder?

DM Serif Display only exists in a regular weight. The tool then shows it at 400, says so under the controls, and the CSS code uses 400.

Can I pair two serif or two sans-serif fonts?

Yes, if they differ clearly in role and weight, for example a bold condensed heading with a light, open body font. The tool shows a note when both fonts share the same style, because a serif and sans-serif contrast is easier to get right.

Which characters are included?

The preview loads the latin subset (English, French and most Western European languages, with accents, œ, « » and the euro sign) and, when the font has them and your text needs them, the latin-ext (Central European letters such as č, ł, ő, ț), Cyrillic and Greek subsets. Fonts without a subset show those letters in the fallback font: Lato, Work Sans or Space Grotesk have no Cyrillic, and only Inter, Roboto, Open Sans, Source Serif 4 and Fira Code have Greek. None of the 20 fonts has Arabic letters. On Polish, Czech, Greek, Bulgarian, Ukrainian (and similar) pages, the install box also lists the import lines of the subset your language needs.

Can I use these fonts in a commercial project?

Yes. The SIL Open Font License allows commercial use without payment or attribution in your design. Only reselling the font files by themselves is not allowed.