What is Readability in UX Design?

Why is Readability Vital in UX Design?

In user experience design and user interface (UI) design, readability’s an essential but often misunderstood concept. It refers to how easily users can not just perceive but understand the text they find on a digital platform, too. It’s different from legibility—which refers to how easy it is for someone to distinguish one letter from another in a particular typeface—and distinguish and recognize characters and words.  

As a concept, readability has a wider span than legibility. It covers how comfortably readers can decipher and process what a designer presents on a screen, and make sense of the intended message. So, readability in UX design isn’t just about making text legible for target users. It’s also about how designers present information to users and how users understand it. Like other aspects of user-centered design, it involves a delicate balance—in this case, of accessibility, legibility and comprehensibility.  

Even so, legibility is a vital part of readability. Users must first be able to clearly make out the text that they’re going to have to process. Typography primarily influences this aspect of design—and it’s helpful to know the anatomy of type to assist design choices. A good choice of typography and fonts is one of the most important design decisions behind a digital product. For the best legibility, designers should use a large default font size, make sure there’s high contrast between text and its background, and pick a clean typeface.  

The clarity of individual characters is crucial. Factors like x-height, kerning, weight and the presence of serifs or sans serif fonts are what typically determine how clear things are. These elements make up the design of the typeface and the shape of the glyphs—things that are essential for users to make out one letter from another. 

Author, Assistant Professor and Designer, Mia Cinelli explains crucial points about typography in this video: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:34Type has anatomy because letterforms, which  is just the design of any particular letter or character, they have different terms that we  use to give specificity to parts of a typeface in the same way that we do for people. And so, a serif would be part of the anatomy as would things like a shoulder or a stem or a counter. So, a counter, for instance, is the open space that exists within any letterform, like on
2. 00:00:34 --> 00:01:00a lowercase b, for instance, or a lowercase p. Something like a lowercase e, the counter on that is called an "eye". The dot of an eye is called a "dot" but is also called a "tittle". So, that has a really particular name to it and that's really helpful for people working both in typography and type design so that we have particular terms we can use because, otherwise, we're pointing at letters going, "You know – the curvy bit." and that's not particularly helpful
3. 00:01:00 --> 00:01:09in denoting what we mean or how we want to design things or what typeface we want to choose. So, yeah, type has anatomy and it's important to learn.

In digital designs such as web pages, a web designer’s choice of typography, how they use space and the overall visual hierarchy to boost the content’s clarity and accessibility are vital. These are the ingredients of a user’s reading experience in terms of how the content actually looks. Designers also need to choose the best words and terms for their content. Both aspects are about how to create and present text such as website copy optimally. This includes correct spelling, punctuation and attention to detail with grammar. 

For good readability in design, it takes a solid understanding of users’ comprehension needs for designers to be sure their users can quickly digest written content. Since users’ satisfaction and engagement firmly depend on this, all users—including those with visual impairments—should be able to navigate and understand digital content—and do it efficiently. That’s why doing user research is a vital part of the design process. From solid research, designers can appreciate what users experience—and expect—in their user flows throughout their contact with a brand and its digital solution or service. 

UX Strategist and Consultant, William Hudson explains important aspects of user research in this video: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:30User research is a crucial part of the design process. It helps to bridge the gap between what we think users need and what users actually need. User research is a systematic process of gathering and analyzing information about the target audience or users of a product, service or system. Researchers use a variety of methods to understand users, including surveys, interviews, observational studies, usability testing, contextual inquiry, card sorting and tree testing, eye tracking
2. 00:00:30 --> 00:01:02studies, A-B testing, ethnographic research and diary studies. By doing user research from the start, we get a much better product, a product that is useful and sells better. In the product development cycle, at each stage, you’ll different answers from user research. Let's go through the main points. What should we build? Before you even begin to design you need to validate your product idea. Will my users need this? Will they want to use it? If not this, what else should we build?
3. 00:01:02 --> 00:01:31To answer these basic questions, you need to understand your users everyday lives, their motivations, habits, and environment. That way your design a product relevant to them. The best methods for this stage are qualitative interviews and observations. Your visit users at their homes at work, wherever you plan for them to use your product. Sometimes this stage reveals opportunities no one in the design team would ever have imagined. How should we build this further in the design process?
4. 00:01:31 --> 00:02:00You will test the usability of your design. Is it easy to use and what can you do to improve it? Is it intuitive or do people struggle to achieve basic tasks? At this stage you'll get to observe people using your product, even if it is still a crude prototype. Start doing this early so your users don't get distracted by the esthetics. Focus on functionality and usability. Did we succeed? Finally, after the product is released, you can evaluate the impact of the design.
5. 00:02:00 --> 00:02:15How much does it improve the efficiency of your users work? How well does the product sell? Do people like to use it? As you can see, user research is something that design teams must do all the time to create useful, usable and delightful products.

To make sure there’s a high degree of readability, designers must fine-tune the complexity of the words and sentence structures that appear on—and that describe—their products or services. The aim here is to make the content flow smoothly and be easy to understand. The interplay between legibility and readability is a critical factor behind creating user-friendly interfaces. Designers have to think about both aspects to make sure that all users—no matter their reading skills or visual abilities—can interact with the content comfortably and effectively.  

For mobile app and web design readability, it’s vital for designers to create and present content that’s both highly inclusive and accessible. They’ve got to make digital environments more welcoming and easier to navigate for a diverse audience. As far as inclusivity goes, good readability makes sure that digital content is accessible to people with disabilities and from many backgrounds. Consider users with visual impairments, as well as dyslexia and varying language abilities. When designers factor these aspects into their design work and use appropriate wording and terminology, they can help build an inclusive environment. From there, they can reach a wider audience as well as meet legal accessibility standards. What’s more, they can prove that their brands can identify better with a wide range of users’ needs. 

