How to Use CSS clamp() for Responsive Sizing

2 min read by Mohammad Shoeb

How to Use CSS clamp() for Responsive Sizing

CSS clamp() lets a value scale smoothly with the viewport while staying inside limits you set. You give it three values, clamp(MIN, PREFERRED, MAX), and the browser uses the preferred value but never drops below MIN or rises above MAX. That replaces a stack of media queries with one line.

How CSS clamp() works

The syntax is clamp(min, preferred, max). The browser computes the preferred value, then clamps it to the bounds:

  • If preferred is smaller than MIN, you get MIN.
  • If preferred is larger than MAX, you get MAX.
  • Otherwise you get the preferred value.

The trick is the preferred value. A fixed number like 1.5rem never scales, so you mix a fixed base with a viewport unit. For example, clamp(1rem, 0.5rem + 2vw, 2rem) starts near 1rem on small screens, grows as the viewport widens, and stops at 2rem. The vw part drives the fluid scaling, and the rem part keeps it grounded.

Fluid typography without media queries

The most common use is responsive font sizes. Instead of bumping font-size at three breakpoints, write one rule:

h1 {
  font-size: clamp(2rem, 1.5rem + 3vw, 4rem);
}

The heading is roughly 2rem on a phone, scales as the screen grows, and caps at 4rem on a wide monitor. No breakpoints, no jumps, just a smooth ramp between your two bounds.

Why you mix rem and vw

It is tempting to set the preferred value to pure viewport units, like clamp(1rem, 5vw, 2rem). Avoid that for text. A vw-only value does not respond to the user’s browser zoom or font-size preference, so people who zoom in for readability get no benefit. That is an accessibility problem.

Adding a rem component fixes it. Because rem is tied to the root font size, a value like 0.5rem + 2vw still grows when someone increases their default font size or zooms. Always keep a rem term in the preferred slot for anything readers need to read.

Good bounds matter too. Set MIN to the smallest size that stays legible on a phone, and MAX to the largest size that still looks balanced on a big screen. If the gap is too wide, the scaling feels extreme, so keep the range sensible.

Build a clamp() value step by step

The math for the preferred value is fiddly, so let the CSS clamp() Calculator do it:

  1. Open the CSS clamp() Calculator.
  2. Enter your minimum size and the viewport width where it should start.
  3. Enter your maximum size and the viewport width where it should stop.
  4. Copy the generated clamp(...) value straight into your CSS.

It runs entirely in your browser, so nothing you type leaves your device.

Set sensible bounds, keep a rem in the middle, and let one line of CSS do the scaling.

DesignCSSHow-to

← All posts