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 :)

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Have a great day!