A quick pointer on something I just became aware of - that is, using viewport units (
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
/* using calc - adjust as necessary */ font-size: calc(10vw + .5rem);
Or, if using with a function such as
clamp, you don’t need
/* 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.