Fluid Typography with progress() – Master.dev Blog

Fluid typography using pre-calculated clamp() values has a hidden flaw: converting viewport breakpoints to rems makes them sensitive to the user's root font size, potentially shrinking text when users increase their base font size. The solution is to keep calculations in CSS using range mapping with the new progress() function, which accepts mixed units and returns a unitless 0–1 value representing the viewport's position within a defined range. This allows pixel-based breakpoints and rem-based font sizes to coexist correctly. The post walks through building a full typographic scale using this approach, with options for pure CSS, Sass loops, or per-element custom properties. It also previews future CSS features like @function and calc-mix() that will make this pattern far more concise. Browser support caveat: progress() is not yet supported in Firefox.