135 · Design & Web

Font Pairing Previewer

Choose a heading font and a body font to see how they work together, with your own text.

How to use the font pairing previewer

  1. Pick a heading font and a body font.
  2. Adjust the sizes and type your own text.
  3. Copy the CSS.

Why system fonts

These fonts are already on most computers and phones, so they load instantly and cost nothing. Each comes with fallbacks: if a device doesn’t have the first choice, the next similar font is used. A classic pairing is a serif heading, like Georgia, with a clean sans-serif body.

Examples

Georgia + System UI

Classic, readable

Impact + Verdana

Bold headline, wide body text

Questions

Why does a font look different on my phone?

Some fonts aren’t installed everywhere, so a fallback is used. The CSS lists good fallbacks for each choice.