A Brief Lesson on Font Legibility
In recent weeks my evenings were filled with research into font legibility. I was disappointed though to find so much on readability, things such as color-contrast or font-sizing, but very little on legibility.
Legibility: How easy you can recognize and differentiate individual characters in the words you read. In other words: it’s about the design of the font.
Readability: This is about the typesetting as a whole. Contrast, line height, sizing, and so on.
After some research, I found three aspects of a legible type. Knowing these aspects will help you to pick a font that is easy to read, based on more than just your gut feeling.
Like I said in the introduction, individual character recognition is key to an easy-to-read font. A great (or bad perhaps) example here is Avant Garde, where the ‘o’, ‘e’, and ‘a’ look a lot like each other (see image below). Overall the double-storey ‘a’ is easier to read than the single-storey ‘a’. Other characters to keep your eye on are the ‘g’, ’s’ or ‘e’.
Note in the second image below the difference between Avant Garde and Meta Pro. In the 3rd image, you can see both in action. Which version do you prefer when used in a paragraph?
Fonts with small x-height are often a bit less easy to read. You can compare this using the trick below. Below I’ve compared the famous Helvetica Neue (which has improved legibility compared the original Helvetica), with Fira Sans.
Something that is probably already noticeable in the above winners, is the presence of whitespace around individual characters. This whitespace helps to differentiate. Some examples below illustrate the presence of whitespace, with Arial vs Meta Pro.
This whitespace in type is also called ‘aperture’ or ‘counters’. It refers to the open gaps in certain characters. Such as the loop from the ‘g’ or the open curves present in the ‘s’. The larger this space, the easier it is to recognize what character it is.
Some examples below that illustrate this pretty well.
I hope these simple tips will help you recognize a legible (easy to read) typeface.
I think the internet is a great place, there is so much information out there, there is always something new and interesting to discover or learn. And knowledge is power 😉 However, it’s rare to have a pleasant reading experience online these days, in my opinion. Medium does a great job in terms of its clean layout. But too often do I come across cluttered & crowded interfaces. Advertising left and right, flashing banners, related articles, cookie bars, sign-up pop-ups, and so on. It’s up to us, designers, to fix this. Let’s make browsing pleasant again, remove the clutter, and optimize the reading experience by picking a legible, easy to read, font.