clamp(): fluid type without breakpoints

A 2020 CSS function that killed media-query font-size

h1 { font-size: clamp(2rem, 4vw, 4rem); }

Read as: "min 2rem, max 4rem, preferred 4vw."

• Mobile (small viewport) — 4vw might be 1.6rem → clamps UP to 2rem.
• Desktop (large viewport) — 4vw might be 5rem → clamps DOWN to 4rem.
• In between — 4vw scales linearly with viewport width.

One declaration replaces:

h1 { font-size: 2rem; }
@media (min-width: 768px) { h1 { font-size: 3rem; } }
@media (min-width: 1280px) { h1 { font-size: 4rem; } }

How to pick the values

For a heading that should be 2-4rem:

clamp(2rem, 5vw + 1rem, 4rem)

The middle is a calc-like expression that crosses 2rem around 320px and 4rem around 1280px. Practical recipe:

min = your mobile size
max = your desktop size
preferred = (mobile + (desktop - mobile) * vw scale)

There are online calculators ("Fluid Type Scale Calculator") that compute these for you.

clamp() works for any length

Not just font-size:

.hero { padding: clamp(2rem, 8vw, 6rem); }
.container { width: clamp(320px, 90%, 1200px); }

Container that's at least 320px, at most 1200px, otherwise 90% of viewport. Replaces dozens of media queries.