responsive font-size

2024-04-02 CSS

Here are three simple lines of code to smooth sizing the root font size depends on the screen size.

:root {
    font-size: calc(1rem + 0.25vw);
}

You can also use 'clamp' to use the smooth sizing only between 380px and 1240px:

:root {
  --fluid-16-20: clamp(1rem, 0.8895rem + 0.4651vi, 1.25rem);
}

Source

❰ back