Skip to content
Living Pagebrand
Chapter 04

Three
families

Bricolage Grotesque sets headings, Geist sets everything else, Geist Mono carries code, tokens and URLs. Type into the field and watch all three respond.

Publish a document people finish

Bricolage Grotesque 300 — display light

Publish a document people finish

Geist 400 — body

Publish a document people finish

Geist Mono 400 — code

Publish a document people finish

Fig. 2 — anatomy

Where the lines fall

Bricolage Grotesque, 1000 units per em. A tall x-height is why it holds up at display size and why it collapses below 16px.

Apgascender · 0.96 emcap height · 0.74 emx-height · 0.52 embaseline · 0descender · −0.26 em740520tracking −0.05 emBricolage Grotesque · 800 · opsz 96

The scale

h1 · display 32/600 · -0.02em
Publish a document people finish
h2 · display 24/600
Pages that turn
h3 · display 18/500
Reader settings
body · sans 14/1.5
Upload a PDF and it becomes a reader on your own domain, indexed or private, with analytics on every page turn.
small · sans 12 · muted
Last published 3 days ago by Richard
mono · 11
read.acme.com/annual-report-2026
The rule people ask about

Never set a headline in full caps.

Sentence case, always — headlines, buttons, nav, labels. Capitals shout, and we don’t. Bricolage Grotesque was chosen for its lowercase; capitals flatten it into any other grotesque.

The only exception is an initialism that is already caps — PDF, URL, UK — and two-letter mono labels that aren’t words.

Do

  • Set display type tight and large — confident, not shouty.
  • Keep body copy at 1.5–1.65 line height and under 65 characters.
  • Use mono for anything a developer would copy: tokens, URLs, slugs.
  • Leave white space. A headline needs room to land.

Don’t

  • Set headlines in full caps, or Title Case Every Word.
  • Set Bricolage below 16px — it loses its character.
  • Mix in a fourth family. Newsreader exists for one payments page and nothing else.
  • Letterspace body copy.
Next — 05Motion