Skip to main content
  • Created:
  • Updated:
  • Author:
    Takeshi Takatsudo

clamp() for Fluid Sizing

The Problem​

Responsive design traditionally relies on media queries to change sizes at specific breakpoints. This creates abrupt jumps — a heading might be 2rem on mobile and suddenly 3rem on desktop. AI agents tend to generate multiple media queries for font sizes, padding, and widths, producing verbose CSS that is hard to maintain. The clamp() function solves this by creating smooth, fluid scaling between a minimum and maximum value with a single declaration and zero media queries.

The Solution​

The clamp() function takes three values:

clamp(minimum, preferred, maximum)
  • minimum — the smallest the value can be
  • preferred — a viewport-relative expression that scales fluidly
  • maximum — the largest the value can be

The browser uses the preferred value, but constrains it between the minimum and maximum. If the preferred value is less than the minimum, the minimum is used. If it is greater than the maximum, the maximum is used.

Code Examples​

Fluid Typography​

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

h2 {
  font-size: clamp(1.375rem, 0.875rem + 1.5vw, 2rem);
}

p {
  font-size: clamp(1rem, 0.875rem + 0.4vw, 1.25rem);
}

The heading scales smoothly from 1.75rem (on narrow viewports) to 3rem (on wide viewports). The 1rem + 2.5vw preferred value combines a fixed base with a viewport-relative portion, ensuring the text still scales when the user zooms.

Why rem + vw, Not Just vw​

/* Bad: pure vw ignores user zoom preferences */
h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

/* Good: rem + vw respects user zoom */
h1 {
  font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

Using only vw as the preferred value means the text does not scale when the user changes their browser zoom level (a WCAG accessibility requirement). Combining rem + vw ensures the text responds to both viewport width and zoom settings.

Calculating the Preferred Value​

To scale linearly from a minimum size at a minimum viewport to a maximum size at a maximum viewport:

slope = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - slope × minViewport
preferred = intercept(rem) + slope × 100(vw)

Example: Scale from 1.75rem at 320px to 3rem at 1280px:

slope = (3 - 1.75) / (80 - 20) = 1.25 / 60 = 0.02083
intercept = 1.75 - 0.02083 × 20 = 1.3334
preferred = 1.3334rem + 2.083vw

(Viewport widths converted to rem by dividing by 16: 320/16=20, 1280/16=80)

h1 {
  font-size: clamp(1.75rem, 1.333rem + 2.083vw, 3rem);
}

In practice, use a clamp calculator tool rather than computing by hand.

Fluid Spacing​

clamp() is not just for typography — use it for padding, margins, and gaps:

.section {
  padding-block: clamp(2rem, 1rem + 3vw, 5rem);
}

.card-grid {
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
}

.container {
  padding-inline: clamp(1rem, 0.5rem + 2vw, 4rem);
}
clamp(): Fluid Width with clamp()
clamp(): Fluid Padding with clamp()

Fluid Width Constraints​

.content {
  max-inline-size: clamp(30rem, 90%, 60rem);
}

The content area is at least 30rem wide, at most 60rem, and scales to 90% of the container in between.

Full Fluid Typography System​

:root {
  --text-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.875rem + 0.4vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
  --text-xl: clamp(1.5rem, 1.125rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(1.875rem, 1.25rem + 2vw, 3rem);
  --text-3xl: clamp(2.25rem, 1.25rem + 3vw, 4rem);

  --space-sm: clamp(0.5rem, 0.375rem + 0.4vw, 0.75rem);
  --space-md: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1rem + 1.5vw, 3rem);
  --space-xl: clamp(2rem, 1rem + 3vw, 5rem);
}

Replacing Media Queries​

/* Before: multiple breakpoints */
h1 {
  font-size: 1.75rem;
}
@media (min-width: 640px) {
  h1 { font-size: 2rem; }
}
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
  h1 { font-size: 3rem; }
}

/* After: one line, smooth scaling */
h1 {
  font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

Common AI Mistakes​

  • Using only vw as the preferred value. font-size: clamp(1rem, 3vw, 2rem) does not scale when users zoom their browser, violating WCAG 1.4.4. Always combine rem + vw in the preferred value.
  • Generating multiple media queries for font size when clamp() is simpler. A single clamp() declaration replaces 3-4 media queries and creates smoother scaling.
  • Getting the min and max reversed. If the minimum value is larger than the maximum, clamp() always returns the minimum. Triple-check that min < max.
  • Using px instead of rem for the min and max values. Using rem ensures the sizing respects user font-size preferences and zoom settings.
  • Not using clamp() for spacing. AI agents sometimes use clamp() for font sizes but still use media queries for padding, margin, and gap. All of these benefit from fluid scaling.
  • Overcomplicating the preferred value. The formula does not need to be pixel-perfect. clamp(1rem, 0.875rem + 0.5vw, 1.25rem) for body text is close enough — exact linear interpolation between specific viewport widths is rarely necessary.
  • Nesting clamp() inside calc() unnecessarily. clamp() already evaluates math expressions internally. calc(clamp(...)) is redundant.

When to Use​

clamp() is ideal for​

  • Font sizes that should scale smoothly between mobile and desktop
  • Section padding and margins that grow with the viewport
  • Container widths with flexible constraints
  • Gap values in grid/flex layouts
  • Any value that currently uses 2+ media queries to scale

Stick with media queries when​

  • You need to change a property to a completely different value (not just a scaled version)
  • You are toggling layouts, not scaling sizes (e.g., switching from a single column to a sidebar)
  • The scaling is not linear (e.g., the size should jump at a specific breakpoint)

Accessibility requirements​

  • Always use rem + vw in the preferred value, never vw alone
  • Test at 200% browser zoom to ensure text remains readable
  • Ensure body text stays within the 45-75 character line-length range across viewports

References​

Last updated on by Takeshi Takatsudo