Screen Viewport Sized Fonts with CSS

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.

About the Author

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.