Font Pairing Assistant

How to use it

1. Pick a heading font and a body font. Search by name or filter by Serif, Sans-serif, Display, Handwriting or Monospace, or apply one of the recommended combinations.
2. Choose weights (only the weights each family actually offers are listed), then set the heading and body sizes, line heights and the heading's letter spacing.
3. Edit the sample heading, subheading, paragraph and button label, and check the preview at desktop (1024 px) and mobile (375 px) widths on a light or dark background.
4. Press Favourite to keep a pairing in this browser, or sign in and use Save project to keep it in your account.
5. Copy the HTML link tags and the CSS (or the Tailwind v4 / v3 snippet) into your site, and check the licence links for each font.

How the fonts, code and recommendations work

• The catalogue was checked against Google's own data on 11 October 2026: family names, categories, weights, italics and variable axes from fonts.google.com, and licences from the google/fonts repository (ofl = SIL Open Font License 1.1, apache = Apache License 2.0, ufl = Ubuntu Font Licence 1.0).
• The Google Fonts link requests only the families and weights you chose, in the CSS2 API format (for example family=Inter:wght@400;700, or ital,wght@0,400;1,400 when the italic is included), with display=swap so text stays visible while fonts load.
• The CSS uses custom properties with system-font fallbacks for each category, sizes in rem (with the pixel value noted) and a smaller h1 size on screens up to 640 px wide: 70% of the desktop size, but never below 1.4 times the body size.
• The subheading is about 45% of the heading size (at least 2 px larger than body text). Bold text and buttons use the bold weight you choose; it is never lighter than the body weight.
• Recommendations are editorial: each explains the contrast or shared design history behind it (for example, Source Serif 4 was designed to complement Source Sans 3). They're starting points, not rules.
• Previews load fonts from Google Fonts only for the fonts you're looking at. The tool confirms each font has loaded and tells you if it couldn't, in which case a fallback font is shown.