CSS clamp calculator
With this CSS clamp calculator you turn a minimum and maximum value plus a viewport range into the finished clamp() expression for font sizes, spacing and widths, without any media queries.
Example: CSS property: font-size · Smallest value (mobile) 16 px · Largest value (desktop) 24 px · From viewport width 320 px · To viewport width 1,280 px · Base font size (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Source: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Updated: .
How it is calculated
clamp(MIN, VAL, MAX) limits a value from below and above. For type that grows from 16 to 24 px between 320 px and 1280 px of viewport width, it reads: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
How it is calculated
Between the two viewport widths the value rises linearly. The slope is (max − min) / (viewportmax − viewportmin), the intercept is min − slope · viewportmin. The intercept is in rem and the slope in vw, so a browser font size enlarged by the user still counts. The table shows the value you get on typical devices.
Good to know
- Pure vw font sizes without a rem part hardly zoom in the browser; that is why the expression includes a rem part.
- clamp() also works for padding, margin, gap and width – anywhere a length is allowed.
- All current browsers support clamp() (since 2020).
Frequently asked questions
How do I calculate clamp() for font sizes?
Enter the minimum and maximum size in px and the viewport widths. The calculator builds the preferred value from rem and vw and sets it between minimum and maximum.
Why does the expression contain a rem part?
A value in vw alone ignores the browser font size. With a rem part the text still scales for users with a larger default size.
Can I use clamp() for spacing too?
Yes, for any CSS property that takes a length, such as padding, margin, gap or width.
What does 1.5rem at the end mean?
The maximum: above the upper viewport width the type stops growing. At a 16 px base, 1.5 rem is exactly 24 px.
Sources and legal basis
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (text must be resizable to 200%)
As of: · Editorial policy
Related tools
- Px to Rem ConverterPx to rem converter with your own base font size, plus em, pt, percent and vw, and a lookup table of common font sizes. Free, no sign-up, works offline.
- CSS gradient generatorBuild CSS gradients: linear, radial or conic, as many color stops as you need, angle and fallback color – live preview and CSS ready to copy.
- CSS box shadow generatorBuild CSS box shadows with sliders: multiple layers, offset, blur, spread, color with alpha, inset and presets – live preview and one-click copy of the CSS.
- CSS border radius generatorRound corners with sliders: all corners linked or each on its own, px or %, elliptical 8-value syntax – shortest CSS shorthand, live preview and copy button.
- Font pairing – heading and body font combinationsFont pairs for headings and body text with live preview, copy-ready CSS and availability on Windows, Mac, iPhone and Android – system fonts only, no web fonts.
- Color contrast checker (WCAG 2.2)Check the contrast between text and background colors: WCAG 2.2 contrast ratio with AA/AAA ratings for normal text, large text and UI components.
- What is my IP address?What is my IP? See your public IPv4 or IPv6 address at once, plus approximate location, internet provider and browser details. Free, never stored.
- JSON Escape / UnescapeJSON escape and unescape online: turn any text into a valid JSON string with escaped quotes, backslashes and line breaks, or decode it back – in your browser.
- JSON-LD GeneratorJSON-LD generator for Schema.org: fill in an article, FAQ, product, local business or organization and copy ready-to-use code with a built-in error check.