Responsive Font Size (Optimal Text at Every Breakpoint)

Stepped Responsive Font Size

To achieve a stepped font size, we simply set the exact base font size that we want for each breakpoint. Here's what that looks like in CSS:

body {
    font-size: 16px;
}
@media (min-width:768px) {
    body {
        font-size: 18px;
    }
}
@media (min-width:1024px) {
    body {
        font-size: 19px;
    }
}
@media (min-width:1280px) {
    body {
        font-size: 20px;
    }
}

There are two problems with this method:

• The font size is only optimal at particular breakpoints, in between it might feel too big or too small.
• It's verbose. We have to explicitly set the font size for each breakpoint which requires a lot of CSS rules.

Fortunately, there's a simpler way.

Fluid Responsive Font Size

Rather than setting the font size at each breakpoint, we can create a formula to calculate our font size relative to the screen width. We do that with the calc() function.

calc() is supported in all modern browsers so it's safe and reliable to use (source).

Here's how our font size formula looks in CSS:

body {
    font-size: calc(15px + 0.390625vw);
}

This formula calculates our font size as 15px plus 0.00390625% of the screen width. These values have been specifically chosen because they result in the perfect font sizes at every breakpoint:

Fluid font sizes per breakpoint

This method is both simple and powerful.

Want an example? This website (that you're reading right now) uses exactly this method of achieving responsive font size. Adjust your browser window to see it in action!