Fluid Typography Scale with clamp() CSS

A short article set in six sizes, from a display heading down to a caption. Resize the window and every size slides between its phone value and its desktop value without a single breakpoint, so the text never jumps at an arbitrary width.

Each step is a custom property built with clamp. The first argument is the smallest size, the last is the largest, and the middle one is a preferred size that mixes a rem base with a slice of the viewport width. The rem part is what keeps the scale honest. A pure vw value would ignore the visitor's font size setting, while the mix keeps the text growing with the viewport and still respecting browser zoom.

The properties are defined once on the root, so adjusting the whole hierarchy means editing six lines rather than hunting through media queries.