How to make responsive font size in CSS?

#css #tutorial #react #webdev

We usually talk about the Responsive design and images on the web. Have you are thought of making fonts, the core part of the website responsive? Don't worry if you haven't, in this article I will discuss how you can dynamically change the font size of any font on your website.

So let's get started

We usually set the font size of a font like this font-size: 80px;. Here the unit of the font size is pixel i.e px. Here's how it would look when you try to resize the font with unit px.

.container{
     font-size: 80px;
}

Let's make fonts responsive

To make them responsive, we have to deal with a new CSS unit called - vw. vw stands for viewport width which is relative to 1% width of the viewport.

Let's take the above example and change it's font-size to 5vw and let's see the magic 🤩

.container{
     font-size: 8vw;
}

Try resizing the browser window at this Pen

Conclusion

I hope this article was helpful to you! Thank you for reading!

Let’s connect

If you found my content helpful and would like to thank me, feel free to Buy me a coffee :)

Have a great day!

Top comments (4)

JoelBonetR 🥇 • May 7 '22 • Edited

Answering the question in the title:

You'll usually find yourself over-complicating your code adding extra media queries when using relative measurements for font-size property and still you (and your users) will face issues.

Why? Browsers deal with pixels in relation to the rendered pixels by the same browser.
That means that, on a phone, let's say a Google Pixel 5, which has 1080 x 2340 pixels, you'll see 393 x 851 pixels in your screen, that's due to the density (~432 ppi).

So when you declare:

font-size: 16px;

It will render properly and accordingly to the device rendering it and most important, it will take in mind the user preferences configured on the device.

i.e. When using pixels, if the user has the size configured at 125% on it's device, it will do something like calc(16px*125/100) = 20px.

Relative fonts on the other hand, rely on viewport size, hence ignore the device preference configuration.

In-page Zoom (Ctrl++) or (Ctrl+mouseWheel Up) also ignore zooming on relative sizes (you can test it in your own codepen).

Las but not least, 8vw means 8% of the viewport width, which means it will be afected by aspect ratio, thus behaving different in a desktop monitor (16:9) than in a smartphone in portrait (usually 9:19 to 9:21).

TL;DR:
Scaling on fonts is based on strict units and won't work on relative ones. Using relative units cause more problems than benefits, specially accessibility issues, you should not do that.

Hope it helps somehow,

See you!