Typography pairing guide

Every control

Every control in the panel, top to bottom. Every change redraws the preview at once.

Copy CSSButton: Copies the CSS shown above it to the clipboard. The box updates as you change the pair and the line height. See font stack.

The line under the pairs names the heading font and the body font of the chosen pair, each with its weight.

Playfair + Source Sans · Space Grotesk + Inter · Fraunces + Work Sans · DM Serif + DM Sans · Bebas Neue + LatoPick one: The pair of fonts, heading first.

Playfair + Source Sans: Playfair Display 700, a high-contrast serif, over Source Sans 3 400.

Space Grotesk + Inter: Space Grotesk 700 over Inter 400: two sans faces, the heading the more distinctive.

Fraunces + Work Sans: Fraunces 700, a soft serif, over Work Sans 400.

DM Serif + DM Sans: DM Serif Display 400, a display typeface, over DM Sans 400; both carry the DM name.

Bebas Neue + Lato: Bebas Neue 400, a tall all-capitals display typeface, over Lato 400, a humanist sans.

Hero · Article · Cards · DashboardPick one: The kind of page the pair is set in. Changing it scrolls the preview back to the top.

Hero: A centred title at Heading size, a subtitle in the heading font, and two short paragraphs.

Article: A title, a smaller subheading, paragraphs, a quote at a little over Body size, and a small caption.

Cards: A heading over three cards, each with a small title and one line of body text. On a narrow screen the cards stack.

Dashboard: A title, a line of body text, three large numbers in the heading font with small labels, and a short task below.

The two sizes change the preview only. Line height is also written into the CSS; letter spacing is not.

Heading sizeSlider · 24 to 72 · starts at 42: The size of the main title, in pixels. Subtitles and card titles scale with it. The big numbers in Dashboard stay the same size. See font size and type scale.
Body sizeSlider · 12 to 24 · starts at 16: The size of the body text, in pixels. Small captions and labels stay the same size.
Line heightSlider · 1.2 to 2.0 · starts at 1.6: The space between lines of body text, as a multiple of the body size. Headings keep their own tighter spacing. See line height and reading comfort.
Letter spacingSlider · -0.05 to 0.15 · starts at 0: Extra space between letters, in em, for headings and body alike. Below zero pulls letters closer, which suits big headings. See letter spacing and tight tracking.
Heading weightPick one · 700: The weight of the heading font. Each face here ships one weight, so this row shows only that one: 700 for the first three pairs, 400 for DM Serif Display and Bebas Neue. See font weight.
Body weightPick one · 400: The weight of the body font. Every body face here ships 400 only, so this row shows 400.

Dark · LightPick one: The ground behind the preview: Dark is near black with light text, Light is warm off-white with dark text. A font's weight reads differently on each. See dark and light.

The CSS for the pair you see, ready to copy with Copy CSS at the top of the panel.

Every control goes back to how the page opened.

ResetButton: Puts the pair, layout, sliders and theme back to how the page opened, and scrolls the preview to the top.