Typography
One typeface, a handful of weights, and a role-based scale that steps down a notch on smaller screens. Every size below is a CSS variable read from the stylesheet.
Typeface
The interface is set in Inter, self-hosted rather than pulled from a font service so the first paint never waits on a third-party request. There is no display or heading font: weight and size carry the hierarchy. Headings run at 800, sub-headings and labels at 700, buttons and emphasis at 600, and body copy at 400.
The full stack falls back to the system sans-serif if Inter has not loaded, so text is always readable.
The scale
Sizes are roles, not one-offs. The same variable drives every page title, every section heading, and so on. The three columns are the desktop value and the two step-downs, applied at the tablet and mobile breakpoints on the Layout page.
| Token | Desktop | Tablet | Mobile | Role |
|---|---|---|---|---|
--fs-h1 | 34px | 32px | 30px | Page title, with the green bar. |
--bar-h1 | 52px | 48px | 44px | Width of the green bar under the title. |
--fs-h2 | 26px | 20px | 18px | Section headings. |
--fs-h3 | 20px | 18px | 17px | Sub-headings and detail browlines. |
--fs-h4 | 18px | 16px | 14px | Minor labels on multi-role pages. |
--fs-body | 17px | 15px | 14px | Long-form copy outside articles. |
--lh-body | 1.6 | 1.6 | 1.7 | Line height for body copy. |
--fs-prose | 17px | 16px | 16.5px | Article reading size. |
--fs-prose-h2 | 24px | 21px | 21px | Article section headings. |
Specimens
Rendered at their live sizes. Narrow the window and they step down exactly as the site does.
The page title
--fs-h1 34px · 32px · 30px 800 Page title. Carries the green bar beneath it.
A section heading
--fs-h2 26px · 20px · 18px 700 Section heading.
An article section heading
--fs-prose-h2 24px · 21px · 21px 700 Article section heading, with the green underline.
A detail sub-heading
--fs-h3 20px · 18px · 17px 700 Detail sub-heading and browline.
A minor label
--fs-h4 18px · 16px · 14px 700 Minor label, multi-role pages.
Body copy sets the reading pace outside articles: long enough to breathe, short enough to scan. This is the size most words on the site are read at.
--fs-body 17px · 15px · 14px 400 Long-form copy outside articles.
Article reading size, a touch larger and looser, tuned for a long sit with a single column of text.
--fs-prose 17px · 16px · 16.5px 400 Article reading size.
Heading treatments
Two green marks, two jobs. Page and section titles carry a short green bar under the first words — a fixed-width accent that does not stretch with the text. Article headings instead take a full underline that runs the width of the words. If the mark spans the text, you are inside an article; if it is a short bar, you are looking at a page or section title.
Monospace
A monospace stack marks anything machine-set: meta lines and dates, tags and badges, table headers, code, and the small uppercase kickers. It signals “this is data, not prose”. The stack is SF Mono, Fira Code, Cascadia Code, then the system monospace.
In use
Where each role turns up:
One nuance rides the body role: on the home page, the first paragraph of the about text steps up to primary colour and medium weight, a quiet lede treatment.
- Page title. The h1 on every top-level page, with the green bar.
- Section heading. Band headings, with the short green underline.
- Article heading. The h2 inside a blog post, with the green underline. Article h2 only; sub-headings drop to a plain weight.
- Body. About text, page intros, card copy.
- Prose. The reading column of an article.
- Meta. Dates, reading time, tags. Monospace.