Jason Knight
1 min readJul 4, 2021

--

Excellent article, particularly since you address how one would/should set a minimum size. The problem is that we end up with a maximum size that's absurd for 4k, and you're working in PX which is accessibility junk, even as a minimum size. Remember, if you're thinking in pixels, somebody's not thinking.

min() and max() can come to the rescue on this.

font-size : min(0.875rem, max(2rem, 2vw));

0.875 REM being 14px for normal users, 18px for most "large" users, and 28px on my media center. :D

Again as you suggested, providing a fallback -- likely 1em -- beforehand for legacy UA's that can't do min/max.

Great article, but again I would get rid of any mention of PX apart from perhaps adding "don't use PX".

Of course if one uses EM in the first place, MOST of the time you don't need to play these silly viewport width games for anything but fancy effects and oversized headings.

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

Responses (1)