Legibility and Readability in UX/UI Design – Two Peas in a Pod?

Have you ever visited a site where the design is nice, but you can’t help but wonder what the hell is going on with the text? It can either be too difficult to read because the choice of the typeface is way off, or the content itself is just not written in a way that is easy to understand. 

Well, we all know that it’s not enough for your UX/UI design to just look pretty. There has to be a clear logic and structure behind each decision we make. So, when it comes to dealing with written content in your design, you have to make sure that users can read and comprehend what’s written. 

You can stop here and think – Well, people don’t read on the web, so why is it important then? And I can tell you that yes, it is a known fact that people nowadays skim content online. And this is exactly why it’s important to communicate the tone and the quality of the content effectively and clearly to your users.

Because as the wise people over at the Nielsen Norman Group like to say, “People don’t want to waste time or effort online”. 

Still, none of this matters if users can’t physically distinguish and recognize what’s written on the site. So, keep this in mind when working on your designs.

Now, let’s take a closer look at the two terms – legibility and readability. They are used often interchangeably, but they differ from one another. And you should be aware of their differance and importance in UX/UI design.

What is legibility in UX/UI design?

Legibility measures whether people can see and distinguish one letter from another or words in a text. Whether a typeface is legible is determined by its visual design and the typographic choice you make. 

Okay, now we have the definition out of the way. Let’s see how you can be sure that the textual content you’re working with is legible. 

The best possible legible experience for your users

Let’s start with the choice of typeface since this is where most designers start when working with written content. As the Nielsen Norman Group mentions in their research findings, it is a good idea to make sure that you choose a clean typeface. 

A clean typeface

But, what does clean mean in this context? Well, it doesn’t matter if your choice is between a serif or sans serif to make it legible. That depends on the type of project or product you’re working on, the brand book, etc. 

Rather, a clean typeface means that it should not be a strangely shaped one.

For example, you should really avoid handwritten or gothic-style typefaces since they are really hard to read. 

For example, a typeface like Papyrus would be the wrong typeface choice for longer textual content. You already know why! It’s makes distinguishing letters and words really strenuous. And this in turn causes poor legibility. 

Above is an example of a handwritten typeface, which is really difficult to read. 

Big enough font size

Aside from the choice of typeface, you should make sure to use a font size that is big enough so it can be easily read by both older and younger users. The Nielsen Norman Group studies about font sizes and age groups found that bigger font sizes are greatly appreciated by both age groups. 

Bigger font sizes are really important for older users, but younger users also prefer not having to squint when reading. Of course, it’s always smart to provide your users with the option to change the font size so they can adjust it to their needs. You can also take a look on how your design should vary for different age groups.

Importance of contrast

And, of course, don’t forget to check the contrast between the text and the background. When in doubt, use a plain background instead of a busy one. This will make sure that your users can easily distinguish letters and words in a text.

If you use a plain background with enough contrast between the background and the text itself, users will be able to read what is written easily.

In the design on the left, you can see an example of poor contrast, bad typographic choice, and small font size. On the right, we have the improved version that ensures good legibility. The typeface is sans serif, and there is enough contrast between the text and background.

What is readability in UX/UI design?

Now that we know what legibility means and entails, let’s take a closer look at what readability is. 

Readability measures how complex the language and its structure are in the text. In general, it’s more difficult for users to read and understand complex sentences than simple ones. 

How should we, as designers, go about readability? Let’s take a look at some good practices when dealing with the content and structure of a written text in UX/UI design.

Short words and simple language

Since readability is all about the complexity and structure of the text, it’s important to use short words and simple language if we aim for a good readability. Basically, this means that you should try to avoid sounding too fancy and using made-up words. This is a good rule to go by unless being fancy is your brand’s voice, and your users are well aware of that. 

An example of a confusing error message. 

Does this mean that you have to sound boring? No, absolutely not. But to make sure that the point you’re trying to make is clear enough for your readers. If they don’t understand the text, what’s the point?

In addition to using shorter and less complex words, try to use shorter sentences as well. This has been found as a crucial factor for good UX writing in research studies conducted by the Nielsen Norman Group. Expressing your ideas in long and complex sentences puts a strain on users’ short-term memory. For example, even some of the sentences I’ve written above are really stretching it a bit thin regarding complexity. Lastly, it’s also a good idea to write your sentences in an active voice.

An example of an error message that is clearly written. 

A good rule of thumb for readability

In general, a good rule of thumb is to aim for an 8-grade reading level when your target audience is quite broad. Even if your target audience is more educated, try to aim for a reading level that is several steps lower than their educational level. This way you can make sure that your tone is matched your audience. 

And lastly, how you present the content is just as important as how it’s written. Studies about users’ reading patterns conducted by the Nielsen Norman Group have shown that chunking the content, styling keywords and headings, as well as using bulleted lists help users in making the text easier to understand.

Conclusion

We as designers work with various types of content so we need to know how to go about a certain type of content, in this case, written content. 

We’ve talked about legibility and readability because we need to know how to go about textual content and what is important to keep in mind when working with it. This helps us provide our users with a good experience when they’re using our products. 

Basically, try to:

• choose a good and clean typeface, 
• keep things simple, 
• make the content understandable and readable to a broader audience. 

Keeping these things in mind will make sure that your users can read, distinguish, and understand the written content of your digital product.