CSS Clamp Generator

Q: How does CSS clamp() work for font sizes?

The clamp() function takes three values — a minimum, a preferred (fluid) value, and a maximum. The browser uses the preferred value but never goes below the minimum or above the maximum, creating smoothly scaling typography without breakpoints.

Q: Should I use clamp() or media queries for responsive font sizes?

clamp() provides a single declaration that scales fluidly, while media queries snap between fixed sizes at breakpoints. Clamp is simpler and smoother for most typography use cases.

Set min/max font sizes across a viewport range; get a single font-size declaration using clamp(). Copy and paste.

Min font size

Max font size

Font unit

Min viewport width (px)

Max viewport width (px)

Precision (decimals)

Output

/* CSS will appear here */

Preview

Make type scale with viewport, safely. Try me—edit this text.

FAQ

How does CSS clamp() work for font sizes?

The clamp() function takes three values — a minimum, a preferred (fluid) value, and a maximum. The browser uses the preferred value but never goes below the minimum or above the maximum, creating smoothly scaling typography without breakpoints.

Should I use clamp() or media queries for responsive font sizes?

clamp() provides a single declaration that scales fluidly, while media queries snap between fixed sizes at breakpoints. Clamp is simpler and smoother for most typography use cases.

What happens if the minimum value is larger than the maximum in clamp()?

If the minimum exceeds the maximum, the minimum value wins and the font size stays fixed at that minimum. Always ensure your min value is smaller than your max.

CSS Clamp Generator

Output

Preview

Related Guides

CSS Functions Guide

Typography for Web Design

Media Queries Guide

FAQ

Get the Weekly Drop