The type scale
Every page on this site is built from a small set of sizes. Restraint is the point — six sizes feel like a system; sixteen feel like a font menu.
- 5xl — Display — article titles
- 3xl — Section — post cards
- 2xl — Subsection — H2
- xl — Minor — H3
- lg — Body — long-form reading
- sm — Meta — bylines and notes
- xs — Eyebrow — labels and tags
Body copy
Body text is set in Fraunces at 1.125rem with generous leading. The serif is doing two jobs at once: it slows the reader down, and it makes a long page of text feel like a place rather than a feed.
Italics are reserved for emphasis and titles — never for whole paragraphs, which start to feel breathless. Bold is rarer still, used only when a word genuinely needs to be a handle the eye can grab.
When a sentence wants to take a breath, it does so with an em dash — like this — rather than parentheses, which always feel slightly apologetic.
Headings and hierarchy
Headings step down in size and weight, never in color. The accent color is reserved for links and small typographic flourishes, so a heading never has to compete with a callout.
A third-level heading, for finer divisions
Use H3 sparingly. If a post needs more than two levels of hierarchy, it probably wants to be two posts.
Pull quotes and blockquotes
The most important thing about a typographic system is that it gets out of the way of the words. The reader should never notice the type — only the thinking it carries.
— Robert Bringhurst, paraphrased
Blockquotes are flagged with a thin accent rule on the left and set in italics. They are for borrowed sentences, not for emphasis on your own.
Lists
Unordered lists are for things without rank — ingredients, principles, things you noticed on a walk.
- A sentence worth keeping
- A book to return to in autumn
- The name of a color you don’t yet know
- One small kindness, unrecorded
Ordered lists are for steps, arguments, or anything where the order is part of the meaning.
- Read the sentence aloud.
- Remove the first three words and read it again.
- If it still works, leave it that way.
Inline elements
Inline code, like const reader = patient, is set in a monospaced face at slightly smaller size, with a faint background tint to distinguish it from prose without shouting.
Links are colored in the accent and underlined on hover, never by default — an underlined paragraph is a paragraph that has stopped trusting itself.
⌘ + K — Open the search palette
Code blocks
When code does need to appear, it gets its own block — monospaced, gently tinted, and never decorated beyond what is useful.
// A reader is a function that returns attention.
export const read = (text: string) => {
return text
.split(/\s+/)
.filter(Boolean)
.map((word) => word.toLowerCase());
};
Rules and small print
Horizontal rules separate movements within a piece, not paragraphs. Use them the way a composer uses a double bar line.
Captions, footnotes, and bylines live in the small-print scale — never below 0.8rem, never in pure black. They are quiet on purpose.
Checklists and callouts
- Keep headings structural
- Review the final rhythm aloud
flowchart LR
Draft --> Edit --> Publish