CSS clamp() for fluid typography and responsive spacing

CSS clamp() lets you set a minimum value, a preferred flexible value, and a maximum value. The browser chooses the flexible value when it fits, but never lets it go below the minimum or above the maximum.

Without clamp(), responsive font sizes and spacing often need multiple media queries. With clamp(), one line of CSS can create a heading, margin, padding, or layout gap that scales smoothly across screen sizes.

The order is always minimum, preferred, maximum.

font-size: clamp(minimum, preferred, maximum);

This heading will never be smaller than 2rem, prefers 6vw, and never grows larger than 4.5rem.

h1{
  font-size:clamp(2rem, 6vw, 4.5rem);
}

This is one of the best uses for clamp(). It keeps large headings from being too small on desktop or too huge on mobile.

<h1 class="fluid-title">Fluid headline</h1>

<style>
.fluid-title{
  font-size:clamp(2.1rem, 7vw, 5rem);
  line-height:1.05;
  letter-spacing:-0.04em;
}
</style>

You can also use clamp() for body text, but keep the range subtle so the text stays readable.

.article-body{
  font-size:clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  line-height:1.65;
}

clamp() is not only for text. It works well for padding, margin, gap, width, and other length values.

.section{
  padding-block:clamp(32px, 8vw, 96px);
  padding-inline:clamp(16px, 4vw, 48px);
}

.card-grid{
  display:grid;
  gap:clamp(14px, 3vw, 32px);
}

This card uses clamp() for padding, title size, paragraph size, and spacing.

<article class="fluid-card">
  <h2>Responsive card</h2>
  <p>This card scales smoothly without a stack of media queries.</p>
</article>

<style>
.fluid-card{
  border:2px solid #111;
  border-radius:18px;
  padding:clamp(16px, 4vw, 36px);
}

.fluid-card h2{
  font-size:clamp(1.4rem, 3vw, 2.4rem);
  line-height:1.1;
  margin:0 0 clamp(8px, 2vw, 18px);
}

.fluid-card p{
  font-size:clamp(1rem, 1.5vw, 1.15rem);
  line-height:1.6;
  margin:0;
}
</style>

A plain viewport value like 6vw works, but it can scale too aggressively. A mixed value often feels smoother because it combines a fixed base with a flexible viewport amount.

/* Simple but sometimes too aggressive */
font-size:clamp(2rem, 6vw, 4rem);

/* Often smoother */
font-size:clamp(2rem, 1.2rem + 4vw, 4rem);

clamp() also works nicely with container query units like cqw. This lets text respond to the container width instead of the full viewport width.

<div class="headline-wrap">
  <h2>Container-based fluid text</h2>
</div>

<style>
.headline-wrap{
  container-type:inline-size;
}

.headline-wrap h2{
  font-size:clamp(1.5rem, 8cqw, 3rem);
}
</style>

Fluid headings, responsive body text, hero sections, spacing systems, layout gaps, card padding, button padding, image widths, section spacing, and components that should scale smoothly between mobile and desktop.

Media queries are good when the layout needs to change at specific breakpoints. clamp() is good when a value should scale smoothly between a minimum and maximum. They can work together, but clamp() often reduces the number of small typography and spacing breakpoints you need.

Container queries change styles based on the size of a container. clamp() creates a flexible value between limits. They work well together when you want components that adapt to their container and also scale smoothly.

Use clamp() when a CSS value should grow and shrink fluidly but stay inside safe limits. It is especially useful for headings, spacing, gaps, and card padding.

CSS clamp() handles fluid values. CSS container queries handle component-based responsive styling. content-visibility helps browsers skip rendering work. ResizeObserver gives JavaScript access to element size changes.

If you need component-based responsive styling, read the CSS Container Queries guide. If you want to improve long-page rendering, read the content-visibility guide. If JavaScript needs to detect element size, read the ResizeObserver guide.

Read the full reference on MDN Web Docs.

fluid typography, CSS min max, responsive spacing, modern CSS grid, subgrid, logical properties, and viewport units would all connect well to this topic.