Type Scale

The scale

Seven steps, all fluid. Each uses clamp(min, fluid, max) so they scale smoothly with viewport width. Resize the browser to see the scale in action.

Hero Display --size-hero clamp(56px, 10vw, 140px)

Design is a verb.

H1 Display --size-h1 clamp(36px, 5.5vw, 80px)

The invisible work.

H2 Display --size-h2 clamp(26px, 3.5vw, 48px)

Confidence as infrastructure.

H3 Display --size-h3 clamp(19px, 2vw, 28px)

Type systems as personality.

Body Body --size-body clamp(15px, 1.1vw, 18px)

A design system is not a constraint — it is a shared grammar.

Small Body --size-small 13px

Metadata, captions, secondary copy.

Label Mono --size-label 11px

 TOKEN NAME · CATEGORY · STATUS 

Type scale tokens
Token	Value	Usage
	`clamp(56px, 10vw, 140px)`	Hero titles, zine issue numbers, landing page dominants
	`clamp(36px, 5.5vw, 80px)`	Page titles, section headers, editorial h1
	`clamp(26px, 3.5vw, 48px)`	Section headings within a page
	`clamp(19px, 2vw, 28px)`	Sub-section headings, card titles
	`clamp(15px, 1.1vw, 18px)`	All body copy. System default.
	`13px`	Captions, metadata, secondary copy
	`11px`	Labels, tags, nav items, button text — always uppercase, monospace

Pre-composed classes combining size, family, weight, and line-height:

Class	Font	Size	Style
`.t-hero`	Instrument Serif	`--size-hero`	Italic, lh 0.92
`.t-hero-upright`	Instrument Serif	`--size-hero`	Upright, lh 0.92
`.t-h1`	Instrument Serif	`--size-h1`	Upright, lh 1.0
`.t-h2`	Instrument Serif	`--size-h2`	Upright, lh 1.05
`.t-h3`	Instrument Serif	`--size-h3`	Upright, lh 1.2
`.t-large`	Geist	`clamp(17px, 1.8vw, 22px)`	Regular, lh 1.5
`.t-body`	Geist	`--size-body`	Regular, lh 1.65
`.t-label`	Geist Mono	`--size-label`	500wt, uppercase, ls 0.14em
`.t-mono`	Geist Mono	`--size-small`	Regular, lh 1.5

<h1 class="t-h1">The invisible work</h1>
<p class="t-body">A design system is not a constraint.</p>
<span class="t-label">Archive · Signal</span>

Role	Line height	Why
Hero / display	0.92	Tight leading for large type to feel composed
H1	1.0	Single-line density
H2	1.05	Slight room for two-line headings
H3	1.2	Comfortable for three-word titles
Body	1.65	Reading-optimised for 65–80ch measures
Label/mono	1.0	Capitals with tight rhythm