CSS Clamp Calculator
Calculate responsive clamp() expressions
What is CSS Clamp Calculator?
This CSS clamp() calculator takes a minimum and maximum viewport width plus the font size you want at each, then works out the clamp() expression that interpolates linearly between them and lists the resulting size at common viewport widths. The bounds are expressed in rem, and the math runs locally in your browser.
How to use CSS Clamp Calculator
- 1Enter the minimum and maximum viewport widths — 375 and 1440 are common choices.
- 2Enter the font size you want at each of those two widths.
- 3Copy the generated clamp() expression.
- 4Check the computed sizes listed for each viewport to confirm the scaling feels right.
Frequently asked questions
What are the advantages of clamp() over media queries?+
Media queries jump in steps, so type size changes abruptly right around a breakpoint. clamp() scales continuously, so the result looks right at every width, and a single line replaces several breakpoint blocks — far less to maintain.
Why should the clamp() bounds use rem instead of px?+
Bounds in px make the font size ignore the default size a user has set in their browser, which is an accessibility failure. With rem bounds, the type scales up when someone increases their default size, while the vw term still handles smooth scaling with the viewport.
Can clamp() make text far too large or too small at extreme widths?+
No — that is exactly what clamp() prevents. Below the minimum viewport the size is pinned to the minimum, above the maximum viewport it is pinned to the maximum, and linear interpolation applies only in between. No extra fallback media queries are needed.
Related tools
All toolsImage Compressor
Compress images in your browser — no uploads
Image Format Converter
Convert between PNG, JPEG, WebP, and AVIF
Image Resizer
Resize images to exact dimensions, with optional aspect lock
Image to Base64
Turn images into data URIs with ready-to-use snippets
Favicon Generator
Generate multi-size icons and a favicon.ico
SVG Optimizer
Strip SVG cruft without touching path data