Typography & Typefaces
Typography is the invisible architecture of the page. Standard imposes a
strict modular scale based on mathematical ratios and limits typeface
choices to high-utility families that preserve clarity and dignity.
Approved Typefaces (Font Stacks)
Three semantic stacks, optimized for screen rendering and accessibility:
- Sans-serif (interface & body text) —
Instrument Sans,system-ui. Modern, geometric, humanist; excellent small-scale readability. - Serif (editorial reading) —
Newsreader,Instrument Serif. For long narratives — a literary, grounded tone. - Monospaced (data & code) —
IBM Plex Mono,ui-monospace. Code blocks, tables, metadata, aligned numbers.
Semantic Roles
Every interface element consumes an abstract typographic role, never a
physical font directly:
--font-text— reading body text (defaultvar(--font-sans)).--font-header— titles and headings ("Inter", or a theme-specific typeface).--font-interface— buttons, form controls, navigation (var(--font-sans)).
The Modular Scale (Optical Scale)
Text sizing is never arbitrary — it follows a geometric scale based on the
silver ratio (√2 ≈ 1.414): Size = Base × (√2)^N.
| Token | Relative Size | Common Alias | Usage / Role |
|---|---|---|---|
--scale-d5 |
~9px |
--size-3xs |
Fine print, legal mentions |
--scale-d3 |
~12px |
--size-xs |
Frontmatter metadata, labels |
--scale-d2 |
~14px |
--size-sm |
Image captions, helper text |
--scale |
16px (1rem) |
--size-base |
Main body text |
--scale-2 |
~22px |
--size-lg |
Subheadings, H3 |
--scale-3 |
~32px |
--size-xl |
Section titles, H2 |
--scale-4 |
~45px |
--size-2xl |
Article titles, H1 |
--scale-6 |
~90px |
--size-4xl |
Display numbers, drop caps |
Line Heights & Letter Spacing (Rhythm)
Line heights are proportional to font size and computed dynamically:
- Base line height (
--line-height) —1.414, the silver ratio. Ideal breathing space for body copy. - Compact height (
--line-height-compact) — used for large headings (H1, H2) to prevent lines from drifting apart. - Letter spacing — optically adjusted:
--tracking-tight(-0.01em) tightens large titles;--tracking-open(0.01em) opens small metadata or technical uppercase labels.
System OpenType Features
Enabled by default, per family:
- Inter —
"calt"(contextual alternates),"cv05"(lowercase l),"cv11"(capital W),"ss03"(digit alternates). - Instrument Sans —
"figa"(ligatures),"ss01","ss02","ss05". - UI —
"dlig"(discretionary ligatures),"zero"(slashed zero,0vsO).