CSS clamp() Examples for Font Size, Spacing, Gap and Width

How to read these CSS clamp examples

Each example uses three values: a minimum, a preferred expression and a maximum. Values between the bounds change fluidly with viewport width; values beyond the bounds stop at the limit. Treat the values below as starting points, not universal design tokens. Test them with your font, content and layout.

The preferred terms shown are illustrative. Use a CSS clamp calculator to generate the middle expression from the exact endpoints you want in your project.

1. Font size: fluid heading and body

.hero-title {
  font-size: clamp(2.75rem, calc(1.8rem + 3.5vw), 5rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

body {
  font-size: clamp(1rem, calc(0.96rem + 0.18vw), 1.125rem);
  line-height: 1.7;
}

Headings often need a wider scale than body copy. Preview the longest heading and check where its line breaks occur. Keep body text readable and avoid making every size fluid just because the function exists.

2. Section padding and component gap

.section {
  padding-block: clamp(3rem, calc(1.5rem + 4vw), 6.5rem);
  padding-inline: clamp(1rem, calc(0.5rem + 2vw), 2.5rem);
}

.card-grid {
  gap: clamp(0.75rem, calc(0.45rem + 1vw), 1.75rem);
}

Fluid spacing can reduce wasted space on small screens while leaving comfortable breathing room on wide screens. Make sure large padding does not squeeze the content column and small gaps still preserve separation.

3. Margin, width and border radius

.content-panel {
  width: min(100%, clamp(18rem, 70vw, 68rem));
  margin-inline: auto;
}

.feature-panel {
  border-radius: clamp(0.5rem, calc(0.3rem + 0.6vw), 1rem);
}

Width expressions often combine clamp with min(), max() or container constraints. Confirm the property allows the units you use and the result doesn't exceed its parent. Border radius can scale subtly, but it rarely needs a dramatic range.

4. When a media query is still the right tool

Don't try to solve a structural layout change with a fluid scalar. A three-column card grid may use clamp for its gap, while media queries decide when it becomes two columns or one. A header may use fluid logo sizing while a breakpoint changes its navigation pattern.

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
@media (max-width: 48rem) {
  .grid { grid-template-columns: 1fr; }
}

5. A practical test checklist

• Check the minimum, maximum and at least three intermediate widths.
• Test long headings, long words, translated content and user-generated text.
• Verify 200% zoom and a larger root font size.
• Check that padding or width does not cause horizontal overflow.
• Keep generated declarations consistent with your token and naming strategy.
• Use browser devtools to inspect computed values when a result behaves unexpectedly.

For the arithmetic behind the preferred term, read the CSS clamp calculator guide. For typography-specific choices, read fluid typography with clamp().