A study of our type.
Every piece of type on this website is set below as itself, at its real size, with the reason it is set that way. Three faces, one scale and one rule for the space between lines. Nothing was chosen by eye and left there.
I · The faces
Three faces, three jobs
Each face has one job, and no face does another’s. That alone settles most questions before anyone has to ask them.
- Archivo
- Titles and headings. A grotesque sans serif drawn by Héctor Gatti at the Argentine foundry Omnibus-Type and released in 2012. It has the weight and plainness of a poster, and it is free for anyone to use.
- Atkinson Hyperlegible Next
- Everything you read. Made by the Braille Institute for readers with low vision, with letters drawn so that none can be mistaken for another. We chose it because a typeface that works for people who struggle to read works well for everyone else, too.
- Atkinson Hyperlegible Mono
- Labels, numbers, dates and sources. The same family, monospaced, so the apparatus feels related to the reading text while looking clearly different from it.
II · The scale
One ladder of sizes
There are thirteen type sizes on this site, and no others. Each is about 1.27 times the one below it, the square root of the golden ratio, so every second step is the golden ratio itself.
That gives the ladder a useful property: from the reading size up, each size is very nearly the two sizes two steps below it added together. Sixteen and twenty-six make forty-two. Every size also has to sit on a grid of 4px units, with half-pixel steps for type, so the steps are close to the ratio rather than exact. The widest miss is 3.2%.
Sizes change in whole steps at five named screen widths, never smoothly. A size that grew continuously with the window would spend most of its life between the steps of the scale.
| Token | Size | Step | Leading | Rule | Used for |
|---|---|---|---|---|---|
--text-xs | 10px | — | 16px | own, 1.5 | On the ladder, kept in reserve |
--text-sm | 12.5px | ×1.250 | 20px | own, 1.5 | Labels, captions and sources |
--text-base | 16px | ×1.280 | 24px | own, 1.5 | Interface text: buttons, form fields, short notes |
--text-lg | 20px | ×1.250 | 32px | 32px ✓ | Reading: every paragraph of argument |
--text-xl | 26px | ×1.300 | 36px | 36px ✓ | Third-level headings |
--text-2xl | 32px | ×1.231 | 44px | 44px ✓ | Second-level headings |
--text-3xl | 42px | ×1.313 | 52px | 52px ✓ | Display titles on phones; homepage headlines |
--text-4xl | 52px | ×1.238 | 64px | 64px ✓ | On the ladder, kept in reserve |
--text-5xl | 68px | ×1.308 | 80px | 80px ✓ | Display titles from 640px |
--text-6xl | 84px | ×1.235 | 80px | 96px, set tighter | Homepage poster, phones |
--text-7xl | 108px | ×1.286 | 100px | 120px, set tighter | Homepage poster, 1024px |
--text-8xl | 136px | ×1.259 | 124px | 144px, set tighter | Homepage poster, 640px and 1280px |
--text-9xl | 172px | ×1.265 | 156px | 180px, set tighter | Homepage poster, 1440px |
III · The leading
One rule for the space between lines
A line of type is its size multiplied by φ raised to the power of twenty over the size, rounded to the 4px grid.
leading = size × φ20 / size
At our reading size, 20px, that is exactly φ, a line of 32px. As the type grows, the multiplier relaxes toward one, so headings sit closer together than body text. The point is the gap a reader actually sees: the air between one line and the next stays near 12px at every size (40 on 52, 52 on 64, 68 on 80) instead of swelling with the letters. A careful typesetter used to do this by hand.
On reading pages like this one there is a second rule, the reading rhythm. Every baseline on the page lands on one grid, a reading line apart, the way a book page is set. Each block keeps its own leading; the space between blocks grows, by never more than a line, until the next baseline lands. Show the lattice above to see the lines.
A computer checks the rule, and every other rule on this page, each time the site is built. If anyone sets a size that is off the ladder, or a leading the rule does not give, the build stops and says which line of which stylesheet is wrong.
IV · Every piece of type
Each setting, and its reason
Seven settings cover every word on this website. Each sample below is set with the site’s own styles, so what you see is the real thing.
Make good work.
.gc-display01 Display
- Face
- Archivo, weight 900
- Size and leading
- 68 / 80 from 640px; 42 / 52 below
- Letter spacing
- −0.045em
- Word spacing
- +0.08em
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 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 a whole step pair, from 68 / 80 to 42 / 52, rather than shrinking smoothly. A fluid size would land between the steps of the scale; a whole step keeps every size on it.
A line cut in two
.gc-h102 Section heading
- Face
- Archivo, weight 800
- Size and leading
- 40 / 52
- Letter spacing
- −0.01em
This is the one size set off the ladder, and on purpose. It is sized against the reading line 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.
Equal columns are right for equal things
.gc-h303 Second and third headings
- Face
- Archivo, weight 800
- Second level
- 32 / 44
- Third level
- 26 / 36
Each heading level is one step of the scale below the last, so the hierarchy is visible without a single size chosen by eye.
Their leading 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.
Look at the middle of a sunflower. Each new seed grows a fixed turn around from the last, about 137.5 degrees, so the seeds never line up behind one another, and the head packs tight with no gaps.
.gc-text04 Reading
- Face
- Atkinson Hyperlegible Next, weight 350
- Size and leading
- 20 / 32, the golden ratio itself
- Letter spacing
- +0.05em
- Word spacing
- +0.02em
- Measure
- 624px, about 65 characters a line
- Colour
- Full ink, never grey
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.
Your email address
.gc-typestudy__interface05 Interface
- Face
- Atkinson Hyperlegible Next, weight 350
- Size and leading
- 16 / 24
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 leading.
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.
The rule is not there to replace the eye. It gives the work a steady edge.
.gc-pull06 Pull quote
- Face
- Archivo, weight 800
- Size and leading
- 32 / 36
- Measure
- φ⁵, about 11em
- Mark
- A hairline above and below
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.
II · How it got its reputation
.gc-apparatus07 Apparatus
- Face
- Atkinson Hyperlegible Mono, weight 500
- Size and leading
- 12.5 / 20, in capitals
- Letter spacing
- +0.12em, or +0.06em in captions
One rule keeps the whole system coherent: anything that names or measures the content, rather than being the content, is set in the monospaced face, small, in capitals and spaced out. Section numbers, dates, labels, sources and captions are all apparatus.
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.
V · Why it matters
Type is how a page treats people
Most people never notice type that is set well. They only notice that they kept reading.
The people who notice type that is set badly are the ones it leaves out: a reader with low vision squinting at grey text, a dyslexic reader losing the line in a paragraph that runs too wide, an older reader whose phone made the letters smaller than they can see. Every setting on this page is a small decision in their favour.
We wrote the rules down and let a computer keep them so that the decision is made once, carefully, and never quietly undone. The story of the proportion behind it is in The golden ratio, without the legends.