On the economy
of well-made
objects.
A short essay on why a small set of decisions, made once and applied everywhere, returns more than its weight in attention.
The page is a contract.
Every document you send into the world makes a small promise to its reader: that the time they're about to spend was worth your time first. The shape of the page, before any word is read, is what makes that promise credible.
We tend to think of typography as decoration — a finishing pass after the writing is done. It is not. Typography is the part of the document that does the work before reading. It tells the reader how seriously to take what's coming, where to look first, how long this will take[1], and whether the author cared enough to think about any of it.
A well-set page can carry mediocre prose. A poorly-set page sabotages excellent prose. The proportion is not equal — but the lesson is.
"The page is a small room. The masthead is its threshold, the columns its floor. A reader who feels lost in your document is a reader who left." — field notes, vol. 4
Decisions, made once.
The system makes six decisions on your behalf. They are deliberately few. Each is conservative on its own, opinionated only in combination.
- One serif, one humanist sans, one mono. Cormorant Garamond for display, Inter for body, JetBrains Mono for instruments.
- Two metals, used as gold leaf. Champagne for restraint, copper for moments of warmth. Never both at once.
- A 4px grid. Every margin, gap, and pad is a multiple of 4.
- A 66-character measure. Body copy is set to a column that maximizes return on each saccade.
- Hairlines, not boxes. Structure is one-pixel rules; never enclosures.
- Sumi on bone. The background is a warm cream that signals patience.
If you find yourself reaching for a seventh decision, treat the urge with suspicion. Most additions reduce yield.
Anatomy of a paragraph.
A paragraph is set in Inter at fifteen pixels with a line height of 1.5 and a column near sixty-six characters. Dense enough to feel substantial. Loose enough to invite a long stay.
A code block, when needed.
Code inherits charred-cedar dark and a copper rule on the leading edge. Small signals that say read this part differently.
// tokens.css — the only file you should ever edit to retune the system.
:root {
--bone: #F2EDE3; // warm paper, never white
--sumi: #1A1714; // warm near-black ink
--champagne: #B89B6E; // restraint
--copper: #A85A2C; // warmth, used rarely
--measure: 66ch;
}A table, when needed.
| Token | Value | Used for |
|---|---|---|
| --space-4 | 16px | Default gap between siblings |
| --space-6 | 32px | Section padding, aside margin |
| --space-8 | 64px | Major section breaks |
| --measure | 66ch | Reading column width |
Tables earn their keep when the reader needs to compare values across rows. If a table has only one column of data, it should be a list instead.
Three you'll hear, and the answers.
Templates feel rigid.
A system is a starting point, not a cage. The rules you keep most often are the ones you have considered breaking.
My work is too varied.
A good system is a vocabulary, not a script. The same words assemble different sentences. Variety lives in the content.
It looks the same every time.
Yes. That is the point. After the third document, the reader recognizes the work before they read it.
A short defense of finishing.
Everything in this template is recoverable. You can ignore the system, override the variables, abandon the column. The system is not the work; the system is what lets the work be the work.
Use it when you want to stop deciding. Edit it when you want to decide differently. And when something genuinely does not fit — break it, and write down why. That is how the system gets better.
Notes & references
[1] The reading-time estimate above is generated from word count at 220 wpm — the median for considered, non-skimming reading on a screen.