Font Pairing Preview
Test how a heading font and a body font look together, using your own copy rather than a generic pangram.
Design is how it works
A subheading carries the idea a little further, and shows how the two fonts sit together at an intermediate size.
This is body copy at the size people will actually read. Font pairings that look striking in a specimen often fall apart here, where the text runs long and the eye needs to move quickly along the line without snagging. Edit any of this text directly to try your own words.
Small print, captions and metadata — 13px.
Heading
Body
Generated CSS
These are system fonts, already installed on the visitor's device, so they render instantly and cost nothing to load. If you choose a font your visitors may not have, self-host it or load it from a font service and keep the fallbacks in the stack.
About the font pairing
Font pairings that look great in a specimen image often fall apart on a real page. This preview puts a heading, a subheading and a paragraph of your own text side by side so you can judge the combination at the sizes you will actually ship. Size, weight, line height and letter spacing are all adjustable, and the CSS font stack is generated as you go. Only fonts already installed on the visitor system are used, so nothing is downloaded and the preview appears instantly.
How to use the font pairing
- Pick a font for headings and a different font for body text.
- Replace the sample text with a real heading and paragraph from your project.
- Adjust size, weight, line height and letter spacing until it reads well.
- Copy the generated CSS and drop it into your stylesheet.