About the Font Pairing Tool
This font pairing tool previews Google Font combinations for headings and body text side by side, with real paragraphs, headings and buttons rendered in the chosen fonts. Start from fifteen curated pairings — editorial, tech, luxury, literary and more — or switch to custom mode and combine any of 45 popular Google Fonts. Each pairing comes with the exact <link> embed code, an @import line and ready-to-paste CSS including fallback font stacks and a modular heading scale.
It is aimed at designers and developers choosing typography for a website, landing page, blog or slide deck, and at anyone who wants a combination that looks intentional without trying dozens of fonts by hand. The heading sizes follow a modular type scale from your chosen base size and ratio, so the hierarchy is consistent from H3 to H1.
Font files are loaded from Google Fonts only for the live preview. The generated URL requests just the weights used (bold for headings, regular and bold for body text) to keep page weight low; single-weight display faces such as Bebas Neue are requested without a weight axis.
How to use the font pairing tool
- 1Pick a curated pairing that matches the mood of your project.
- 2Or choose "Custom" and select any heading and body fonts.
- 3Set your body text size and heading scale ratio.
- 4Judge the live preview — headings, paragraphs and buttons.
- 5Copy the embed link (or @import) and the CSS rules into your site.
Formula and method
Heading sizes follow a modular type scale: each level is the previous one multiplied by the ratio r, starting from your body size. With a 16 px base and the major-third ratio 1.25, H3 is 16 × 1.25² = 25 px, H2 is 31.3 px and H1 is 39.1 px. Sizes are rounded to one decimal and also given in rem (px ÷ 16).
The embed URL uses the Google Fonts CSS2 API: each family is listed with only the weights the CSS uses (700 for headings, 400 and 700 for body text), plus display=swap so text stays visible while fonts load. The "contrast type" compares the two fonts’ classifications — a serif with a sans-serif is the most reliable kind of pairing.
- base
- Body text size in px
- r
- Scale ratio (1.2, 1.25, 1.333 or 1.618)
Worked examples
Playfair Display + Source Sans 3 at 16 px, major third
The URL asks for Playfair Display Bold only and Source Sans 3 Regular and Bold. Headings scale by 1.25: 16 × 1.25² = 25 px, × 1.25³ = 31.25 → 31.3 px and × 1.25⁴ = 39.06 → 39.1 px.
Bebas Neue + Karla poster pairing, golden ratio
Bebas Neue only exists in one weight, so it is requested without a weight axis. The golden ratio makes a dramatic hierarchy: 16 × 1.618² = 41.9 px for H3 and 16 × 1.618⁴ = 109.7 px for H1.
Custom: Inter for everything at 18 px, minor third
One family means one request with both weights. At 18 px and ratio 1.2: H2 = 18 × 1.2³ = 31.1 px and H1 = 18 × 1.2⁴ = 37.3 px.
Frequently asked questions
What makes a good font pairing?+
Contrast with harmony: fonts that are clearly different in classification (serif vs sans-serif) or weight, but share similar proportions such as x-height. Limit yourself to two families, and give one a clear job — headings — and the other body text.
How many fonts should a website use?+
Two is the usual maximum: one for headings and one for body text. A single versatile family with several weights also works well and loads faster. Each extra family and weight adds a download and can slow down your page.
Are Google Fonts free for commercial use?+
Yes. All fonts in the Google Fonts library are released under open licenses, mostly the SIL Open Font License, which allows free use in commercial websites, apps and print. You can also download and self-host them.
Should I self-host Google Fonts?+
Self-hosting avoids a third-party request and can help with privacy rules such as GDPR in the EU. Download the families from Google Fonts, serve the WOFF2 files from your own domain and use @font-face with the same CSS family names.
What does display=swap do?+
It tells the browser to show text immediately in a fallback font and swap to the web font once it loads. That avoids invisible text during loading and improves perceived speed; the fallback stacks in the CSS keep the layout similar.