Watch this video to understand the need to design with accessibility in mind: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:30Accessibility ensures that digital products, websites, applications, services and other interactive interfaces are designed and developed to be easy to use and understand by people with disabilities. 1.85 billion folks around the world who live with a disability or might live with more than one and are navigating the world through assistive technology or other augmentations to kind of assist with that with your interactions with the world around you. Meaning folks who live with disability, but also their caretakers,
2. 00:00:30 --> 00:01:01their loved ones, their friends. All of this relates to the purchasing power of this community. Disability isn't a stagnant thing. We all have our life cycle. As you age, things change, your eyesight adjusts. All of these relate to disability. Designing accessibility is also designing for your future self. People with disabilities want beautiful designs as well. They want a slick interface. They want it to be smooth and an enjoyable experience. And so if you feel like
3. 00:01:01 --> 00:01:30your design has gotten worse after you've included accessibility, it's time to start actually iterating and think, How do I actually make this an enjoyable interface to interact with while also making sure it's sets expectations and it actually gives people the amount of information they need. And in a way that they can digest it just as everyone else wants to digest that information for screen reader users a lot of it boils down to making sure you're always labeling
4. 00:01:30 --> 00:02:02your interactive elements, whether it be buttons, links, slider components. Just making sure that you're giving enough information that people know how to interact with your website, with your design, with whatever that interaction looks like. Also, dark mode is something that came out of this community. So if you're someone who leverages that quite frequently. Font is a huge kind of aspect to think about in your design. A thin font that meets color contrast
5. 00:02:02 --> 00:02:20can still be a really poor readability experience because of that pixelation aspect or because of how your eye actually perceives the text. What are some tangible things you can start doing to help this user group? Create inclusive and user-friendly experiences for all individuals.

How Does Design Affect Readability?

In design work, here are some factors that affect readability: 

1. Vocabulary and User Comprehension

The choice of vocabulary is vital in UX design. When designers use words that resonate with the user's reading level, users understand the message better and it comes across much more effectively.  

2. Inverted Pyramid Style

To adopt an inverted pyramid style to deliver content can greatly boost readability. Designers show the most crucial information first. They then follow it with important details—and end with background information. This structure helps users to get the essential points quickly. That’s particularly beneficial in digital environments—like mobile apps and websites—where attention spans run shorter.  

3. Text Layout and Scanning

The physical layout of text plays a critical role in readability, and when designers break up large blocks of text into smaller paragraphs of two to three sentences, and use left-aligned text rather than center-aligned, they make it easier for users to scan and read. This layout caters to how users typically consume digital content. They often just skim digital content rather than read it in depth.  

4. Consistency in Design Elements

When designers keep consistent across design elements such as images, headers, buttons and menus, it not only strengthens brand identity. It also raises the readability of content. A unified and cohesive look is something that helps to make a seamless user experience on digital products—and users have an easier time navigating and interacting with the content. 

What are the Benefits of High Readability in UX Design?

Like good readability in graphic design and document production, a high degree of readability in UX and UI design: 

1. Improves User Engagement and Comprehension

High readability greatly boosts user engagement and comprehension. When users can easily read and understand content, they’re more likely to stay engaged. This leads to a deeper understanding and retention of the information they encounter.  

2. Enhances Understandability of Content

Clear and concise content that users can easily read raises the overall understandability of that content. This lets users absorb and interpret information without any unnecessary complexity or confusion getting in the way.  

3. Facilitates Recognition of Characters and Words

Good readability is something that helps users smoothly recognize characters and words. That’s a vital factor for effective communication and interaction with digital content—especially so when many users scan what they find.  

4. Increases User Satisfaction

When users find content that they can easily read and navigate, their overall satisfaction with the digital experience goes up. This can lead to higher retention rates and positive user feedback—also including the trust they’ve got in the brand.  

5. Improves SEO

Search engines favor websites that offer content that’s clear and easy to read. High readability scores make for better SEO rankings. This makes the content more discoverable and accessible to a broader audience.  

6. Encourages Memorability Through Consistent Design Choices

Consistent design choices in typography, spacing and layout also make for high readability. This—in turn—helps make the content memorable. Users are more likely to recall information they’ve encountered in a format that’s easy for them to digest. 

7. Reduces Cognitive Load for Users

Well-structured content that users can easily read lightens the cognitive load on them. Users can navigate through information effortlessly and without feeling overwhelmed. 

8. Helps Users Perform Intended Actions After Reading the Text

High readability helps make sure users are clear about the actions they’ve got to take after they read the text. These could be to fill out a form, sign up for a newsletter or make a purchase. This clarity is something that can greatly improve conversion rates.

9. Impacts Users’ Decision Making

Good readability means users get to read and understand content—efficiently—and helps influence their decision-making process in a good way. Poor readability, though, might lead users to abandon the content—leading to higher bounce rates.  

How to Create and Organize Content for the Best Readability

To make the most readable content in their visual designs, designers should adopt some strategies to make and present text best for their target audiences. This involves aspects of legibility. Here are some screen and document design techniques and tips to improve readability: 

1. Do Strong UX Research 

It might seem obvious, but it’s vital for a designer to know who they’re writing for. While their efforts to make content accessible have more general guidelines, designers really do need to pinpoint their target audience. That’s how they can assess the most suitable type of content—including the brand voice. For example, users with a particular industrial background may be familiar with terms that might confuse more general users who’re used to more informal content—like blog posts. In any case, it’s important to strive for good readability. So, it’s helpful to create user personas that accurately reflect the likely audience. 

