Better fluid sizing with round()  Checkout The Layout Maestro interactive CSS course.

Switch to dark<br>Better fluid sizing with round()<br>Using the round() function to get a more predictable fluid sizing.

Table of contents

--> Introduction

Fluid sizing with clamp() and container query units is powerful, but the computed values often land on numbers like 19.7px or 143.2px. The CSS round() function lets you snap those values to a predictable step, which is useful for typography, spacing, and layout rhythm.

In this article, I’ll show the problem, how round() works, and some examples you can try in the demos.

The problem

While comparison functions provide us with a way to do fluid sizing, they can become quite annoying when used. For example, a designer might request for fluid sizing to be more predictable.

Let’s take the following example. We have a headline that has a fluid sizing with the clamp() function.

.title {<br>font-size: clamp(1rem, 1rem + 5cqw, 4rem);

Observing time!<br>Resize the container.

CSS is awesome

While resizing, the font size doesn’t follow a specific pattern, it just increases or decreases based on the container width. Nothing wrong here, it’s how the clamp() function works.

Let’s take another look at the same heading, but with the round() function applied.

Observing time!<br>Resize the following container and observe the font size. Is it better?

CSS is awesome

This is using the CSS round() function to round the clamped value down to the nearest 2px.

If the clamped value will change based on every resize of a component or a viewport, it can lead to inconsistent results when used with spacing, typography, and sizing properties (width, height).

Meet the round() function

round(), mod(), and rem()<br>Baseline 2024 newly available

Supported in Chrome: yes.

Supported in Edge: yes.

Supported in Firefox: yes.

Supported in Safari: yes.

Since May 2024 this feature works across the latest<br>devices and browser versions. This feature might not work in older<br>devices or browsers.<br>round(), mod(), and rem() on Web Platform Status

From its name, the round() function helps us round a value up or down to the nearest given step.

It takes the following arguments:

Mode: up, down, nearest, or to-zero.

The value to round

The interval (e.g.: 2px, 4px, etc)

Take the following example:

.title {<br>font-size: round(down, 15px, 2px);

This will round the font size down to the nearest 2px. I made the following demo where you can experiment with different values for the round modes and interval.

Observing time!<br>Some ideas to try:<br>Change the round mode, interval, and font size<br>Turn the rounding off

Font sizeRoundUp<br>Down<br>Off

Interval (px)Computed24px

CSS is awesome

Can this function really help in actual use cases? For example, what effect will it have on a complete layout? Say a card component.

In the following demos, I will showcase how it works with real examples.

Use cases and examples

Card component

In this demo, I used CSS clamp() for the font size. Keep in mind that cqw is used as per the card container.

.card {<br>container-type: inline-size;

.title {<br>--size: clamp(1rem, 1rem + 2cqw, 2rem);<br>font-size: var(--size);

The title font size for both cards is without round() . Toggle the checkbox to see what happens when round() is applied.

Observing time!<br>Notice the font sizes before applying round().<br>Apply round, and try to change the interval to 2, 6, or 8.<br>Resize the container while doing the above

Use round()<br>Interval<br>Learning how to steam milk<br>By Ahmad Shadeed

Learning how to steam milk<br>By Ahmad Shadeed

.title {<br>--size: clamp(1rem, 1rem + 2cqw, 2rem);<br>font-size: round(down, var(--size), var(--round-interval, 4px));

As you’ve noticed (in case you played with the demo above) the font sizes will follow the specified interval: 4, 8, 12, 16, 20, 24, 28, 32, etc.

This is very useful for UIs where we want to have predictability in the font sizes, spacing, and sizing properties.

Type scale

Another example is having consistent increments for a type scale. Take the following demo where we have five font sizes.

Without round(), the font sizes are not consistent, see the current values in the list below:

19.7px

27.7px

39.5px

55.5px

71.5px

Toggle the checkbox and see the change. The font sizes will round down to the nearest 4px.

Round font sizes

Hello, world!<br>Hello, world!<br>Hello, world!<br>Hello, world!<br>Hello, world!

Snap to line layout

In editorial layouts, we might need to snap a component to a specific line. Imagine having a striped line background, and we want to snap a square to the nearest line.

Observing time!<br>Take the following demo. We have a square that is aligned to the nearest line, right? Resize the container and observe the square. Does it stay aligned to the nearest line?

Let me explain.

The lines are a CSS gradient background with a full width and a fixed height. Notice the --base variable.

.content {<br>--base: 48px;<br>--line-color: rgba(0, 0, 0, 0.2);<br>background-image:...