Design Tools

Font Pairs

About the project

Font Pairs is a tool for matching typefaces: heading + body. Pairs are built on typographic rules (font categories, superfamilies, weight hierarchy, readability) — not AI — so every pair can explain why it works.

You can generate a pair, lock one font and find the second, adjust contrast, filter by mood and script support (for example, Cyrillic), preview the pair live, and copy ready-to-use CSS.

How to use it

Generate — create a new pair using the current settings.

H / B — the current heading and body fonts. Click the name to pick a font manually. The lock next to it freezes that role so the next generation won’t change it.

Harmony ↔ Contrast — how close or bold the pair feels: closer to Harmony for a calmer match, closer to Contrast for stronger visual tension.

Script — filter by writing system (Latin, Cyrillic, etc.). Any script means no restriction.

Mood — the feel of the pair (Modern, Elegant, Friendly, and more). Click again to clear the filter.

Why? — why this pair works: which rules applied.

Export — copy CSS variables, an HTML , or JSON tokens.

Form — also preview how the pair looks in form UI.

In Live preview, click the heading, subheading, or paragraph to edit the text and see the pair on your own content.