Watch as Author and Human-Computer Interaction Expert, Alan Dix explains personas: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:34Personas are one of these things that gets used  in very, very many ways during design. A persona is a rich description or description of a user. It's similar in some sense, to an example user, somebody that you're going to talk about. But it usually is not a particular person. And that's for sometimes reasons of confidentiality.
2. 00:00:34 --> 00:01:02Sometimes it's you want to capture about something slightly more generic than the actual user you talked to, that in some ways represents the group, but is still particular enough  that you can think about it. Typically, not one persona, you usually have  several personas. We'll come back to that.   You use this persona description, it's  a description of the example user,   in many ways during design. You can ask  questions like "What would Betty think?"
3. 00:01:02 --> 00:01:35You've got a persona called / about Betty, "what would  Betty think" or "how would Betty feel about using this aspect of the system? Would Betty understand this? Would Betty be able to do this?"   So we can ask questions by letting those personas  seed our understanding, seed our imagination.   Crucially, the details matter here. You want to make the persona real. So what we want to do is take this  persona, an image of this example user,   and to be able to ask those questions: will  this user..., what will this user feel about  
4. 00:01:35 --> 00:02:01this feature? How will this user use this system  in order to be able to answer those questions?  It needs to seed your imagination well enough.  It has to feel realistic enough to be able to   do that. Just like when you read that book  and you think, no, that person would never   do that. You've understood them well enough that  certain things they do feel out of character. You need to understand the character of your  persona.
5. 00:02:01 --> 00:02:30For different purposes actually, different levels of detail are useful. So I'm going to sort of start off with   the least and go to the ones which I think are  actually seeding that rich understanding.  So at one level, you can just look at your  demographics. You're going to design for warehouse   managers, maybe. For a new system that goes into  warehouses. So you look at the demographics, you might have looked at their age. It might be that on the whole that they're   older. Because they're managers, the older end. So  there's only a small number under 35. The majority  
6. 00:02:30 --> 00:03:01are over 35, about 50:50 between those who are in  the sort of slightly more in the older group.  So that's about 40 percent of them in  the 35 to 50 age group, and about half   of them are older than 50. So on the whole  list, sort of towards the older end group.   About two thirds are male, a third are female.  Education wise, the vast majority have not got   any sort of further education beyond school. About 57 percent we've got here are school.  
7. 00:03:01 --> 00:03:34We've got a certain number that have done basic  college level education and a small percentage   of warehouse managers have had a university  education. That's some sense of things.   These are invented, by the way, I should say, not  real demographics. Did have children at home. The people, you might have got this from some big  survey or from existing knowledge of the world,   or by asking the employer that you're  dealing with to give you the statistics.   So perhaps about a third of them have got children  at home, but two thirds of them haven't. 
8. 00:03:34 --> 00:04:05And what about disability? About three  quarters of them have no disability whatsoever.   About one quarter do. Actually, in society  it's surprising. You might... if you think   of disability in terms of major disability,  perhaps having a missing limb or being   completely blind or completely deaf. Then you start relatively small numbers.   But if you include a wider range of disabilities,  typically it gets bigger. And in fact can become  
9. 00:04:05 --> 00:04:32very, very large. If you include, for  instance, using corrective vision with   glasses, then actually these numbers  will start to look quite small.  Within this, in whatever definition they've  used, they've got up to about 17 percent with   the minor disability and about eight percent  with a major disability. So far, so good. So now, can you design for a  warehouse manager given this? Well,  
10. 00:04:32 --> 00:05:01you might start to fill in examples for  yourself. So you might sort of almost like   start to create the next stage. But it's hard. So let's look at a particular user profile. Again,   this could be a real user, but let's imagine  this as a typical user in a way. So here's Betty Wilcox. So she's here as a typical user.  And in fact, actually, if you look at her, she's   on the younger end. She's not necessarily the  only one, you usually have several of these.  And she's female as well. Notice only up to  a third of our warehouse ones are female. So  
11. 00:05:01 --> 00:05:31she's not necessarily the center one. We'll come  back to this in a moment, but she is an example user. One example user. This might have been  based on somebody you've talked to, and then you're sort of abstracting in a way. So, Betty Wilcox. Thirty-seven, female, college education. She's got children at home, one's  seven, one's 15. And she does have a minor disability, which is in her left hand. And  it's there's slight problem in her left hand.  
12. 00:05:31 --> 00:06:00Can you design, can you ask, what would Betty  think? You're probably doing a bit better at   this now. You start to picture her a bit. And you've probably got almost like an image   in your head as we talk about  Betty. So it's getting better.   So now let's go to a different one. You know, this  is now Betty. Betty is 37 years old. She's been a   warehouse manager for five years and worked for  Simpkins Brothers Engineering for 12 years. She didn't go to university, but has studied  in her evenings for a business diploma.
13. 00:06:00 --> 00:06:31That was her college education. She has two children  aged 15 and seven and does not like to work late.   Presumably because we put it  here, because of the children.   But she did part of an introductory  in-house computer course some years ago.   But it was interrupted when she was promoted,  and she can no longer afford to take the time.   Her vision is perfect, but a left hand movement,  remember from the description a moment ago,   is slightly restricted because of an  industrial accident three years ago. 
14. 00:06:31 --> 00:07:04She's enthusiastic about her work and  is happy to delegate responsibility   and to take suggestions from the staff. Actually,  we're seeing somebody who is confident in her   overall abilities, otherwise she wouldn't  be somebody happy to take suggestions.   If you're not competent, you don't. We sort of see that, we start to see a   picture of her. However, she does feel threatened  – simply, she is confident in general – but she   does feel threatened by the introduction of  yet another computer system. The third since she's been working at Simpkins Brothers. So now, when we think about that, do you have a better vision of Betty?
15. 00:07:04 --> 00:07:32Do you feel you might be in a position to start talking about..."Yeah, if I design this sort of feature, is this something that's going to work with Betty? Or not"? By having a rich  description, she becomes a person. Not just a set of demographics. But then you  can start to think about the person, design for the person and use that rich human understanding you have in order to create a better design.
16. 00:07:32 --> 00:08:06So it's an example of a user, as I said not  necessarily a real one. You're going to use this as a surrogate and these details really, really matter. You want Betty to be real to   you as a designer, real to your clients as you  talk to them. Real to your fellow designers  as you talk to them. To the developers around  you, to different people. Crucially, though, I've already said this, there's not just one. You usually want several different personas because the users you deal with are all different.
17. 00:08:06 --> 00:08:30You know, we're all different. And the user group – it's warehouse managers – it's quite a relatively narrow and constrained set of users, will all be different. Now, you can't have one persona for every user,   but you can try and spread. You can look at the range of users.   So now that demographics picture I gave,  we actually said, what's their level of education? That's one way to look at that range. You can think of it as a broad range of users.
18. 00:08:30 --> 00:09:02The obvious thing to do is to have the absolute  average user. So you almost look for them:   "What's the typical thing? Yes, okay." In my  original demographics the majority have no college   education, they were school educated only. We said that was your education one,   two thirds of them male – I'd have gone for  somebody else who was male. Go down the list, bang   in the centre. Now it's useful to have that center  one, but if that's the only person you deal with,   you're not thinking about the range. But certainly you want people who in some sense  
19. 00:09:02 --> 00:09:24cover the range, that give you a sense  of the different kinds of people.   And hopefully also by having several, reminds  you constantly that they are a range and have   a different set of characteristics, that there  are different people, not just a generic user.

