What does CSS clamp() do?

clamp() sets a value that scales fluidly between a minimum and maximum. The syntax is clamp(min, preferred, max). The browser uses the preferred value unless it falls outside the min/max boundaries.

How do I use clamp() for responsive font sizes?

Use clamp(1rem, 2.5vw + 0.5rem, 2rem) — the text starts at 1rem minimum, scales with viewport width, and caps at 2rem. The vw + rem combination prevents text from becoming unreadably small.

Is CSS clamp() supported in all browsers?

Yes. clamp() is supported in Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+. It has had universal browser support since 2020.

How to Use CSS clamp() for Responsive Typography

📐

Try CSS Clamp Calculator

Free, no signup →