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