CSS clamp() Generator

Fluid sizing in a single property

clamp() takes three arguments: clamp(min, preferred, max). The browser uses the preferred value but never lets it drop below the minimum or rise above the maximum. For typography the preferred value usually mixes a fixed part with a viewport part, so the text grows smoothly as the window widens instead of jumping at each breakpoint. One line replaces a stack of media queries.

Why the units matter

The common trap is writing a preferred value with only a vw unit, like clamp(1rem, 5vw, 2rem). That technically works, but a user who zooms the page gets no change, because vw ignores zoom and font settings. Mixing a rem term in, such as 1rem + 2vw, keeps the text responsive to both the viewport and the reader's own font preferences, which matters for accessibility.

Example

h1 {
  /* min 1.5rem, scales with viewport, caps at 3rem */
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

At a 320px viewport the middle term computes to about 1.5rem, so the floor holds. Around 1400px it reaches the 3rem ceiling. Between those points the heading scales in a straight line with no breakpoints to maintain.

Pitfalls

Order is not enforced: if your minimum is larger than your maximum the result pins to the minimum, which looks like the value is stuck. Avoid clamping line-height to a viewport unit, since very wide screens then produce awkward gaps. For spacing you can clamp padding or margin the same way; pair it with a px to rem converter to pick sensible rem bounds.

FAQ

How do I find the right slope? Pick two viewport widths and the sizes you want at each, then solve for the vw coefficient and the fixed rem offset. Many generators do this algebra for you from the four numbers.

Does clamp() work outside font-size? Yes. It is valid anywhere a length is accepted: width, gap, padding, even border-radius.

What about older browsers? clamp() is supported across all current browsers. If you must support very old ones, provide a static fallback declaration before the clamp line.