2. Choose the Best Typography and Fonts

Typography is a cornerstone of readability in UX design. To choose the right fonts, it takes more than just aesthetics; it's about ensuring clarity and ease of reading, too. Key considerations include to pick fonts that are easy to read on various devices and screens. Simple fonts—with a mix of uppercase and lowercase letters—help keep a clear visual hierarchy and improve users’ ability to understand. For example, it can be a good idea to keep to a strong sans-serif font for headlines and a readable serif font for body content—for both desktop and mobile screens. 

3. Use Design Elements Consistently

Keeping things consistent is a crucial way to enhance readability. When designers organize all design elements—like fonts, colors and layout styles—in a way that’s unified, they can help make a seamless experience that helps users with recognition and navigation. This consistency also serves to reinforce brand identity, and make the interface more memorable to users. 

4. Make Effective Use of Space

It’s vital to put negative space around text blocks, and this spacing is one of the most helpful visual aids. It doesn’t just improve the overall aesthetic of the design. It plays a big role in readability, too. Such spacing helps to cut down on visual clutter, which makes the text more scannable and easier to digest. It’s a particularly important approach in digital environments where users are likely to skim rather than read in detail. In any case, well-designed documents give a boost to readability and comprehension, and white space—or negative space—is a handy tool for designers to remember. 

5. Use Color and Contrast Well

Proper use of color and contrast has a great bearing on readability. So, choose colors that stand out against the background but stay away from overly harsh contrasts that can strain the eyes. Ideal text-background combinations—like black text on a white background—look professional and they make sure that a wide range of users can access content. Designers should note that this includes users with visual impairments—like color blindness—who’ll find some color schemes hard to notice or read.  

6. Optimize Text Layout

The layout of the text should make for easy reading and scanning, and that includes the points that designers should: 

1. Keep line lengths to—an optimal—45 to 72 characters and use shorter paragraphs. Such structuring helps to keep users’ attention and makes the content more readable overall. 
2. Use headings and subheadings properly, with appropriate mixed-case bold, to help guide users through the content. 
3. Keep to a sensible minimum for font size: about 12-16 pt, depending on context. 
4. Space the line height to about 1.5, or as appropriate or comfortable for the content.  
5. Align text to the left rather than justify it. A page of text that has a jagged right edge can make things more readable. That’s because the lines give a consistent starting point for the eye.  
6. Avoid all caps—all caps can work against text’s readability. 

7. Design for Accessibility and Inclusivity

When designers set out content with accessibility firmly in mind, they help make sure that that content’s readable for everyone—and this includes users with disabilities. For example, it’s good to use fonts that dyslexic users can read easily. It’s important to avoid italics and use bold text to add emphasis, too. What’s more, it’s good to create a printer-friendly version of the content. That’s so it can cater to those users who prefer reading on paper. 

8. Include User-Centric Writing

To compose the best content for readability, designers should use: 

1. Straightforward language and avoid abbreviations and jargon as much as they can. 
2. Short sentences, and avoid long, convoluted sentences. 
3. Active voice, to identify who—or what—the actors are in a given piece of text. 
4. An 8th-grade reading level as a target so they can cater to a broad audience. It’s also important to remember that many users won’t have English as their first language. So, plain English is best to access these readers with. Designers can use software such as Readable to help test, monitor and improve their readability score. 

9. Place Important Content Above the Fold

It’s vital to make sure that important content is especially visible. One way to make sure of this is to place it above the fold so that users don’t have to scroll to find it. 

10. Conduct User Testing and Make Appropriate Adjustments

To make sure of both good legibility and readability, it’s crucial to do regular user testing. Designers can measure reading speed to see if users struggle with recognizing text. If test users do experience issues where they lean towards the screen or have difficulty discerning text, the design might want adjustments in typography. For readability, it’s a good idea to test how users interact with the content layout and organization. That can provide insights into whether the text’s comprehensible and engaging.

William Hudson explains the importance of usability testing: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:32If you just focus on the evaluation activity typically with usability testing, you're actually doing *nothing* to improve the usability of your process. You are still creating bad designs. And just filtering them out is going to be fantastically wasteful in terms of the amount of effort. So, you know, if you think about it as a production line, we have that manufacturing analogy and talk about screws. If you decide that your products aren't really good enough
2. 00:00:32 --> 00:01:02for whatever reason – they're not consistent or they break easily or any number of potential problems – and all you do to *improve* the quality of your product is to up the quality checking at the end of the assembly line, then guess what? You just end up with a lot of waste because you're still producing a large number of faulty screws. And if you do nothing to improve the actual process in the manufacturing of the screws, then just tightening the evaluation process
3. 00:01:02 --> 00:01:17– raising the hurdle, effectively – is really not the way to go. Usability evaluations are a *very* important tool. Usability testing, in particular, is a very important tool in our toolbox. But really it cannot be the only one.

