TheoryA Brief Lesson on Font Legibility

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.

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?

Legibility example 1
Legibility Example Font
Legibility example

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.

Meassure x-height font
Draw lines on the baseline and the cap height. After that, adjust the font size of the second word to align the baseline and the cap height.
Legibility Example Font

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.

Legibility Example Font

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.

Aperture & Open Counters
Meta Pro, Avant Garde & Helvetica Neue
Aperture & Open Counters
Meta Pro, Axiforma, Arial
Legibility Example Font
Meta Pro, Din 2014, Akzidenz Grotesk

I hope these simple tips will help you recognize a legible (easy to read) typeface. 

Aditional reading

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll up Drag View