Stepped Fluid Sizing in CSS with round() 📐
How round() and clamp() turn fluid sizes into precise steps that stay consistent with a strict design system.
We all love clamp() for making fonts and spacing smoothly responsive through fluid sizing. But it has a downside: at intermediate screen sizes, the browser produces messy fractional values like 23.419px. This often breaks a strict design system where every size has to be a multiple of, say, 8 pixels.
Ahmad Shadeed published a great breakdown of how to solve this pain point with the relatively new CSS function round().
The idea is to wrap clamp() in round() and specify a step interval. Instead of changing in a fuzzy, linear fashion, sizes now change in clear steps.
It looks something like this:
font-size: round(nearest, clamp(1rem, 5vw, 3rem), 4px);What this gives you in practice:
- Visual consistency: Text and block sizes round to steps the design system understands, for example, exact multiples of
4pxor8px. - Perfect synchronization: Adjacent elements that depend on screen width jump to their new breakpoints at the same time, avoiding visual misalignment midway through a fluid resize.
- Less work for subpixel rendering: No tiny bits of blur caused by fractional pixels.
If you’re all about a perfect UI and strict grids, this trick is definitely worth adding to your toolkit.