Font Pairing Previewer
Choose a stack for headings and one for body text, set the size and spacing and read your own words in them. No font files are needed.
Try a pairing
Each stack lists fonts in order and the page uses the first one that is installed where it is viewed, so the preview shows what is installed on the computer you are using. The last name in every stack is a generic family that is always available.
About Font Pairing Previewer
Choosing fonts is easier when you can see two of them together, reading your own words. This previewer uses stacks of fonts that already come with most computers, so pages load without fetching any font files and never jump as a font arrives. Each stack ends with a generic family, so there is always a sensible fallback.
Pick a heading stack and a body stack, set the body size, line height and the scale between heading sizes, and type your own heading and paragraph. A set of ready pairings gets you started. The CSS gives you font-family, size and line height for the body, and rem sizes for the three heading levels.
How to use Font Pairing Previewer
- Choose a ready pairing or pick your own heading and body fonts.
- Set the heading weight, body size, line height and heading scale.
- Type your own heading and paragraph to see them in the pairing.
- Copy the CSS.
Common uses
- Choosing fonts for a fast site that loads no font files
- Comparing a serif heading with a sans-serif body
- Setting a readable body size and line height
- Producing a heading size ladder from one scale value
Frequently asked questions
Why do the fonts look different from one computer to another?
Each stack lists fonts in order, and the page uses the first one that is installed where it is viewed. A Windows computer and a Mac may therefore show different fonts for the same stack, though the style stays similar.
What makes a good pairing?
Contrast. A serif with a sans-serif, or a heavy display face with a plain one, tends to work. Two fonts that are almost the same look like a mistake.
What line height should body text have?
Between 1.5 and 1.7 suits most body text. Headings are tighter, around 1.1 to 1.25, because they are short and large.
Why are heading sizes in rem?
Rem sizes follow the visitor's own default text size, so a person who has made text larger in their settings gets larger headings too. The tool divides the pixel size by 16.