How the css clamp generator works
Calculate the size change per viewport pixel, convert that rate to a vw coefficient, and solve the linear equation for its intercept. The minimum and maximum arguments keep the preferred value inside the intended range.
preferred = intercept + slope × 1vwThe generated value uses clamp(minimum, preferred fluid value, maximum).
Scale text from 16px to 32px between 320px and 1280px
The slope is 1.6667vw and the intercept is 10.6667px, producing clamp(16px, 10.6667px + 1.6667vw, 32px). At 320px the result is 16px; at 1280px it is 32px.
Copyable code examples
Use these examples as a starting point, then match the values and assumptions to the rendered project.
.heading {
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
}:root {
--step-fluid: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
}
h1 { font-size: var(--step-fluid); }const slope = (maxSize - minSize) / (maxWidth - minWidth);
const vw = slope * 100;
const intercept = minSize - slope * minWidth;Using the result accurately
Choose viewport bounds that reflect the layout rather than device names. Test the generated value at the minimum, midpoint, maximum, and with browser zoom. For text, keep line height and measure readable as font size changes.
A mathematically fluid font size is not automatically accessible. Very small minimums, extreme scaling, fixed-height containers, and viewport-only sizing can still cause readability or overflow problems.
References: W3C CSS Values and Units Level 4: comparison functions.