11. Integrate with Visual Elements

Designers can enhance both readability and legibility when they work text in with other visual elements—likes images, charts and diagrams. These components don’t just break up text into manageable blocks. They help to clarify and emphasize information, too. This makes the content more accessible and appealing. Plus, it gives users contextual cues to help them understand the information in front of them better. 

12. Avoid Common UX Mistakes

Several common UX mistakes stem from poor readability of text content. These sorts of things happen when designers ignore user research, overcomplicate navigation, neglect mobile optimization and fail to act on user feedback. Such errors can make the content hard to navigate and understand. What’s more, they can further alienate users and undermine how effective the digital product is. If users come away from an experience feeling confused and frustrated, it won’t matter how visually attractive the digital product is. It’ll cause the brand to suffer—and that includes from lack of user trust. 

Overall, it’s essential to remember the value of good readability in web design and other areas of UX design. Readability is a critical part of UX. It’s vital to appreciate how it extends from microcopy—such as button text—to larger content—such as landing page text. “How does document design improve readability?” is a good question for designers to bear in mind. When they consider it throughout the designer process, they can help make sure that their brand and its users stay on the same page time and again in great user experiences.  

Learn More about Readability in UX

Take our course, Visual Design: The Ultimate Guide.  

Find more in-depth insights in our The UX Designer’s Guide to Typography. 

Take our Master Class The Tone Of Typography: A Visual Communication Guide with Mia Cinelli, Associate Professor of Art Studio and Digital Design, University of Kentucky. 

Take our Master Class How to Communicate with Typography How To Communicate With Typography with Ellen Lupton, Writer, Designer, Curator and Educator. 

Consult Legibility, Readability, and Comprehension: Making Users Read Your Words by Jakob Nielsen for additional insights. 

Go to Why Readability UX Is Important by Mary Ann Dalangin for further important information.  

Read Legibility and Readability in UX/UI Design – Two Peas in a Pod? by Josipa Zbiljski for helpful tips and examples. 

See Read Between The Lines: Why Legibility And Readability Is Essential For UX by Anchor Digital for further important insights and tips. 

Read Legibility vs readability: everything you need to know by Ben Barnhart for more information. 

Questions about Readability In Ux Design

How can you improve readability in UX design?

Focus on optimizing typography, layout and color schemes. With typography, pick fonts that are easy to read and vary font sizes and weights to enhance the hierarchical structure. For instance, a sans-serif font for body text makes legibility better on digital screens. 

Layout also plays a crucial role here. Organize content into a structure that users can easily navigate. This effort includes using a grid system to get elements aligned consistently and enough whitespace to minimize visual clutter—which helps users concentrate on content that’s important. 

Color contrast serves as a factor that’s essential, too. High contrast between text and background colors greatly boosts the text legibility. Tools such as the Web Content Accessibility Guidelines (WCAG) offer guidelines on optimal contrast ratios to make sure of text readability for users with visual impairments. 

What’s more, incorporating text-to-background contrast doesn’t just boost accessibility—it boosts overall user engagement, too.  

Take our course, The Ultimate Guide to Visual Design. 

Play

How does line spacing affect readability in UX design?

It greatly affects readability, and designers increase line spacing to make text clearer and more legible. Adequate line spacing prevents text from looking cramped—and it lets the eye comfortably transition from one line to the next. That’s vital for keeping users engaged and making sure the content is easy to understand for them. 

Optimal line spacing typically falls between 120% and 150% of the font size. So—and as an example—with a font size of 16 pixels, line spacing should be around 19 to 24 pixels. This spacing gives enough vertical space between lines. Plus, it lowers the chances that users will lose their place while they’re reading. 

What’s more, proper line spacing improves the design’s overall aesthetic. That’s something that makes the text both functional and visually pleasing. Plus, it helps establish hierarchy and organize content into sections that users can digest more easily. 

Take our Masterclass How to Communicate with Typography How To Communicate With Typography with Ellen Lupton, Writer, Designer, Curator and Educator. 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:35You may be wondering what  scares me about typography, or if I'm a "type A" alpha dog who's  completely fearless. And I will tell you: I have plenty of fears about typography. With so many fonts available, how do you make a choice? Typography, my friends, is *not just fonts*! Enough about fonts! Typography is a lot more than  that, and at the end of the day,
2. 00:00:35 --> 00:01:01there's so much you can do  with just a few basic fonts. So, I hope to, in this short  webinar, take you through some thoughts about fonts and working with fonts. And that's really the first half of the talk. In the second half, we'll look at what you can  do with them in interaction design that will, I think, make you feel confident  and grounded in your choices; 
3. 00:01:01 --> 00:01:04give you a little bit of a process.

What are the best fonts to use for readability in digital products?

Pick fonts that are clear and easy on the eyes. Sans-serif fonts are the best choice for digital screens—that’s because they lack the small projecting features called "serifs" at the ends of strokes. So, they’re cleaner and more straightforward to read on various devices. Some of the most recommended sans-serif fonts for digital readability include Arial, Helvetica and Verdana. They’re popular as they offer excellent legibility and simplicity.  

Arial is known for its rounded characters and simple form. Helvetica’s favored for its neutral design that works well in many text densities and design layouts. Verdana—with its wide spacing and large x-height—is a particularly good pick for small texts on screens. Designers like Calibri and Roboto, too, since these fonts give a modern and lightweight look. Calibri often appears in web and office environments for its warm and soft character, while Roboto offers a geometric precision that’s readable at various sizes and on different screen types.   

