Text that scales without media queries
A heading that is 16 px on a phone and 32 px on a desktop used to need two or three breakpoints. With clamp() one line is enough: the size grows smoothly with the screen between a floor and a ceiling. The hard part is the middle value, a mix of a fixed size and a percentage of the screen width. This generator works it out from the two sizes you care about.
Get a clamp() value in four steps
- Enter the smallest and largest size, for example 16 and 32.
- Enter the screen widths at which each applies, for example 320 and 1280 pixels.
- Pick px or rem and, if your site changes the root font size, the pixels in 1rem. Choose the CSS property to get a ready declaration.
- Copy the value or the declaration. The table and the slider show the size at any width in between.
What the three parts of clamp() do
The result looks like clamp(1rem, 0.6667rem + 1.6667vw, 2rem). The first value is the smallest size the property can take, the last is the largest, and the middle is the line between them. The tool calculates the slope from the size difference divided by the width difference, and the fixed part from where that line crosses a screen width of zero. When the size should shrink on larger screens, the tool puts the smaller value first, because clamp() always expects minimum first.
Using rem keeps zoom working
Sizes in rem follow the font size a visitor has set in the browser, while px values do not. A pure vw size ignores the zoom setting completely, which can fail accessibility checks. Mixing a rem part with the vw part, as this tool does for rem sizes, keeps text zoomable. Test your design at 200 % zoom, and keep the largest size no more than about two and a half times the smallest.
Nothing leaves your browser
The values are calculated on the page. The generator makes no network request and stores nothing.