Fluid type clamp() calculator
Generate a CSS clamp() expression that scales a font size (or any length) smoothly between two viewport widths, and check it against the WCAG text-resize rule.
–
This sentence is set with the generated clamp(); resize the window to see it change.
How it works
Between the two viewport widths the size follows a straight line: size = slope × viewport + intercept, where slope = (maxSize − minSize) / (maxViewport − minViewport). In CSS, "viewport width" is 100vw, so the middle value of clamp() is intercept + (slope × 100)vw. The outer values pin the result between the minimum and maximum. Sizes are expressed in rem so they respect the reader's default font size setting.
The WCAG resize check
WCAG success criterion 1.4.4 asks that text can be resized to 200% without loss of content. A clamp() that leans mostly on vw can defeat browser zoom: as the user zooms, the viewport measured in CSS pixels shrinks, and a size based on vw shrinks with it. This calculator simulates 500% browser zoom at every viewport width in your range and checks that the on-screen text is at least twice as large as at 100%. If it fails, bring the two sizes closer together or widen the viewport range so the rem part carries more of the value. The test is explained in the fluid typography tutorial.