from BetterWebType, never disappoints every time he jolts a word down, and this article is no exception. It’s a long and thorough read, of which I’ll only summarise the main points, as per usual. For a more in-depth knowledge sourcing, check out the article in its entirety
I love this article — as a big supporter of both type and accessibility for all, this is on point with everything any designer (or anyone who makes heavy use of text on the web for any sort of communication) should be aware of. Matej makes the case well:
I think it’s safe to claim that a large part of website accessibility falls on typography, after all, web still is 95% typography1
. Viewers come to a website to read its content or just to find specific information they’re looking for. And most of that information and most of the content is communicated through text. […] This includes people with impaired vision, reading disorders, colour blindness or anything that can often prevent them from reading comfortably.
So what are his main 5 keys? Let’s begin.
Set your base font size in relative units
Why is it so important to set the base font size in relative units? I have to be honest, for a long time, I thought: what’s the point of setting the base font size to 100%? It usually just defaults to 16px anyway, so why not just set it to that? I later learned that it’s for one simple reason—the browser default font size.
This is huge, and here’s why:
Here’s the tricky part. Yes, most browsers agreed on the default size of 16 pixels, but the user can change that. Let’s say someone has an impaired vision and sets their browser’s default font size to something larger. Setting the base font size in our CSS to pixels will overwrite their browser default font size setting.
Check the colour of your type and only then its contrast
Checking the contrast of a text versus its background isn’t enough. A lot of web designers and developers just use a tool to check if the contrast of the two is high enough but it’s not that simple. We also need to make sure that the colour of our type is dark enough. This means that the font shouldn’t be too thin and that we should limit the font smoothing.
A good example is something known as type colour. While size and actual colour may look fine, the font itself may be too thin for display; and become rather illegible.