Creative Director and CEO of Hype4, Michal Malewicz explains important points about fonts: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:32There are a lot of fonts. If you go to a design tool, you'll notice that there are hundreds or dozens of different fonts. But most of them are useless, and most of them are fonts that you should never use. So, if you're just starting and if  you're not really comfortable with design yet, you should completely always avoid decorative fonts, handwriting fonts, and in most cases serif fonts as well. And I know this sounds really crazy and over the top, but most serif fonts are not really that easy to work with,
2. 00:00:32 --> 00:01:03and you need to be able to set the spacing and leading, kerning and everything in the proper way for them for the digital interfaces to work well. So, it's best for the initial time that you're working on your designs to just *stick to sans serifs*. And I have a short list of fonts that are basically safe. There is a couple more – you can find them somewhere, but you don't really need a lot more when you're starting. If you're testing your design skills, if you're learning design,
3. 00:01:03 --> 00:01:30a couple of these fonts are all you need, and especially right now if you're looking for a good free font, I would recommend Plus Jakarta Sans because it's one of the better-looking fonts out there, it's completely free and it looks good in most scenarios. So, don't use those decorative fonts, don't use those fancy fonts, because the simpler they are, the better they look. And another thing about font is that somehow people have this notion of thinking
4. 00:01:30 --> 00:02:03that if a font is thin or light, it's kind of synonymous with minimal design, and that minimal design like the Swiss style – you know – super-minimal design was actually pushed by Apple at some point with iOS 7 if what I remember is correct, but they quickly reverted to that because those fonts don't really display well on most screens. They are too thin, and they are basically not readable. So, just *go for regular and bold in most cases*
5. 00:02:03 --> 00:02:33and don't go  for those thin and light fonts in your designs. Because as you can see here, it's just a lot  easier to read the window on the right side. And also, if you're starting, don't create a  ton of different font sizes. You should have like a heading, a smaller heading and everything else as just one font. So, in practice this is another like a pop-up window that shows a couple of different elements, and we have just one size for the title.
6. 00:02:33 --> 00:03:04And then the second size with different weights – one is bold; the rest are regular – is used for all of the other things. And if we switch it to four different font sizes on a small window like that, it's going to make our brain think, 'Oh my God – I need to process all that!' So, *just make it easy for the brain and just switch it to a much simpler option* because it's just always going to work better, and of course, a lot of the rules that I'm going to share with you are rules that you can break once you feel confident about breaking them.
7. 00:03:04 --> 00:03:07So, *when you're just starting, just don't break them*.

How does color contrast affect readability in UX design?

Contrast plays a crucial role there. Designers use high contrast between text and background colors to make sure that users can easily read content on digital screens. High contrast makes text stand out—making for quick and efficient reading, which is particularly important for users with visual impairments. The most effective color combinations often involve dark text on a light background or light text on a dark background.   

Designers stick to standards such as the Web Content Accessibility Guidelines (WCAG), which recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The right color contrast doesn’t just improve readability. It raises the overall user experience by making interfaces user-friendly and easy to navigate, too. Designers constantly test color schemes to find the best contrasts that meet accessibility standards and that support a seamless user experience. Doing so, they help users engage with the content more effectively—and reduce eye strain. 

Understand the need to design with accessibility in mind: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:30Accessibility ensures that digital products, websites, applications, services and other interactive interfaces are designed and developed to be easy to use and understand by people with disabilities. 1.85 billion folks around the world who live with a disability or might live with more than one and are navigating the world through assistive technology or other augmentations to kind of assist with that with your interactions with the world around you. Meaning folks who live with disability, but also their caretakers,
2. 00:00:30 --> 00:01:01their loved ones, their friends. All of this relates to the purchasing power of this community. Disability isn't a stagnant thing. We all have our life cycle. As you age, things change, your eyesight adjusts. All of these relate to disability. Designing accessibility is also designing for your future self. People with disabilities want beautiful designs as well. They want a slick interface. They want it to be smooth and an enjoyable experience. And so if you feel like
3. 00:01:01 --> 00:01:30your design has gotten worse after you've included accessibility, it's time to start actually iterating and think, How do I actually make this an enjoyable interface to interact with while also making sure it's sets expectations and it actually gives people the amount of information they need. And in a way that they can digest it just as everyone else wants to digest that information for screen reader users a lot of it boils down to making sure you're always labeling
4. 00:01:30 --> 00:02:02your interactive elements, whether it be buttons, links, slider components. Just making sure that you're giving enough information that people know how to interact with your website, with your design, with whatever that interaction looks like. Also, dark mode is something that came out of this community. So if you're someone who leverages that quite frequently. Font is a huge kind of aspect to think about in your design. A thin font that meets color contrast
5. 00:02:02 --> 00:02:20can still be a really poor readability experience because of that pixelation aspect or because of how your eye actually perceives the text. What are some tangible things you can start doing to help this user group? Create inclusive and user-friendly experiences for all individuals.

What are the recommended font sizes for web and mobile interfaces?

Designers recommend specific font sizes to make sure readability and usability figure well. On websites, the standard minimum font size for body text is 16 pixels. 

For mobile interfaces, the approach is slightly different due to the smaller screen sizes. Designers generally suggest a minimum body text size of 16 pixels as well. However, they often adjust this based on the device's resolution and screen size. A crucial point is that the text remains legible whenever users hold their devices at a typical viewing distance. 

Headings and titles on both web and mobile should be larger—to make a visual hierarchy and draw attention to key sections. Typically, designers use sizes ranging from 24 to 32 pixels for headings; it depends on the design's overall layout and the weight of the font. 

There’s also line height and letter spacing to consider. A good rule of thumb for line height is 120% to 150% of the font size—it helps keep text from looking too cramped. 

Take our Master Class The Tone Of Typography: A Visual Communication Guide with Mia Cinelli, Associate Professor of Art Studio and Digital Design, University of Kentucky. 

What role does white space play in improving readability?

In design, white space—also, negative space—plays a vital part there, and for the overall user experience. Designers strategically use white space to create a visual buffer between different elements on a page—like text, buttons and images. This space helps to prevent the design from appearing too cluttered, allowing users to easily focus on the content without feeling overwhelmed. White space around text increases legibility by reducing visual noise and directing the user’s attention to the content that matters. By incorporating adequate margins and padding, designers ensure that text is not too cramped, which makes reading more comfortable and less strenuous on the eyes.  

