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
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
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.