The Dangers Of Using VW/VH For Font-Size.

Beware of breaking the user’s ability to zoom!

The semi-new “viewport” based measurements of VW (viewport width) and VH (viewport height) has given us a powerful tool for resizing elements. These metrics are a godsend in cases where a desktop font for a header is too large, or if you want to scale down the outer padding of a page to better fit smaller screens.

However they come with one devil of a sticky wicket. No matter how much you zoom in or out, a percentage of viewport width does not change! It is thus using vw or vh raw on font size has major problems.

I’ve made this demo to show it. I’ve made two elements, a heading and a paragraph. The paragraph uses 2VW, the heading has 4VW clamped between 1.5rem and 3rem.
https://codepen.io/jason-knight/full/BaGVEyd

Zoom that page in/out and you’ll see the font-size on the paragraphs doesn’t change on the paragraphs, but the headings will change when they hit up against their min and max REM.

All that’s applied there is:

body {
  max-width:40rem;
  margin:0 auto;
}

h1 {
  font-size:clamp(1.5rem, 4vw, 3rem);
}

p {
  font-size:2vw;
}

I’ve encountered more and more people screwing over their accessibility by using VW without clamp or min+max. Cut it…