DEV Community

Cover image for The shortest way to achieve responsive font-size
Lakh Bawa
Lakh Bawa

Posted on • Edited on

The shortest way to achieve responsive font-size

Hello guys, hope you are doing well,

Today, I learned something that I was trying to achieve unconsciously for almost 2 months.

Coming to the point, here is the shortest path to achieving responsive font-size in CSS, I have tested it and used it, so no a big problem here.

.quickbar {
font-size: calc(0.9rem + 1vmin);
}

Enter fullscreen mode Exit fullscreen mode

I have used rem as font size unit, you can use a pixel or anything you want.

here is the definition of terms used above, in case you are not aware of those.

vmin is the minimum between the viewport's height or width in percentage depending on which is smaller
Enter fullscreen mode Exit fullscreen mode

Live demo:

https://codepen.io/csuwildcat/pen/qOqVNO

References:

https://stackoverflow.com/a/32805276

Top comments (1)

Collapse
 
bdelespierre profile image
Benjamin Delespierre

Good to know. Plus calc has an amazingly good support : caniuse.com/#search=calc