How to make responsive font size in CSS?

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

• Twitter
• GitHub

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

Have a great day!