CSS · Module 23 · Lesson 43 of 48

Responsive bounds (min, max, clamp)

What is the clamp() Function?

Imagine a telescope lens. You want the lens to zoom in and out as the user moves closer or further away. However, you want to set physical locks on the lens so it can never zoom in closer than 10x magnification (Minimum), or zoom out wider than 2x magnification (Maximum).

In CSS, clamp() is a responsive mathematical function that clamps a value between a defined minimum limit and a maximum limit relative to a fluid, scaling value: clamp([minimum], [fluid-value], [maximum])

E.g., font-size: clamp(1rem, 5vw, 3rem);

Why does it matter?

clamp() is the modern standard for fluid typography. By setting a font size to clamp(1rem, 5vw, 3rem);, the text will scale smoothly along with the screen width (5vw is 5% of viewport width). If the screen becomes extremely narrow, the text stops shrinking at 1rem. If the screen gets extremely wide, the text stops growing at 3rem, preventing awkward, oversized letters.

Syntax Breakdown

clamp(1rem, 5vw, 3rem) — Sets minimum font size to 1rem, preferred scaling size to 5vw, and maximum limit to 3rem.

Common Mistakes

Reversing minimum and maximum limits: Writing clamp(3rem, 5vw, 1rem) is invalid because the minimum limit is larger than the maximum limit, causing the browser to ignore the styling rule completely. Always write: clamp(min, preferred, max).

Quick Reference

clamp(min, preferred, max) — Clamps values within boundaries.

Fluid typography — Standard use case to scale text size smoothly.

Your Task

Configure the `h1` element font size dynamically using `clamp(1rem, 5vw, 3rem)`.

index.html

Type code above to start the lesson.

Live Preview