How to encode fluid typography as design tokens
- Step 1Define per-role bounds — tokens.json: { 'font-display': { 'min': 32, 'max': 64, 'minVw': 320, 'maxVw': 1280 }, 'font-body': { 'min': 16, 'max': 18, 'minVw': 320, 'maxVw': 1280 } }. Per-role min/max.
- Step 2Compute clamp() per token — Build script: for each role, compute clamp(min/16 rem, intercept rem + slope vw, max/16 rem). Output as design tokens with the resolved expressions.
- Step 3Consume per platform — Web: var(--font-display) → clamp() expression. iOS/Android: convert to media-query equivalents (or runtime size lookups). Style Dictionary handles the conversion.
Frequently asked questions
Can I theme the fluid bounds?+
Yes — define multiple bound sets per theme (compact, default, comfortable). [data-theme="compact"] :root { --font-display: clamp(...) } overrides. Components inherit the theme's clamp expressions.
What about min/max viewport per token?+
Most projects use one global viewport range (e.g., 320–1280) across all roles. Fancier projects use per-role ranges (display reaches 1440; body caps at 768). Consistency wins for most.
Is clamp() expensive to compute?+
No — browsers resolve in microseconds. The complexity cost is in human-readable CSS. Generated clamp() expressions are concise; hand-written ones are often unreadable.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.