Narrow viewport
320 px · base 16
One scale,
two families,
zero media queries.
Every text size is a clamp() between the narrowest and widest viewport. Headings tighten on small screens, breathe on large ones — no breakpoints, no JS. Pair a sans with a serif italic for emphasis, and you're done.
01 — Specimen
Headings & body mapped to defaults.
h1size 6Ship the real thing
h2size 5From idea to product
h3size 4A governed process
h4size 3Pre-styled, responsive
h5size 2Mapped to defaults
h6size 1Add smaller or larger steps any time
psize 0Clamped between the smallest and widest viewports — no media queries.
spansize −2— caption, label, footnote
02 — Families
A workhorse and a hand for emphasis.
03 — Variables
Everything is a custom property.
--font-size-6h1clamp(2rem, 0.8rem + 2.4vw, 4.75rem)
--font-size-5h2clamp(1.6rem, …, 3.95rem)
--font-size-4h3clamp(1.4rem, …, 3.3rem)
--font-size-3h4clamp(1.25rem, …, 2.75rem)
--font-size-2h5clamp(1.125rem, …, 2.3rem)
--font-size-1h6clamp(1rem, …, 1.9rem)
--font-size-0bodyclamp(1rem, …, 1.6rem)
--font-size--1captionclamp(0.94rem, …, 1.33rem)
--font-size--2labelclamp(0.88rem, …, 1.11rem)
--font-family-1Geistall UI · 400 / 500 / 600 / 700
--font-family-2Instrument Serifitalics & emphasis only
Two inputs, two outputs. Change --min-scale from 1.125 to 1.2 and the entire system retunes. No find-and-replace, no migration, no audit.
Ready to ship?
Get the scale.
A complete, responsive type scale wired into your app — headings, body, captions — exported with the rest of the system.