How To Use Css Clamp

Syntax

Returns the preferred value, bounded by min and max.

Fluid typography — the killer use case

Simple example:

The preferred-value formula

At 800px → 20px → within range → returns 20px.

Beyond typography

At 1200px → 30px → clamped down to 24px (1.5rem).

Using other units in clamp

The old way: media-query breakpoints.

clamp() vs media queries

Size grows smoothly with viewport. No jarring jumps at breakpoints. Less CSS.

Accessibility — minimum matters

The middle argument has to do some math: combine a viewport unit with a fixed offset so the value hits your min at a specific small viewport and your max at a specific large viewport.

Generator tools exist for a reason

Want font-size 16px at 320px viewport, 32px at 1280px viewport?

Browser support

Hero sections get more breathing room on desktop without crushing mobile.

Debugging clamp

Bookmark one — you’ll use it every time you build a fluid design system.

Common mistakes

Inspect the element in devtools. Chrome and Firefox show the computed value at current viewport and highlight the clamp expression. Adjust the window and watch it update.

Run the numbers