Typography is an extremely important part of effective brand communication, especially on the web, where people’s attention spans are short and their screen sizes are small. Great typography happens when you arrange text or copy on a page and make it both readable and legible.

person wondering about website typography
Readability vs legibility—what’s the difference? Web design by Vallentin, illustration by OrangeCrush.

But, what’s the difference between readability vs. legibility? Ask anyone who’s not a professional typographer, and chances are that they’ll probably confuse the two. But knowing all about them will empower you to build a website that your audience will appreciate.

Harnessing readability and legibility on the web will help you create content that offers a better user experience for your leads and customers. And that will boost your site’s conversion rate.

Readability vs. legibility

What is readability?

Readability is how easily your audience can read and understand the written copy on your website. This all depends on the difficulty of your words and sentence structure. Great readability comes from simpler words, sentences and paragraphs that are easier to digest.

Design by MercClass

You can interpret readability by analyzing the reading level of your copy using tools like these:

Run your copy through one of these tools to check its reading levels based on widely-used indicators (like the Flesch-Kincaid readability tests and the Gunning fog index).

Adjust it, if necessary, by using simpler synonyms of simpler words and shorter sentences to ensure better understanding.

Readability also depends on how your website’s typeface actually looks to readers, which takes into account things like font size, font style, line length and line height. We’ll touch on those below.

What is legibility?

Meet legibility, readability’s often wrongfully interchanged partner.

Legibility has a much narrower definition than readability. It indicates how easily your audience can tell apart and recognize individual characters in lines of copy on your site. More so than readability, legibility is determined primarily by your typeface design. Think of it as one component under the larger umbrella of readability.

Legibility is usually analyzed by user testing and looking at users’ word-per-minute reading speed.

The components of readability and legibility

Let’s dig into the different pieces of readability and legibility. And don’t forget: readability includes all of the elements of legibility, too!

Readability

Line length: This is the amount of space between the left- and right-most edges of a block of copy. Shorter line lengths are easier to read because your audience can simply read them faster. With longer line lengths, their eyes have to travel farther across the screen, which makes it harder to track vertical progress as they read down the page.

Kerning: This is how much space is between one or more pairs of adjoining characters. Kerning should be adjusted to be more visually pleasing. A great example of this is the letter “V” next to an “A”—due to their shapes they need to be brought closer together than other letters in words.

A minimalist logo with great tracking. Design by mr.giraffe.design

Tracking: Often confused with kerning, tracking is the amount of space between all letters in a word or line of text. Again, this should be adjusted for the purpose of achieving a visually pleasing result. Words whose characters aren’t so close together—or sentences whose words aren’t too near each other—are easier to read.

Alignment: This is how margins are set at the ends of a block of text to better distinguish your copy from surrounding elements on a page. Text can be justified, centered, flush left or flush right.

Leading (line spacing): This is the distance between adjacent baselines of copy (the lines where your characters sit). Leading that’s too close makes your lines of copy look squished and therefore difficult to read. More generous spacing allows your readers to get a much better sense of their reading progress. If leading is too far apart, it creates big spaces between lines, forcing readers’ eyes to travel too much to follow along.

Legibility

Point size: This is the distance between the bottom of a descender to the highest ascender in a type. On the web, recommended point size is between 15 and 25 pixels. Anything smaller, and it gets too hard to make out the letters.

Font style: Your font selection greatly affects the legibility of your copy. For instance, if the font on your site is Lime Blossom Caps, then good luck having your visitors actually make out the individual letters! Try to use the most legible web fonts—like Courier, Arial and Verdana—or find another with characters that are easy to recognize.

X-height: This is the distance from the baseline to the midline of lowercase characters. Your x-heights should be big enough so that lowercase letters can be read comfortably on any screen. Don’t make the x-height too tall because it can cause confusion with uppercase letters.

A readable and legible serif logo. Design by Sasha Radojevic

Serif or sans serif: Serif fonts have that little “foot” at the ends of the strokes of their characters. Sans-serifs don’t. Historically, serifs have been used in print due to a belief that they’re easier to read, but studies on this are inconclusive. A review of studies going back decades determined that there’s really no difference between serifs or sans serifs when it comes to legibility. It’s really more about aesthetic preference.

Character shape: The shape of individual characters has a huge impact on legibility. Going back to Courier, Arial and Verdana font families, note that their characters all exhibit qualities like tall x-heights and lots of negative space, which boosts legibility.

How to make your typography work better

The goal of every website is to provide a superb user experience (UX) for visitors so they’ll sign up for something or buy a product or service.

Design by AlexMarin

Excellent readability and legibility seamlessly communicate the action you want visitors to perform on any given page. Great UX comes from knowing the difference between these related-but-different aspects of good typography.

To make your site readable, it’s not enough to simply choose easier words or present shorter paragraphs. If your font makes it hard or even impossible for your audience to identify the individual letters, then even the simplest words will be hard to read.

On the other hand, to make your site legible, it’s not enough to just choose a font with easily identifiable characters. A legible font that displays complicated words, run-on sentences, and never-ending paragraphs doesn’t work either.

Ideally, you must do both. Here’s how:

Make your typography readable by:

  • Using simple words, avoid jargon, and use conversational language
  • “Chunking” your content into shorter and frequent paragraphs
  • Including images to break up copy
  • Writing with the active voice
  • Aiming for a 6th– to 8th-grade reading level

Make your typography legible by:

  • Ensuring there’s high contrast between the background color of a page and its copy
  • Using a plain background (as opposed to a patterned one)
  • Using a generous font size (at least 10 point)
  • Selecting a neat and minimalist font that doesn’t have fancy features

Readability and legibility in the wild

Microsoft Office | Readability: Good

The login page for Microsoft’s classic software is the epitome of readability. Not only are the lines of text short and the spacing between characters and words generous, but the word choices and sentence structure are simple.

Microsoft Office homepage
via Microsoft Office

eBay | Legibility: Good

The big auction site’s homepage is very legible, with clean, sans-serif font choices and a stark contrast between the fonts and plain backgrounds.

ebay homepage
via ebay

A product page on Amazon | Readability: Poor

Some of Amazon’s product pages are very messy, which leads to poor readability. Note the long lines of text and small point size of the product description copy.

Amazon product page
via Amazon

Reddit | Legibility: Poor

Each of Reddit’s user post cards could do better with legibility. While the headings are clear, the fonts used for user handles and categories are too squished together and small, forcing you to squint (especially on smaller devices).

Reddit homepage
via Reddit

Dot your I’s. Cross your T’s. Create a great reading experience.

At first glance, readability and legibility can almost seem like the same thing. But once you dig deep into each term, you’ll begin to understand how vital it is to master both with your site’s typography. A site that only features readable copy—or, vice versa, legible copy—won’t provide your visitors with a great experience. Only a site that features both readable and legible type will ensure that your visitors keep coming back for more.

Get your own website with great typography!
Our designers can create a unique web design just for you.

About the author:

Marc Schenker is a copywriter and marketer who runs The Glorious Company, a marketing agency. An expert in business and marketing, he helps businesses and companies of all sizes get the most bang for their ad bucks.