Here is how to set your fonts by the screen size / viewport size with CSS
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
These simple lines of CSS can give your site truly responsive text with just CSS:_
h1 { font-size: 6vw; } h2 { font-size: 3vh; } p { font-size: 2vmin; } p { font-size: 2vmax; }
For Example
6vw
6vh
6vmin
6vmax
Note that for exactness you can also use decimals like ‘font-size: 5.7vw;’.
Resize this page to see the above chnage size according to the area visible on screen.