Font pairing preview
Pick a heading face and a body face, set the sizes, and see them together with your own words rather than placeholder text. Copy the CSS and the font link when you find a pairing that works.
Expressive serif headings with an open, neutral sans serif for longer reading. Adjust either face below. Suggested pairings reset sizes and spacing.
The default pairing is shown below. Fonts load when JavaScript is available.
Large sample / 48px heading + 18px body
Good type makes room for ideas.
A clear heading invites you in. Comfortable body text helps you stay, understand the details and decide what to do next.
Small sample / 24px heading + 14px body
Good type makes room for ideas.
A clear heading invites you in. Comfortable body text helps you stay, understand the details and decide what to do next.
Check the details: Il1 O0 · 0123456789 · £25.00 · café · & @ ? !
Use this pairing
Put the link tag in your HTML head and the CSS in your stylesheet. Apply the pairing-heading and pairing-body classes to your text. The code uses the large sample settings and requests only your selected families and weights.
This tool runs entirely in your browser. Your files are never uploaded to us or to anyone else.