How to test a font pairing
Set one font for the heading and another for the body, then read both in Combined preview. The two roles have their own Font, Size, Weight, Line height, and Sample text controls. Heading font on its own and Body font on its own show each choice separately, while Copy CSS for this pairing copies the current rules.
- Choose a heading font and a body font from the Font menus. The options sit under Sans-serif, Serif, Display, Monospace, and System.
- Set the heading's Size, Weight, and Line height, then set those controls in the Body font section. Each role keeps its own values.
- Replace the text in either Sample text field. The heading field accepts 120 characters, and the body field accepts 600 characters.
- Read Combined preview, then check Heading font on its own and Body font on its own.
- Select Swap heading & body fonts to exchange the selected font names. Select Copy CSS for this pairing to copy the generated rules.
What font pairing controls change
Heading controls update the heading in Combined preview and the heading specimen. Body controls update the body paragraphs and the body specimen. Changing one role does not replace the other role's settings.
Sample text
Heading: Design that speaks clearly
Body: Good typography is invisible when it works.
Combined preview
Design that speaks clearly
Good typography is invisible when it works.The first line appears as the heading, and the second line appears below it as body text. In the body field, each non-empty line separated by a line break becomes its own paragraph in Combined preview.
Font pairing tester sizes and weights
The heading Size control accepts 14px to 96px. The body Size control accepts 12px to 28px. Heading Line height accepts 0.90 to 2.00, and body Line height accepts 1.00 to 2.20.
The Weight menu uses the values configured for the selected font. A display font can have one choice, while another font can have several. The catalog does not include a font upload control or a field for entering an unlisted family.
How to copy CSS for a font pairing
Copy CSS for this pairing creates rules for h1, h2, h3, body, and p. The copied text includes the selected font stacks, sizes, weights, and line heights. If clipboard access is unavailable, the interface shows Copy failed.
The page renders Sample text in the browser as you type and does not send it in a network request. Each font uses its configured stack and fallback family. System choices use their listed system stacks.
Where font pairing testing comes up
- Paste a headline and supporting copy into the two Sample text fields, then inspect them together in Combined preview.
- Change the heading and body controls separately to check how size, weight, and Line height alter each role.
- Compare the same body text with several heading choices, then copy the CSS for the selected pair.
When to use Font Pairing Tester
The Font Compare Tools category compares a heading font and a body font side by side. Choose Font Pairing Tester when you need both roles in one Combined preview, separate controls, isolated specimens, and a CSS copy action.
Frequently asked questions
How do I test a font pairing with my own text?
Enter your words in the heading and body Sample text fields, then adjust each role's Font, Size, Weight, and Line height. The heading field accepts 120 characters, and the body field accepts 600.
Can I compare the same font as heading and body?
Yes. Select the same family in both Font menus, then set independent sizes, weights, line heights, and sample text for the two roles.
Why does a font have fewer Weight options?
A font's Weight menu contains only the values configured for that family. The available choices can therefore differ between the selected heading and body fonts.
How do I copy CSS for a font pairing?
Select Copy CSS for this pairing to place the current heading and body rules on the clipboard. Copy failed appears when clipboard access is unavailable.