clamp() and Fluid Sizing

clamp() lets one declaration replace many stepped media queries for numeric properties like font-size, padding, gap, and height.

Syntax

clamp(MIN, PREFERRED, MAX)

The browser picks:

• MIN when the preferred value would be too small
• MAX when the preferred value would be too large
• PREFERRED otherwise

Example:

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

On narrow screens the title stays at least 1.5rem. On wide screens it caps at 2.5rem. Between those bounds it grows with viewport width.

Why rem + vw together

A pure vw heading can become unreadably small on mobile or excessively large on ultrawide monitors. Combining rem with vw inside clamp() gives:

• Accessibility floor via rem minimum
• Layout ceiling via rem maximum
• Fluid growth via vw middle term

Font-size vs spacing mode

Font-size clamp affects text rhythm and line wrapping. Spacing clamp affects section gaps, hero padding, or component height.

Both use the same math, but preview differently:

• Font-size preview shows sample text at computed sizes
• Spacing preview shows bars or blocks at computed heights

Always preview at minimum, midpoint, and maximum viewport widths before shipping.

From design spec to CSS

Typical workflow:

1. Designer gives min and max px sizes for mobile and desktop.
2. Choose viewport range that matches your layout breakpoints.
3. Generate clamp(minRem, preferredRem + preferredVw, maxRem).
4. Copy CSS, a custom property, or SCSS variable into tokens.

Example output:

--heading-lg: clamp(1rem, 0.5rem + 2vw, 1.5rem);

When not to use clamp()

• Values that must snap exactly at one breakpoint for layout reflow
• Properties controlled by container queries with very different rules
• Cases where a simple rem token is enough

clamp() is best when you want smooth scaling between known bounds.

Key takeaway

Think of clamp() as bounded fluid sizing: minimum readable size, maximum design size, and viewport-driven growth in between.

Generate and preview clamp values in the CSS Unit Converter / Clamp Generator clamp tab before adding them to your stylesheet.