Typography pairing guide

Three looks

Each picture below was made by the tool. The table under each one is the whole recipe; everything not listed stays as the page opens.

A poster hero

A large all-capitals title, NOTES FROM THE HILL GARDEN, over sans paragraphs on a dark ground — Bebas Neue and Lato in the Hero layout, dark theme, with the heading at its largest.

Bebas Neue is a display typeface: tall capitals made for big sizes. At 72 pixels it fills the frame like a poster, and a little extra letter spacing keeps the capitals from crowding. Lato stays calm and readable beneath it.

Setting	Value
Pairing	Bebas Neue + Lato
Heading size	72
Letter spacing	0.02

Lower Letter spacing below zero to see the capitals pull together; the body text tightens with them.

A light article

A dark serif article title and subheading over paragraphs and a quote on an off-white ground — Fraunces and Work Sans in the Article layout, light theme, with larger body text and looser lines.

A bold serif heading over a plain sans body is a classic pair: the styles differ clearly, so the title and the reading text never compete. Larger body text and a line height of 1.8 make longer paragraphs easier to follow.

Setting	Value
Pairing	Fraunces + Work Sans
Layout	Article
Theme	Light
Heading size	48
Body size	18
Line height	1.8

Switch Theme to Dark with the same settings and compare how heavy the heading looks.

A light dashboard

A garden log with three large numbers, 412, 38 mm and 21 °C, and small labels on an off-white ground — Space Grotesk and Inter in the Dashboard layout, light theme.

Two sans faces can pair too, when the heading has more character. Space Grotesk's shapes make the numbers stand out, while Inter keeps the small labels plain. Here the typographic contrast comes from weight and size, not style.

Setting	Value
Pairing	Space Grotesk + Inter
Layout	Dashboard
Theme	Light
Heading size	52
Letter spacing	-0.02

The big numbers keep their size; Heading size changes only the title and the task heading here.