A Brief Lesson on Legibility – What makes a font easy to read?

In recent weeks my evenings were filled with research into font legibility: what makes a font easy to read? I was disappointed though to find so much on readability: things such as color-contrast or font-sizing, but very little on legibility: what characteristics of an individual character determine wether it’s easy or hard to read?

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.

You might also like: The difference between a font & a typeface

Distinctiveness

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?

X-Height

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.

Whitespace

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 pick a legible and easy to read font.

Additional reading

I think the internet is a great place; there is so much information out there, and 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, 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.