patterncssTip

clamp() for fluid typography without media queries

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

clampfluid typographyvwresponsive fontviewportmath functions

Problem

Font sizes need to scale smoothly between a minimum and maximum based on viewport width, but using media queries creates abrupt size jumps.

Solution

Use clamp() with a viewport-relative middle value:

/* clamp(min, preferred, max) */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
  /* min: 1.5rem, scales with viewport, max: 3rem */
}

body {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
}

/* For spacing too */
.section {
  padding: clamp(1rem, 5vw, 3rem);
}

The formula viewport_value + rem_offset ensures the font never goes completely flat — the rem part preserves a base size even at zero viewport width.

Why

clamp() is a CSS math function that clamps a value between a min and max. The middle value (preferred) is typically a viewport-relative unit combined with a fixed unit to create smooth, proportional scaling.

Gotchas

Using only vw as the middle value (e.g. clamp(1rem, 4vw, 3rem)) causes the text to be 0 at zero viewport width — add a rem or px offset to prevent this.
clamp() can be used for any CSS property that accepts numeric values, not just font-size.
Test your clamp values at the min and max viewport widths to confirm the clamping takes effect where expected.

Context

Responsive typography systems that scale smoothly across all viewport sizes.

Revisions (0)

No revisions yet.