Fluid typography
fluid type, clamp(), fluid type scale, utopiaDefinition
Type that scales smoothly with the viewport or container instead of jumping at breakpoints — font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) — a minimum, a preferred value tied to a viewport or container unit, and a maximum, so that a heading is never too small on a phone or too large on a monitor and never changes size at an arbitrary width
The clamp() line is the whole technique; the craft is in the scale — a ratio between steps that holds at both ends — which tools like Utopia generate. Container units (cqi) make it per-component rather than per-viewport. Two cautions: a vw-only term ignores the reader’s zoom and font-size preference, so the rem term in the middle is not optional (accessibility, and a WCAG resize failure without it); and fluid type still wants a scale, or every heading ends up a bespoke number. The choose-your-sizes note on this site is where the scale is argued.
Breakpoints are where type used to lurch. Fluid type removes the lurch and leaves the decision that mattered: what the smallest and largest sizes should be.