A study of our type.

01 Display

A page title is read once, from a distance, as a shape. Archivo is a grotesque with nineteenth-century bones, sturdy enough to carry a whole sentence at poster size without looking shouty.

Big type looks loose at its natural spacing, because the gaps grow along with the letters, so we pull the letters in by 4.5% of their size. Tightening letters tightens the spaces between words too, so we give the words a little back and they stay words.

On a phone the title drops by whole steps of the ladder, from 68 / 80 to 42 / 52, rather than shrinking smoothly. A size that shrank smoothly would spend its time between the rungs; whole steps keep every size on the ladder.

02 Section heading

This is the one size set off the ladder, and on purpose. It is measured against the lines of reading text instead: two lines of body text are 64px, and 40 is to 64 as 5 is to 8, the golden ratio in whole numbers.

A slightly lighter weight than the display keeps a heading from competing with the title above it. We measured its tightest common letter pair, and at −0.01em they still sit 0.015em apart, so no two letters touch.

03 Second and third headings

Each heading level is one step down the ladder from the last, so you can see which heading sits under which without a single size chosen by eye.

The space between their lines comes from the same rule as everything else on the page. Lines of large type sit closer together than lines of small type, so that the air between lines stays close to the same.

04 Reading

The Braille Institute commissioned Atkinson Hyperlegible for people with low vision, and drew it with a panel of readers who have it. Letters that are easily confused, such as a capital I, a lower-case l and the number 1, are drawn to look unmistakably different. The 2025 edition, Next, added weights and the monospaced companion we use for labels.

We set it a little lighter than the regular weight, at 350, because at 400 its strokes came out heavier than the fonts it replaced. We measured the gaps: 0.05em of extra letter spacing makes the gap between letters about a third of a letter’s width, the spacing the British Dyslexia Association recommends, and the space between words stays at least three and a half times that.

Twenty pixels on thirty-two is 5 : 8. Six hundred and twenty-four pixels of it holds about 65 characters, the middle of the range typographers have recommended for a comfortable line since long before screens.

A lead paragraph is set at exactly the same size and in the same full ink, rather than a size larger. There is one reading size on this site, so the eye never has to adjust between the introduction and the argument.

05 Interface

Text that you scan rather than read, such as buttons, form fields and short notes, uses the conventional 16px on 24, a line height of 1.5. Below reading size the golden rule would set lines too tight, so small text keeps this looser spacing.

Sixteen pixels is also the smallest size an iPhone accepts in a form field without zooming in when someone taps it, which can throw the whole page off to one side.

06 Pull quote

A pull quote is a sentence the page stands behind, so it is set as a statement: in the heading face, at a heading’s size and measure, between two hairlines. Nothing marks it in the margin, and nothing is set in italic.

07 Apparatus

Think of the signs in a library: the shelf numbers aren’t the books, but they help you find them. On this site, anything that names or measures the content, rather than being the content, is set in the monospaced face, small, in capitals and spaced out. We call it apparatus: section numbers, dates, labels, sources and captions.

A monospaced face is already evenly spaced, so it needs much less extra spacing than capitals in a proportional face would. Past about 0.14em, words stop reading as words.

Because apparatus is always set this way, a reader learns within a page or two to skim past it, or to look straight for it, the way you stop noticing shelf numbers until you need one.