Fluid Type clamp() Generator
CSS clamp() for font sizes that scale between two viewports — slope and intercept in rem, a type scale with ratios, sample sizes and a WCAG 200 % zoom check.
A :root block of custom properties, each clamp(min, intercept + slope·vw, max) with the pixel range in a comment, the size at common viewports, and a flag on steps that cannot double at 200 % zoom.
Example: 16 px at 320 to 20 px at 1240: clamp(1rem, 0.913rem + 0.435vw, 1.25rem); with ratios 1.2 / 1.25 step 1 is clamp(1.2rem, 1.074rem + 0.63vw, 1.563rem). 16 → 40 px is flagged for 200 % zoom.
A straight line
between two breakpoints.
Where the clamp() numbers come from, how the scale is built, and what the zoom check tests.
The line
Between the small viewport (with its size) and the large viewport (with its size) the font size is a straight line: slope = Δsize ÷ Δviewport, intercept = size − slope × viewport. As CSS that is clamp(min, intercept + slope × 100vw, max); intercept and bounds are written in rem (px ÷ root size) so the value still follows the user’s font setting, while the vw part tracks the viewport.
The scale
A type scale multiplies the base by a ratio per step — often a smaller ratio on phones and a larger one on desktops, so headings grow more on wide screens. Each step gets its own line and its own clamp(), emitted as --step-n custom properties with the pixel range in a comment.
The 200 % zoom check
WCAG 1.4.4 asks that text can be resized to 200 %. When a user zooms, the CSS viewport halves and rem values double, but the vw term does not double — so at the large breakpoint the zoomed size is min(2·max, max(2·min, 2·intercept + slope·viewport/2)), and it must reach the unzoomed size. Keeping the large size within twice the small one always passes; otherwise a media query above the large breakpoint fixes it. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- slope = Δsize ÷ Δviewport, intercept = min − slope × minViewport, preferred = intercept + slope × 100vw; WCAG 1.4.4: at 200 % zoom the viewport halves and rem doubles; zoomed size must reach unzoomed
Last reviewed 21 September 2026. How results are checked: How we verify.