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!
Comments (0)