Colophon
How this site is set, and why it looks the way it does.
The last version of this site was built like a dashboard: cards, grids, a box around everything. It was tidy, but it didn’t feel like anyone lived here. This one is meant to read more like a notebook than a control panel.
The type
Everything you read here is set in Newsreader, a serif from Production Type designed for reading on screens. It has an optical-size axis, so headlines get finer, higher-contrast letters and body text gets sturdier ones. One family, tuned for every size it appears at.
The small stuff (navigation, dates, view counts) is set in Schibsted Grotesk, a sans-serif that started life at a newspaper company. Code is JetBrains Mono.
“Typography exists to honor content.”
Robert Bringhurst, The Elements of Typographic Style
The numbers
Body text is 20 pixels on a 32-pixel line, about 66 characters wide. Every gap on the page is a fraction or multiple of that line, which is most of why it feels calm.
:root {
--font-text: "Newsreader", Georgia, serif;
--font-ui: "Schibsted Grotesk", system-ui, sans-serif;
--text: 1.25rem; /* 20px */
--leading: 1.6; /* a 32px line */
--measure: 34em; /* ~66 characters */
}Small things
- Numbers inside sentences sit low, like letters. Numbers in lists line up in columns.
- Links are always underlined. Color alone isn’t enough.
- Emphasis is italic. Bold stays out of paragraphs.
- Real quotes and apostrophes. Very few dashes.
- It follows your device’s light or dark setting, and there’s a switch in the footer if you’d rather choose.
If something reads badly on your screen, I’d like to know. Tell me on Twitter.