CSS clamp() calculator
Enter the smallest and largest font size and the viewport widths they belong to — the tool works out the clamp() formula, plots font size against viewport width and gives you ready-made font-size CSS.
h1 {
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
}How to use it
- Enter the minimum and maximum font size in pixels, for example
16pxon phones and32pxon wide screens. - Set the viewport widths where scaling starts and stops — typically
320pxand1280px. - Choose the output unit:
rem(recommended) orpx. Forrem, check the root font size, usually16. - Drag the marker on the chart or move the “Simulated viewport width” slider — the sample heading is shown at the size that width produces. Click “Copy” to take the code.
How it works
How the formula works
The font size follows a straight line through two points: (minVw, min) and (maxVw, max). The slope is slope = (max − min) / (maxVw − minVw) and the offset is intercept = min − slope × minVw. In CSS the slope becomes a vw value: 1vw is 1% of the viewport width, so you write slope × 100. The result is clamp(min, intercept + slope×100vw, max): flat below the minimum width, a ramp in between, flat again above the maximum width.
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);Why rem belongs in the middle term
A size written only in vw (font-size: 2vw) does not grow when the user zooms the page: zooming shrinks the viewport measured in CSS pixels, so the text stays the same physical size. That fails WCAG 1.4.4 Resize Text, which requires text to be scalable up to 200%. The rem part reacts to zoom and to the font size set in the browser, and rem bounds scale too. A commonly cited rule of thumb is to keep the maximum within about 2.5 times the minimum.
min(), max() and clamp()
clamp(MIN, VAL, MAX) sets a floor and a ceiling at once and equals max(MIN, min(VAL, MAX)). min() gives only an upper cap, max() only a lower floor.
font-size: min(5vw, 3rem); /* never above 3rem */
font-size: max(1rem, 2vw); /* never below 1rem */clamp() is not only for fonts
Any property that takes a length accepts it: padding, margin, gap, width. Fluid spacing keeps the layout in proportion with the type. For spacing a simple clamp(1rem, 5vw, 3rem) is often enough, while the middle term from the calculator helps when you need an exact ramp between two widths.
padding-inline: clamp(1rem, 5vw, 3rem);
gap: clamp(0.75rem, 2vw, 2rem);FAQ
How is clamp() different from media queries for font size?
Media queries change the size in steps at breakpoints, while clamp() changes it smoothly at every pixel of width. You need fewer rules and fewer breakpoints. If the design calls for exact stepped sizes, media queries are still the better tool.
Which minimum and maximum viewport widths should I use?
The most common pair is 320px (a small phone) and 1280–1440px (a laptop or your container’s maximum width). Choose a maximum close to your content width, since the text stops growing beyond it. Keep in mind that vw includes the width of a classic scrollbar.
Should I output rem or px?
Prefer rem: it respects the font size set in the browser and keeps the text zoomable. Pixel values ignore the user’s font setting, so use px only as a deliberate choice.
Is clamp() supported by browsers?
Yes, by every modern browser since 2020 (Chrome 79, Firefox 75, Safari 13.1). For very old browsers write a plain font-size: 1.25rem; first and put the clamp() line after it — an old browser simply skips the line it does not understand.
