How to css clamp(): specification reference
- Step 1Three arguments — clamp(MIN, PREFERRED, MAX). MIN is the floor — never go below. MAX is the ceiling — never exceed. PREFERRED is the target value, used when between MIN and MAX.
- Step 2Linear interpolation math — For fluid typography: PREFERRED = INTERCEPT_REM + SLOPE_VW. SLOPE_VW = (MAX_PX - MIN_PX) / (MAX_VW - MIN_VW) × 100. INTERCEPT_REM = (MIN_PX - SLOPE × MIN_VW) / 16. The Generator computes both.
- Step 3Edge cases — If PREFERRED < MIN at the smallest viewport: uses MIN (clamp floor). If PREFERRED > MAX at the largest: uses MAX (clamp ceiling). Outside the viewport range, the function safely clamps to bounds.
Frequently asked questions
Browser support for clamp()?+
95%+ globally — Chrome 79+ (2019), Firefox 75+ (2020), Safari 13.1+ (2020). Edge has supported via Chrome since 2020. Safe to use without polyfill in 2026.
What if I want only a min, no max?+
Use max() instead: max(1rem, 2vw). Clamps below but allows unbounded growth. Symmetric for upper-only: min(2rem, 5vw).
Can clamp() use percentages?+
Yes — clamp(50%, 70vw, 80%). Percentages and viewport units mix freely. Common pattern: clamp(min-rem, mid-vw, max-rem) for typography.
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.