A Quick Rant About Web Font Sizes

Author: Jake Bauer | Published: 2020-05-28

Once I discovered how font sizes actually work in CSS, sites that lock the font size by specifying it in some value of px annoy me to no end. I typically have my browser’s font size increased to 20px because I find the text crisper and way easier to read.

For that reason, I used the CSS max() property to set my website’s font size to max(18px, 100%) which essentially tells the browser to render the site at 18px or the font size that the user set in their browser settings if they set it to something higher than 18px.

I was recently thinking, though, that this rule is basically useless. I may as well just set the font size to 100% and let the user pick what font size they want to see my site in because different users have different preferences and different accessibility needs. Therefore, who am I to decide what size the text should be on my website for other people?

That’s my short rant on website font sizes. Just use some reasonable percent value (like 100%) and scale the rest of your font sizes based off of that. If choosing a specific font size is necessary to make text fit in some specific box or shape, consider scaling that whole element or re-designing it because it probably wasn’t going to be accessible anyways.

This is my thirty-second post for the #100DaysToOffload challenge. You can learn more about this challenge over at https://100daystooffload.com.