CSS clamp generator
Type scales with the viewport
Generated in your browser · nothing is uploaded
Builds a `clamp()` that moves a size linearly between two viewport widths; a small size at a small screen, a large size at a large one, and a straight line between them. Drag the preview to see the value at any width.
How to use the css clamp generator
The middle term of a clamp is a line, and the maths is a line through two points: slope is the size difference divided by the width difference, and the intercept is where that line crosses zero width. Written out it becomes Xrem + Yvw, which is why every fluid-type clamp looks like an arbitrary pair of numbers — they are the two coefficients of that line.
The intercept is written in rem rather than px deliberately, and this is the part most hand-written clamps get wrong. A viewport unit does not respond to the reader’s browser font-size setting; a rem does. A clamp whose fixed part is in pixels ignores a reader who has set larger text, which fails WCAG 1.4.4; the requirement that text can be resized to 200%. Keeping the intercept in rem means their setting still moves the result.
One caution on range: a very steep slope makes text jump noticeably as a window is resized, and a very shallow one makes the whole exercise pointless. A useful heuristic is that the largest size should not be more than about twice the smallest.
Questions
It is the equation of a line. The rem term is the intercept, the vw term is the slope.
A px intercept stops the value responding to the reader’s font-size setting, which fails the WCAG text-resize requirement.
Nothing: clamp holds the minimum below and the maximum above. The line only applies between them.
Yes. clamp() works on any length. Only the preview here is type.
For sizes, rarely. For layout changes: a column count, a hidden element — yes.