Chip Cullen

January 5, 2022

A quick pointer on something I just became aware of - that is, using viewport units (vw or vh) for font-size declarations presents an accessibility issue. It will actually prevent users from being to increase the size of text by zooming in or out.

/* don't do this */
font-size: 10vw;

Instead, pair it with a relative unit. If using it straight up like this, you can do so inside calc:

/* using calc - adjust as necessary */
font-size: calc(10vw + .5rem);

Or, if using with a function such as clamp, you don't need calc:

/* using clamp */
font-size: clamp(10rem, 10vw + .5rem, 16rem);

I want to dig into the best way to pair viewport units and relative units - but that's another post.