Where do the font pairings come from?

They are a hand-curated set focused on the free Google Fonts library. The list lives in lib/data/fontPairings.ts and is committed to the repo.

Why is the tool restricted to Google Fonts?

Google Fonts is free, ubiquitous, and self-hostable. Limiting to that catalogue means every pairing the tool suggests is reachable for hobby projects and commercial sites alike.

Does the tool load the fonts to preview them?

No. It only returns the names so you can load them yourself in your stylesheet. That keeps the tool offline and INP-friendly.

How were the pairings chosen?

They follow the standard editorial pairing principles: contrast in form (serif + sans), or unity in family (sans + sans of the same designer), and they avoid weight clashes.

Can I propose new pairings?

Yes — the source list at lib/data/fontPairings.ts is a flat array. Edit it and PR your additions.

Font Pairing Tool

Curated heading and body Google Font pairings with usage notes for each combination.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this font pairing tool

Choose a pairing category in the dropdown: editorial (serif+sans), whitepaper (sans+serif), magazine (serif+serif), SaaS (sans+sans), brand (display+sans), or developer (mono+sans).
Press Show pairings to render the curated list.
Read each pairing — heading font, body font, and a short note on when to use it.
Copy the list as plain text for design specs or hand-off documents.
Reset to clear the filter and start again.

About this font pairing tool

The font pairing tool surfaces a hand-curated catalogue of heading + body combinations drawn from the free Google Fonts library. Pairings are grouped by usage category so you can filter for the situation you are in: editorial reading, SaaS marketing, developer brands, magazine layouts, and so on. Each pairing comes with a short note explaining why the heading and body fonts work together — for example, "high-contrast serif headlines over a neutral sans for long-form reading."

Worked example: filtering by SaaS / minimal returns suggestions like Poppins for headings + Inter for body ("rounded geometric headlines over a UI sans — most SaaS landing pages") and Manrope + Inter ("modern geometric sans with neutral body — product marketing"). Pasting those names into your stylesheet (via the Google Fonts <link> tag or a self-hosted file) gives you the same combination the curated note describes.

The pairings table is bundled in lib/data/fontPairings.ts. No network call is made — the tool just helps you pick names, then you load them in your own project.

FAQ

Where do the font pairings come from?: They are a hand-curated set focused on the free Google Fonts library. The list lives in lib/data/fontPairings.ts and is committed to the repo.
Why is the tool restricted to Google Fonts?: Google Fonts is free, ubiquitous, and self-hostable. Limiting to that catalogue means every pairing the tool suggests is reachable for hobby projects and commercial sites alike.
Does the tool load the fonts to preview them?: No. It only returns the names so you can load them yourself in your stylesheet. That keeps the tool offline and INP-friendly.
How were the pairings chosen?: They follow the standard editorial pairing principles: contrast in form (serif + sans), or unity in family (sans + sans of the same designer), and they avoid weight clashes.
Can I propose new pairings?: Yes — the source list at lib/data/fontPairings.ts is a flat array. Edit it and PR your additions.