White space contributes to a design’s visual hierarchy, too. It helps users distinguish between elements of varying importance, so they can be guided through the content in a logical and intuitive way. For example, more white space around a call-to-action button makes it stand out more, prompting users to click.  

Read our Topic Definition about White Space, or Negative Space for more details.  

Take our course, The Ultimate Guide to Visual Design. 

Play

How does text alignment influence user readability?

Text alignment has a great impact on a user interface’s readability. Designers pick specific alignments—based on the content and context—to optimize user experience. 

Left-aligned text is the most common choice for readability. It gives a consistent starting point for the eye—and makes it easier for users to move from one line to the next and keep their place. It’s particularly effective for languages that read from left to right—like English. 

Right-aligned text is less common. It typically turns up for aesthetic reasons or for languages that read from right to left. But it can disrupt the natural reading flow for left-to-right readers—potentially slowing down their reading speed and bumping up their cognitive load. 

Center alignment places text equally distant from both margins. Designers might use this for short pieces of text like headings or captions—where it can add visual interest and balance. For longer texts, though, center alignment can make it difficult to find the start of each new line. 

Justified text, which aligns text evenly along both the left and right margins, can create a neat and formal appearance. Even so, it often leads to uneven spacing between words. This irregular spacing can disrupt reading flow—and make text blocks harder to read. 

Author and Expert in Human-Computer Interaction, Professor Alan Dix explains important points about alignment: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:31One of the other tools you have in your toolbox for making visual design is alignment. So, let's see how you can use this in order to help you help the user achieve things. So, first of all, let's think about text. Now, what I'm going to do is assume that I'm an English speaker and I'm an English writer. And so, I have a left-to-right text that I use.
2. 00:00:31 --> 00:01:02I'm also learning a bit of Welsh. And Welsh also is a left-to-right language, as are most European languages. If you come from a language which is the other way round, or if your users' are right-to-left languages, then you need to flip everything I say for the next slide or two the other way round as well. So, being aware of your users is absolutely crucial here. But I am going to assume left to right. So, for left-to-right text, then you normally want to align things to the left.
3. 00:01:02 --> 00:01:32And this is the most common. You'll have seen this in many, many layouts. So, the reason for that, though, is that if you're scanning text, you read left to right, and therefore you want your eyes to go down and very rapidly move down the left-hand side of that text and scan the beginning. This is partly driven by the fact, too, that you distinguish that beginning bit first. There may be contexts where the end of a sentence or the end of a title
4. 00:01:32 --> 00:02:00is the most critical bit. So, you might want to reverse this. So, again, think purpose. Why is somebody looking at this line of text items? And if what they're trying to do is scan something and if what they'd like you to distinguish, which is the most common case, is the front of the text, then you left-align. It does tend to be a bit boring sometimes. So, you might want to mix it up. But if you do, and if you right-align – and I have used right-aligned text; there's occasions I've used it –
5. 00:02:00 --> 00:02:34you have to know that makes quick scanning to find something more difficult. However, there might be... if the context is somebody knows the name of a film and they're trying to find it in order to choose it, and they want to do that quickly because it's about to start in a few minutes and it's a live film, you want to make that as easy to scan as possible. However, perhaps if you're just making new suggestions of films to the user and the user doesn't necessarily recognize them straight away – so, what you're doing: it's a range of things they're looking at – then it may not matter as much
6. 00:02:34 --> 00:02:48whether they're left-aligned, right-aligned, or maybe center-aligned in the middle. So, there are times for special effects when you want to do that. But you have to understand then that a particular purpose, which is scanning to find something that you recognize is going to be harder.

Take our course, The Ultimate Guide to Visual Design. 

Play

What are some common readability issues in UX design?

Here are some of them: 

1. Small font size: If text is too small, users struggle to read it—especially on mobile devices. A minimum font size of 16 pixels is advisable for body text to keep clear readability across devices.  
2. Poor color contrast between text and background: This can make it hard for users to distinguish text—particularly users with visual impairments. When designers follow accessibility guidelines—such as the Web Content Accessibility Guidelines (WCAG)—they aim for a contrast ratio that supports all users.  
3. Overcrowded text blocks: When text is too dense or doesn’t have adequate spacing, it becomes challenging for users to focus and track lines of text. So, get enough line spacing and paragraph breaks.  
4. Inconsistent typography: Too many fonts or styles disrupts the visual hierarchy and can confuse users.   

Creative Director and CEO of Hype4, Michal Malewicz explains important points about fonts: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:32There are a lot of fonts. If you go to a design tool, you'll notice that there are hundreds or dozens of different fonts. But most of them are useless, and most of them are fonts that you should never use. So, if you're just starting and if  you're not really comfortable with design yet, you should completely always avoid decorative fonts, handwriting fonts, and in most cases serif fonts as well. And I know this sounds really crazy and over the top, but most serif fonts are not really that easy to work with,
2. 00:00:32 --> 00:01:03and you need to be able to set the spacing and leading, kerning and everything in the proper way for them for the digital interfaces to work well. So, it's best for the initial time that you're working on your designs to just *stick to sans serifs*. And I have a short list of fonts that are basically safe. There is a couple more – you can find them somewhere, but you don't really need a lot more when you're starting. If you're testing your design skills, if you're learning design,
3. 00:01:03 --> 00:01:30a couple of these fonts are all you need, and especially right now if you're looking for a good free font, I would recommend Plus Jakarta Sans because it's one of the better-looking fonts out there, it's completely free and it looks good in most scenarios. So, don't use those decorative fonts, don't use those fancy fonts, because the simpler they are, the better they look. And another thing about font is that somehow people have this notion of thinking
4. 00:01:30 --> 00:02:03that if a font is thin or light, it's kind of synonymous with minimal design, and that minimal design like the Swiss style – you know – super-minimal design was actually pushed by Apple at some point with iOS 7 if what I remember is correct, but they quickly reverted to that because those fonts don't really display well on most screens. They are too thin, and they are basically not readable. So, just *go for regular and bold in most cases*
5. 00:02:03 --> 00:02:33and don't go  for those thin and light fonts in your designs. Because as you can see here, it's just a lot  easier to read the window on the right side. And also, if you're starting, don't create a  ton of different font sizes. You should have like a heading, a smaller heading and everything else as just one font. So, in practice this is another like a pop-up window that shows a couple of different elements, and we have just one size for the title.
6. 00:02:33 --> 00:03:04And then the second size with different weights – one is bold; the rest are regular – is used for all of the other things. And if we switch it to four different font sizes on a small window like that, it's going to make our brain think, 'Oh my God – I need to process all that!' So, *just make it easy for the brain and just switch it to a much simpler option* because it's just always going to work better, and of course, a lot of the rules that I'm going to share with you are rules that you can break once you feel confident about breaking them.
7. 00:03:04 --> 00:03:07So, *when you're just starting, just don't break them*.

