3.2 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 to preserve text clarity and dignity.
Approved Typefaces (Font Stacks)
Standard organizes font families into three semantic stacks optimized for screen rendering and accessibility:
- Sans-serif (Interface & Body Text):
Instrument Sans,system-ui. A modern geometric and humanist typeface with excellent small-scale readability. - Serif (Editorial Reading):
Newsreader,Instrument Serif. Used for long narratives, bringing a literary, grounded tone. - Monospaced (Data & Code):
IBM Plex Mono,ui-monospace. Used for code blocks, tables, metadata, and aligning numbers.
Semantic Roles
Every interface element consumes abstract typographic variables to avoid direct coupling with physical fonts:
--font-text: Reading body text (default:var(--font-sans)).--font-header: Titles and headings ("Inter"or a theme-specific typeface).--font-interface: Buttons, form controls, and navigation elements (var(--font-sans)).
The Modular Scale (Optical Scale)
Text sizing is never arbitrary. It is governed by a geometric scale based on the silver ratio ((\sqrt{2} \approx 1.414)).
Each step in size is calculated using the formula:
[\text{Size} = \text{Base} \times (\sqrt{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)
To guarantee the page’s vertical rhythm, line heights are proportional to font size and dynamically computed:
- Base Line Height (
--line-height):1.414(the silver ratio). Provides 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) for large titles to tighten the character shapes.--tracking-open(0.01em) for small metadata or technical uppercase labels.
System OpenType Features
Standard enables specific OpenType features by default to optimize font rendering:
- For Inter:
"calt"(contextual alternates),"cv05"(lowercase l design),"cv11"(capital W design),"ss03"(digit alternates). - For Instrument Sans:
"figa"(ligatures),"ss01","ss02","ss05". - For UI:
"dlig"(discretionary ligatures) and"zero"(slashed zero to distinguish0fromO).