Fluid type with clamp()

The three arguments

clamp(MIN, PREFERRED, MAX) returns PREFERRED clamped to the [MIN, MAX] range. Give the preferred value a viewport unit — clamp(1.5rem, 4vw, 3rem) — and the size tracks the window between a 1.5rem floor and a 3rem ceiling. Below the floor and above the ceiling it goes flat, so text stays legible on a phone and never becomes absurd on a 4K monitor.

Add a constant so it never stalls

Pure vw has an accessibility trap: zooming the page changes rem but not vw, so a 4vw-only size can ignore user zoom. Mix in a rem constant with calc() — clamp(1rem, 0.5rem + 2vw, 2rem) — and the size keeps responding to zoom while still flowing with the viewport. The constant also tunes the slope: a bigger rem term lifts the whole curve.

min() and max() are the same idea, halved

max(MIN, val) enforces only a floor; min(MAX, val) enforces only a ceiling. width: min(100%, 60ch) is the canonical readable-measure trick — full width on small screens, capped at 60 characters on large ones. clamp(a, b, c) is exactly max(a, min(b, c)).

Fluid spacing, not just type

These functions work on any length, so the same pattern fluidly scales padding, gap, and margin. Define a few spacing steps as custom properties — --space-m: clamp(1rem, 3vw, 2rem) — and your whitespace breathes with the screen in lockstep with the type.