Take our course, The Ultimate Guide to Visual Design. 

Play

What tools can designers use to check the readability of text?

Designers have several tools at their disposal to check the readability of text. Here are some in no particular order:  

1. The Hemingway Editor stands out by highlighting complex sentences and suggesting simpler alternatives.  
2. The Readable website, which provides readability scores based on various established indexes.  
3. Grammarly also offers readability checks by analyzing sentence length and complexity.  

Take our course, The Ultimate Guide to Visual Design. 

Play

How can bullet points and lists improve readability in UX design?

Bullet points and lists greatly boost the readability in UX design—breaking down information into manageable pieces. This format lets users scan content quickly. That’s crucial in digital environments where attention spans are often limited. Lists organize data effectively, and make it easier for users to identify key points or actions without having to navigate through dense paragraphs. 

To use bullet points also improves the visual hierarchy of a page. Designers can use them to emphasize important features or benefits—and help guide the user's eye through the content in a logical manner. This method of presentation lightens the cognitive load as users don’t need to work as hard to understand the information. 

Watch our video about visual hierarchy for more information: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:31Visual hierarchy refers to the arrangement or organization of elements within a design in a way that guides the viewer's eye through the content in a specific order of importance. It's about creating a clear and logical structure that helps users navigate and understand the information presented. You can use size and scale, color and contrast typography, white space
2. 00:00:31 --> 00:01:00alignment, repetition, proximity, visual elements such as icons, images, textures and graphics and reading patterns. By using these principles effectively, Designers can guide the viewer's focus, ensuring that the most important elements are noticed first and create a more intuitive and engaging experience.

Take our course, The Ultimate Guide to Visual Design. 

Play

How can the use of icons and symbols enhance readability?

Icons and symbols give visual shortcuts for information. Good icons can help users navigate content more quickly and easily. They can understand information at a glance, which is particularly useful in interfaces where space is limited or where users need to make quick decisions. 

Icons can also cut down on the amount of text on a page—and lighten the cognitive load and make the content more accessible. By replacing common actions or ideas with universally recognized symbols, designers can create a cleaner and more user-friendly interface. For example, a trash bin icon universally communicates the action of deleting, and a magnifying glass suggests searching. 

What’s more, the strategic use of icons can direct user attention to important features and controls—boosting the overall user experience by making interactions intuitive. Well-designed icons are immediate and effective, eliminating language barriers and making the interface more inclusive. 

Watch our video about visual hierarchy for more information: 

Play

Hidevideo transcript

1. 00:00:00 --> 00:00:31Visual hierarchy refers to the arrangement or organization of elements within a design in a way that guides the viewer's eye through the content in a specific order of importance. It's about creating a clear and logical structure that helps users navigate and understand the information presented. You can use size and scale, color and contrast typography, white space
2. 00:00:31 --> 00:01:00alignment, repetition, proximity, visual elements such as icons, images, textures and graphics and reading patterns. By using these principles effectively, Designers can guide the viewer's focus, ensuring that the most important elements are noticed first and create a more intuitive and engaging experience.

Take our course, The Ultimate Guide to Visual Design. 

Play

How does user age affect readability preferences and requirements?

Younger users often prefer dynamic content with interactive elements—like videos and animations—which engage them better. They also tend to be comfortable with smaller fonts and denser information presentations. 

Older adults—meanwhile—need clearer and larger text, usually because of visual impairments that often come with age, such as presbyopia. They benefit from high-contrast color schemes and straightforward layouts that simplify navigation and lighten the cognitive load. Older users can also appreciate content that avoids jargon or complex language. 

Designers really do need to think about these factors whenever they work to create content for specific age groups. For instance, educational platforms aimed at older adults might use larger text sizes, good white space and more important navigational cues to make sure the users understand what’s going on and stay on board. 

Take our course, The Ultimate Guide to Visual Design. 

Play

What are some highly cited scientific articles about readability in UX design?

1. Rello, L., Kanvinde, G., & Baeza-Yates, R. (2012). Layout guidelines for web text and a web service to improve accessibility. Proceedings of the International Cross-Disciplinary Conference on Web Accessibility (W4A), 1-9.  

This paper provided empirically-validated guidelines for improving the readability of web content through optimal layout and typography choices. The authors also introduced a web service that automatically analyzes and suggests improvements to web page layouts, making it a highly influential resource for UX designers focused on enhancing digital readability. 

1. Boyarski, D., Neuwirth, C., Forlizzi, J., & Regli, S. H. (1998). A study of fonts designed for screen display. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 87-94).  

This early study on screen font readability compared four different fonts (Georgia, Verdana, Verdana Italic, and Times New Roman) and found that Verdana and Georgia were more readable on screen than the other fonts tested. This work laid the groundwork for understanding how font choice impacts readability in digital interfaces and has been highly influential in guiding font selection for web and software design.