Skip to main content
CSS Tip

Fluid typography with discrete steps

Use the round() function and create a fluid typography with a discrete function instead of a continuous one.

Define the step and get precise values within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!

/* Instead of  */
p {
font-size: clamp(1rem,1rem + 3vw,2.5rem);
}
/* use */
p {
font-size: clamp(1rem,round(down,1rem + 3vw,2px),2.5rem);

/*
1rem = 16px | 2.5rem = 40px
we go from 16px to 40px with a 2px step
16px,18px,20px,22px,24px,..,38px,40px
*/


/* OR a more friendly syntax*/
--fluid: clamp(1rem,1rem + 3vw,2.5rem); /* the original function */
font-size: round(down,var(--fluid),2px);
}

See the Pen Fluid typography with steps by Temani Afif (@t_afif) on CodePen.


More CSS Tips