Typography pairing guide

Overview

Typography pairing sets one heading font beside one body font in real layouts, so you judge the pair on a page.

A serif heading, What the garden needs, over three dark cards titled Water, Shade and Soil, each with a line of sans text
DM Serif Display and DM Sans in the Cards layout, dark theme, with larger headings and body text.

Most pages use two fonts: a heading font for titles and a body font for reading. Choosing the two together is type pairing.

A good pair shows typographic contrast: the heading and the body look clearly different, in style, weight or size, so each role is plain at a glance.

The two should still agree in their proportions. The X-height, the height of a lowercase x, matters most: a font with a tall x-height reads larger at the same size, so a mismatch makes one font look too big or too small beside the other.

A list of font names cannot show this. A layout preview can: the tool sets each pair in a hero, an article, cards and a dashboard, on a dark or light ground.

Open Typography pairing Start here

In this guide

  1. StartWhat you need and your first pairing.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pairings and the settings behind them.
  4. Keep your workWhat the CSS holds, and hosting the fonts yourself.
  5. HelpWhat to do when something goes wrong.

Five pairs, ten faces: Playfair Display with Source Sans 3, Space Grotesk with Inter, Fraunces with Work Sans, DM Serif Display with DM Sans, and Bebas Neue with Lato. All ten are open-license fonts served from this site, one weight each.

The preview is ordinary text on the page; it needs no WebGL. Nothing you do is uploaded.