How to generate fluid font sizes with css clamp()
- Step 1Set min and max sizes — Min in px (e.g., 16) for the smallest viewport. Max in px (e.g., 24) for the largest viewport. Generator computes the clamp expression that interpolates between them.
- Step 2Set viewport range — Min vw (typically 320px for mobile) and max vw (typically 1440px for desktop). The interpolation happens between these two widths.
- Step 3Copy the expression — Output: clamp(1rem, 0.667rem + 1.0667vw, 1.5rem). Use directly in font-size: ... or as a CSS custom property.
Frequently asked questions
Why clamp() instead of media queries?+
Media queries produce stepped sizing (16px → 18px → 20px) — visibly discontinuous. clamp() interpolates smoothly across the range — every pixel of viewport width produces a slightly different size. Better visual rhythm.
Why rem-based?+
rem respects the user's browser font-size preference (set in browser preferences). px-based clamp() ignores user preference, hurting accessibility. Always use rem for the min and max bounds.
What's a typical min/max ratio?+
1:1.25 to 1:1.5 for body text. 1:2 to 1:3 for hero typography. Larger ratios produce more dramatic scaling; pick based on design intent.
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.