Typography

Typography: families
Token	Value
`font-sans`	`ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
`font-mono`	`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
`font-serif`	`Georgia, "Iowan Old Style", "Times New Roman", serif`

Typography: Headings
Style	Value	Sample	Use it for
`post-h1`	`3.9rem / 1.02, 700, -0.035em`	BLOG	Page title, once per page. Set in capitals (`text-transform: uppercase`). 3.9rem is the desktop size; the site clamps it from 2.1rem at `clamp(2.1rem, 5.6vw, 3.9rem)`.
`post-h2`	`2.4rem / 1.12, 700, -0.025em`	Why naming matters	Section heading, sentence case, with a 3px `ink` rule under it. Clamps from 1.7rem: `clamp(1.7rem, 3.2vw, 2.4rem)`.
`post-h3`	`1.7rem / 1.25, 700, -0.015em`	Naming principles	Subsection, with a 5px `accent` rail on the inline start. Clamps from 1.4rem: `clamp(1.4rem, 2.2vw, 1.7rem)`.
`post-h4`	`1.15rem / 1.35, 700, -0.01em`	Check a name	Third level, with a 3px `accent` rail.
`post-h5`	`1rem / 1.4, 700, -0.005em`	Spelled for each tool	Fourth level, with a 2px `accent` rail.
`post-h6`	`0.9rem / 1.45, 700`	Notes	Fifth level, with a 1px `accent` rail. Colour is `foreground` at 88%.

Typography: Text
Style	Value	Sample	Use it for
`body`	`1rem / 1.5, 400`	Insights, tutorials, and best practices for building accessible web experiences.	Body copy and UI text on `background`, `card` and `muted` in `foreground`.
`lead`	`1.25rem / 1.4, 400`	Learn from real-world examples.	Page intro under an h1 (`text-xl` from `sm`, `text-lg` below). In `muted-foreground`.
`small`	`0.875rem / 1.25rem, 400`	Frontend developer and accessibility engineer.	Footer copy, captions and helper text in `muted-foreground`.
`card-title`	`2.25rem / 1.25, 700, -0.02em`	Everything Is A List	Post title in a list from `md`. Underlined 3px `foreground` on hover. 1.5rem below `md`.
`card-title-sm`	`1.5rem / 1.25, 700, -0.02em`	Everything Is A List	Post title in a list below `md`.
`quote`	`1rem / 1.75, 400, 0.005em`	The first thing a screen reader announces is the name.	Blockquote: serif italic with a 2px `accent` rule on the inline start.

Typography: Labels and code
Style	Value	Sample	Use it for
`label`	`0.8125rem / 1.5, 700, 0.08em`	PUBLISHED POSTS	Label. Set in capitals, in `accent-text`. Eyebrows, listbox headings, dates.
`meta`	`0.7rem / 1.5, 700, 0.14em`	SEP 23, 2026 · 7 MIN READ	Date and reading time above a post title. Capitals, `accent`.
`link-mono`	`0.9rem / 1.5, 700, 0.14em`	READ MORE →	The "read more" link in a post entry. Capitals, a `link-brut` underline.
`code`	`0.875em / 1.5, 600`	aria-describedby	Inline code: 0.875em of its parent, in a `accent` 12% tint with a 2px edge and `radius-code`.
`pre`	`1rem / 1.6, 500`	const label = "Close dialog"	Code block on `ink` with `paper` text. 16px at weight 500, the size and weight that make Lc 80 the APCA minimum; the syntax colors are Lc 80 or better on `ink`. See `CodeBlock`.