What this tool shows
The Font Pairing Tester puts a heading font and a body font in one live preview. Each role has its own Font, Size, Weight, Line height, and Sample text controls. Separate specimen panels below the preview show the heading and body fonts on their own.
How to compare a font pairing
- Choose a heading font and a body font from the listed Sans-serif, Serif, Display, Monospace, and System groups. The catalog is fixed; there is no control for uploading or entering another font.
- Set Size, Weight, and Line height independently for each role. The heading and body use separate controls.
- Edit each Sample text field with the copy you want to test. The heading field accepts up to 120 characters, and the body field accepts up to 600 characters.
- Read the combined preview to judge the two fonts with your text. Then compare the isolated heading and body specimen panels to see what each font contributes on its own.
- Use Swap heading & body fonts to reverse the selected roles. The same font can be selected for both roles if you want to test its settings in both positions.
Control ranges and available weights
Size ranges from 14–96px for the heading and 12–28px for the body. Line height ranges from 0.90–2.00 for the heading and 1.00–2.20 for the body. The displayed line-height value is unitless, such as 1.60.
Each Weight menu is populated from the configured weights for the selected font. A font may therefore offer fewer weight options than another font.
What the copied CSS contains
Select Copy CSS for this pairing to copy rules for h1, h2, h3, body, and p. The rules include the selected font stacks, sizes, weights, and line heights. Copying uses the browser Clipboard API, so the interface can show Copy failed when clipboard access is unavailable.
Limitations and network notes
- The tool compares the fonts you choose; it does not suggest or generate pairings.
- Google-font choices use their configured font stacks with local fallback fonts. System choices use the listed system font stacks.
- The page also loads site-wide external resources. The inspected tool code does not document how those services handle interaction data.
Frequently asked questions
Does this tool suggest font pairings for me?
No. It's a comparison tool - you choose both fonts, and it shows you how they look together with adjustable size, weight, and line-height. It does not generate or recommend pairings.
How is this different from a single font previewer?
This tool shows a combined heading-and-body preview plus separate specimens for each role. You can also select the same font for both roles; it is not limited to two different font families.
Can I use my own sample text?
Yes. Both fields are editable. The heading sample is limited to 120 characters, and the body sample is limited to 600 characters.
Why are only some weights available for certain fonts?
The weight dropdown only lists the weights configured for the selected font family. Some fonts have several configured weights; others have only one.
Can I test any font or upload my own?
No. You can choose only from the configured fonts in the Sans-serif, Serif, Display, Monospace, and System groups.
What happens if CSS copying fails?
The button uses browser clipboard access. If that access is unavailable, the tool shows Copy failed instead of confirming the copy.