The browser is your mentor
This page renders nothing but type. Every size you see is a single
clamp() token — no media queries, no breakpoints. Drag the window
narrow and wide: the headings and body glide between their bounds while the
browser interpolates the sizes in between. Zoom to 200% and the text still
doubles, because each token keeps a rem anchor.
Body copy holds its anchor
Reading text is set at step 0 — 16px on a phone, rising to your
calibrated 18px on a desktop and never past it. The measure is capped
at 65 characters, so however wide the viewport gets, a line of prose stays inside a
comfortable scan. Structure is set in monospace; reading is set in a system sans —
the engineer's-notebook signal you designed on purpose.
Three levels, in ratio
Each heading is the one below it multiplied by the scale ratio, so the hierarchy reads as harmony rather than a pile of hand-picked sizes. Below is the metadata register — the quiet chrome that tells a reader "this is not the content."