The Clamp Calculator turns two viewport/value pairs into a single production-ready CSS clamp() declaration for fluid typography and spacing. You give it a minimum value at a small viewport and a maximum value at a large viewport; it solves for the linear function between them and outputs clamp(MIN, PREFERRED, MAX), where the preferred term is a vw-plus-rem expression that scales smoothly with the screen width.
Under the hood, clamp(min, preferred, max) resolves to the preferred value but never lets it drop below min or rise above max. The interesting part is the middle term: a good fluid value combines a viewport unit with a fixed rem offset, like clamp(1rem, 0.5rem + 1.5vw, 1.75rem). Hand-computing that slope and intercept is error-prone, so this responsive clamp generator does the algebra for you and lets you preview the result at every breakpoint.
The result is fewer media queries and type that resizes continuously instead of jumping at fixed breakpoints. It works equally well for font-size, margin, padding, gap, and line-height, which is why fluid typography and fluid spacing are the two most common reasons developers reach for a css clamp calculator.
Generating a clamp() value step by step
- 1
Set your minimum and maximum viewport widths (for example 320px and 1280px). These are the breakpoints where clamping kicks in and where scaling stops.
- 2
Enter the value you want at the smallest viewport and the value you want at the largest — typically in rem or px, such as 1rem at the min and 2.5rem at the max.
- 3
Read the generated clamp() expression, which combines a rem base with a vw slope, and copy it directly into your font-size, padding, margin, or gap.
- 4
Scrub the live preview across breakpoints to confirm the value tracks the way you expect between the min and max, and that it locks correctly at the extremes.
- 5
Adjust the endpoints if the mid-range slope feels too aggressive or too flat, then re-copy the updated declaration.
Where fluid clamp() earns its keep
Fluid type scales
Size headings and body copy so an h1 grows from, say, 2rem on mobile to 4rem on desktop without a single media query, keeping the whole type scale proportional across screens.
Responsive section spacing
Apply clamp() to padding and margin on sections and containers so vertical rhythm expands on large monitors and tightens on phones, replacing stacks of breakpoint overrides.
Container gaps and grids
Feed a clamp() value into gap on flex and grid layouts so gutters scale with the viewport, avoiding cramped columns on small screens and cavernous gaps on wide ones.
Design-token pipelines
Generate fluid values for a design system's spacing and typography tokens once, then reuse the exact clamp() strings in CSS custom properties across the whole codebase.
Practical clamp() guidance
- Keep the preferred term partly in rem, not pure vw. A value like clamp(1rem, 4vw, 2rem) fails WCAG 1.4.4 because pure viewport units ignore the user's zoom and font-size settings; mixing in a rem offset keeps text scalable and accessible.
- Set your min value from mobile reality: body text should rarely clamp below 1rem (16px), and headings should stay legible at 320px, the narrowest common viewport.
- clamp() is fully supported in all modern browsers (Chrome/Edge 79+, Firefox 75+, Safari 13.4+), so you generally do not need a fallback — but if you must support very old engines, declare a static value on the line above.
- Use rem for the fixed terms rather than px so the whole formula respects the root font-size and the user's browser preferences.
- Remember clamp() only interpolates linearly. If you want a non-linear type scale (a modular ratio, for instance), generate a separate clamp() per step rather than trying to force one expression to cover everything.
Common questions about CSS clamp()
What does the CSS clamp() function do?+
clamp(MIN, PREFERRED, MAX) returns the preferred value but clamps it so it never goes below MIN or above MAX. It lets a property scale fluidly within a range using a single declaration instead of multiple media queries.
How do I make fluid typography with clamp()?+
Set font-size to a clamp() where the preferred term mixes a rem base and a vw slope, for example clamp(1rem, 0.5rem + 1.5vw, 2rem). The text then scales smoothly with the viewport while staying within your defined minimum and maximum sizes.
Why should the middle value of clamp() include vw and rem instead of just vw?+
A pure vw preferred value doesn't respond to browser zoom or the user's default font size, which can trap text at an unreadable size and fail WCAG success criterion 1.4.4. Adding a rem term restores that user control while keeping the fluid behavior.
Do I still need media queries if I use clamp()?+
For continuous scaling of size and spacing, clamp() usually eliminates the media queries you'd otherwise write. You may still want media queries for non-scaling changes like altering layout, column counts, or swapping a font.
Is clamp() supported in all browsers?+
Yes. clamp() has been supported since Chrome and Edge 79, Firefox 75, and Safari 13.4, so it works in every current browser and the vast majority of installed ones without a fallback.
Can I use clamp() for spacing and gaps, not just font-size?+
Absolutely. clamp() works on any length property — padding, margin, gap, width, line-height and more — making it ideal for fluid spacing and responsive layout gutters in addition to typography.