Comment by No One on "Scale font size according to screensize" | Hashnode

No One

code monkey

Mar 28, 2017

You could use the viewport units in css to scale the font. The units are vw for viewport width and vh for viewport height. Use these as units for your CSS font sizes where the number will correspond to a % of the viewport width (or height) like so:

p {
    font-size: 4vw;
}

Emil Moe

Senior Data Engineer

Mar 28, 2017

But won't I risk huge fonts in edge cases?

No One

code monkey

Mar 28, 2017

You shouldn't do as, in the above example, a font size of 4vw will always be 4% of the viewport width. If you did run in to such issues though you could probably do something with css media queries in conjunction with vw/vh to set specific break points.

Quique Borredá

Passionate about web since 1991

Mar 28, 2017

Of course, you are maybe better if that variable comes from a max-of that value and the minimum value for a decent readable font-size .. even thou at 320px wide, you'll get something like 12px font-size ..

Search Hashnode