How to use the css clamp generator
- Enter the smallest size and largest size in pixels.
- Enter the small viewport width where the smallest size should end and the large viewport width where the largest size should start.
- Keep the root font size at 16 px unless your page sets another one, so the result is written in rem.
- Copy the clamp() value, or the example rule, into your CSS. The table shows the size at common screen widths.
Formula
slope = (largest - smallest) / (large width - small width)
intercept = smallest - slope x small width
clamp(smallest, intercept + slope x 100vw, largest)
Sizes and widths are in pixels. The intercept is converted to rem by dividing by the root font size, and the slope becomes a vw value by multiplying by 100. Numbers are shown to four decimals with zeros trimmed.
16 px to 24 px between 320 px and 1280 px
The slope is (24 - 16) / (1280 - 320) = 8 / 960 = 0.008333 pixels per pixel of width, which is 0.8333vw. The intercept is 16 - 0.008333 x 320 = 13.3333 px, which is 0.8333 rem. The result is clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
At a 768 px screen the size is 13.3333 + 0.008333 x 768 = 19.73 px, at 1024 px it is 21.87 px, and from 1280 px up it stays at 24 px. Below 320 px it stays at 16 px.
What clamp() does
clamp(min, preferred, max) returns the preferred value, but never less than min or more than max. When the preferred value is a rem amount plus a vw amount, the size grows in a straight line as the viewport widens, then stops at the two ends. That gives fluid type and spacing without a stack of media queries.
If the largest size is smaller than the smallest, the sizes shrink as the screen widens. The generator then puts the lower size first in the clamp(), because the first argument is the floor.
Accessibility note
A size that depends only on vw does not respond to the browser's zoom and text size settings the way rem does. Writing the intercept in rem keeps part of the value tied to the visitor's chosen font size, but the vw part still scales with the window. After you apply a clamp(), test it at a larger text setting and at 200% zoom.
If the two sizes are equal there is nothing to scale, so the tool asks for one fixed size instead. For converting sizes between units see the CSS unit converter, and for layouts see the CSS grid generator and the aspect ratio calculator.
Assumptions and limits
- Viewport width means the width in CSS pixels that vw is measured against.
- The root font size you enter is used to write the result in rem.
- The scaling is a straight line between the two widths, and the size is held constant outside them.
- Browser support for clamp() is assumed. Test in the browsers you care about.
Frequently asked questions
How do I make fluid font sizes with clamp()?
Choose the smallest and largest sizes and the two screen widths. The generator works out the rem and vw parts of the middle value so the size grows evenly between the widths.
Why is there a rem part in the middle value?
A straight line between two points has a slope and a starting offset. The vw term is the slope, and the rem term is the offset, so the line passes through both of your sizes.
Can the sizes get smaller on wider screens?
Yes. Enter a largest size that is lower than the smallest size. The tool swaps the outer values so the lower one is first.
Does clamp() work for spacing too?
Yes. It works for any length, such as margin, padding, gap or width. Enter the pixel sizes you want at each end.