Legibility vs Readability: What distinguishes them?
Legibility is how easily one character is told apart from another, a property of the typeface itself. Readability is how easily a block of text is understood, a property of size, spacing, measure and the writing. A typeface can be legible and still produce unreadable text.
We have all faced situations in which reading a particular piece of written text ended up giving us headaches instead of furthering our knowledge and understanding. In the vast majority of cases, this is because the text is poorly written.
But what do we mean when we say that a text is “poorly written”? Broadly, there are two core issues that determine whether a text is easy to read or not: Legibility and Readability.
While both terms aim for the same result i.e. to provide information the easiest way possible, they use different ways to achieve the goal. This section is devoted to these two terms.
Legibility meaning in one minute
Legibility is how easily one letter can be told apart from another. It is about single characters: their shapes, their size and the space around them. A word is legible when you can recognise every letter in it without guessing. To “define legibility” in one line: it is whether the letters themselves can be seen clearly.
Readability is how easily a whole block of text can be read and followed. It depends on size, line length, line height and contrast, and also on the words and sentences themselves.
The quickest way to feel the difference is to look at letters that are easy to mix up. Switch the typeface, then make the letters small.
A geometric sans at size 30. Capital I, lowercase l and the numeral 1 are drawn with almost the same upright stroke, the zero is close to the capital O, and the letters r and n sit close enough together to pass for an m. Out of context these pairs are easy to confuse. Even at this size the look-alike pairs stay close, because the letterforms themselves are alike.
In the sans, the capital I, the lowercase l and the numeral 1 are close to identical, so a word like “Il1” is hard to read out of context. In the serif each one has its own detail. That is legibility, and it is a property of the letterforms. Shrinking the text takes the detail away first.
What is the difference between legibility and readability?
Legibility is the appearance of fonts/texts whereas readability is a measure of how difficult a paragraph is to read.
Now that we got the basic definition out of the way, let’s take a look at these terms in a bit more detail.
What is Legibility?
Legibility is the visual clarity of texts or articles.
Legibility is generally based on the size of texts, the fonts used, and the spacing between texts and characters. The space between paragraphs also plays a role in improving legibility.
This concept pre-dates the rise of electronic media, as bad and dirty handwritings are often called illegible (i.e. not legible). To say that someone’s handwritten text is illegible is to say that the shape and form of the individual letters and words written by the writer are somewhat deformed or misshapen to the human eye.
A similar concept applies to written texts in electronic media.
For example, it is difficult to read a block of text that is written completely in uppercase. In this case, the text gives us the impression that the author is shouting (or screaming) at us for some reason, regardless of what the actual intention of the author was while they were writing the text.
In other words, when our human minds interpret a given text as being somewhat “deformed” in terms of physical appearance, that text is not said to be legible.
What is Readability?
Readability refers to the level of difficulty involved in understanding the meaning conveyed by a paragraph or an article.
Difficult words and unnecessarily complex sentence structures often reduce the readability of a given text.
In other words, while legibility refers to the shape and appearance of letters and words in a given text, readability refers to things such as grammar and the simplicity and appropriateness of the words used in a text.
A legible text has clear and easily understandable letters, while a readable text has proper grammar, simple sentences, and words whose meanings are easy to understand.
Tips for achieving better Legibility in our UI works
Tip #1: For websites, it is optimal to use 16/18pt font size for ease of reading.
Mobiles generally use 14/16pt whereas for printing use 9-12pt.
Tip #2: Line height for normal texts such as paragraphs should be 1.5.
However, for larger texts, such as headings, we need to reduce the ratio to 1.25 or 1.125.
Tip #3: Space your texts properly to put less strain on people’s eyes.
I personally use an 8-point grid to space paragraphs and headings.
Use bold text and headings in appropriate places so users have an easy time reading texts. Breaking up long articles and texts into chunks is always a good practice.
Tip #4: Adjust the contrast by using a light text color for dark backgrounds and vice versa.
Adding bright colored text on a bright colored background renders the text unreadable. Not only this, we always have to keep accessibility in mind too. While using colors always do proper tests so that even color blind peoples can easily read them.
Also, avoid flashy or patterned backgrounds.
Bonus tip: Line height on a dark background should be 1.66 to make it more legible.
Tips for achieving better Readability in our writing
Tip #1: Use common words and short sentences for clarity.
Give the simplest explanation possible for any topic, especially for those topics that are more complex.
Omit unnecessary words that increase the complexity of the text. Make sure to not remove words that harm the meaning of the sentence.
Tip #2: Use software applications that help determine the readability of your work.
I use Grammarly for all my articles. The free version provides lots of features that are sufficient to get started. The paid version will provide additional features like plagiarism report and advanced grammatical suggestions but I would highly suggest going with the free version.
Bonus Tip: Grammarly and Hemingway App can be used to check your readability score. Also, heading analyzer from Advanced Marketing Institute is a great tool to judge our headings.
Why we should avoid bad Legibility or Readability implementations?
People might need to put in extra work to read our writings.
They might have to pull up a dictionary frequently to find the meanings of the words we used. (Poor Readability)
They might have to go closer to the screen because they cannot see the texts properly. This all adds up and we should not let this happen. (Illegible Text)
Users will have a hard time understanding our main points.
Long sentences or less spacing means people need to read the same phrases multiple times just to get a general gist of it.
Users will also not be able to keep their focus.
The texts or article becomes boring and inefficient.
Informative texts need to provide information as fast as possible. When we don’t properly organize our texts, users would have to go through every line to find what they were looking for. This is boring since everybody knows that there are better ways to convey the core messages.
Unorganized content drives users away.
If our articles or texts are very long, they start looking like those boring essays we were forced to read/write in high school.
How many times have we looked up an article on some topic, only to get long essays devoted to it? Most of the time, we simply throw our hands in the air in despair and say, “I’m not reading any of this nonsense, no matter how good or informative it is.”
That’s generally what happens when we don’t organize our articles. We have limited attention-spans, and it is most unwise to ignore that fact in favor of a long and disorganized text.
Always keep in mind that most users just scan through the heading of the articles and only go through the text that is most relevant to them. Organizing your article is key here.
For example: Below is an article about 1200 words explaining the principles of design. Here I have divided every reading content into one or two paragraphs. Also, I have highlighted important points so that users can find what they are looking for quickly.
If you want to learn more about text alignment psychology, I suggest you read up on Alignment Principle in Design: Why Alignment is important for Usability?
Try it yourself
Legibility and readability pull on different settings. Move the sliders and watch the two rows at the bottom. The first row, legibility, cares about size and contrast. The second, readability, also cares about line length and line height.
Contrast 14.50 to 1, 16px text, line height 1.5, 65 characters a line. Legibility is clear: the letters are big enough and dark enough to tell apart. Readability is comfortable: the line length and spacing suit a paragraph.
Make the text 12px and the contrast low, and legibility fails first. Leave the text at a good size but stretch the line to 110 characters, and legibility stays clear while readability does not. A text can be legible and still be hard to read.
Summing Up
- Legibility helps with the visual clarity of texts. Readability deals with the understanding of the writings.
- Good legibility and readability help us convey our messages effectively and efficiently.
- These concepts also help us in greatly simplifying our text. Keep in mind that the more complex topics require an even simpler explanation.
- These concepts have an enormous effect on the aesthetics of the text, which is vital for keeping people intrigued and interested in our content.
Further Reading
Frequently asked questions
What is the difference between legibility and readability?
Legibility is whether individual characters can be distinguished, which is down to the typeface. Readability is whether a paragraph is easy to follow, which is down to size, line height, line length and the writing itself.
What does legibility mean?
Legibility is the degree to which individual letterforms can be told apart from one another at a given size.
What is the definition of legibility?
Legibility is how easily one letter can be told apart from another. It is a property of the letterforms, their size and the space around them, not of the writing.
Is legible the same as readable?
No. Legible means the individual letters can be told apart. Readable means a whole block of text is easy to follow. A text set in a clear typeface can still be hard to read if the lines are too long or too tight.
How do you improve readability?
Keep line length near 65 characters, raise line height to about 1.5, choose a size no smaller than 16px for body text, and keep contrast above 4.5 to 1.
Check your own design. The free contrast checker reads a screenshot and gives every line of text its WCAG ratio and the nearest color that passes.Open the contrast checker
Written by
