How to improve usability through typography, legibility and readability.
Whether your product requires users to read one word or 100,000 words, you should pay attention to the usability and user experience of typography.
Typography is the art of arranging type. It might sound simple, but there’s a lot that goes into it, like choosing typefaces, point sizes, colours, and designing the spaces between text blocks, lines and letters.
Typography exists all around us — in books and magazines, on street signs, on websites and apps, and on product packaging.
Although it’s an art, designing type is also essential in the context of usability. You want your users to read and understand text without a problem.
Before I pass along some helpful tips for text design, let’s review some key typography terms. This is not an exhaustive list of definitions, but it’s a starting point for those who are new to the type game.
The letters in the Harper’s Bazaar logo have serifs – ending strokes on the characters.
The letters in the American Apparel logo do not have serifs.
Type nerds know that there is a lot more we could talk about here (there is a great illustrated glossary of more typography terms on Canva), but let’s jump into why all of this stuff matters for usability and user experience. Specifically, let’s go over two aspects of type usability: legibility and readability.
Legibility refers to how easily a reader can distinguish individual characters. At smaller point sizes, you mind find that, for example, a lower case ‘e’ and a lower case ‘o’ are difficult to tell apart, creating a legibility problem.
Similar letter shapes can be especially problematic for readers with dyslexia, which is why a typeface designed for dyslexic readers contains very distinct characters. Here’s our guide to designing websites for people with dyslexia for more advice.
The biggest takeaway for legibility is this: make sure your chosen font is legible at the point size readers will see. Check legibility as part of your UX testing process.
Besides point size, there are a few general guidelines about creating legible text. Here are five of them:
Image from UrbanFonts
Bum calories? A kerning fail shared by @joshocall on Instagram.
Readability is similar to legibility, but refers to the broader understandability of the text. Readability encompasses how easily a reader can visually understand words, sentences, and paragraphs. Instead of thinking of legibility and readability as separate categories, consider them parts of the same general idea of usability.
Design choices that impact readability include point size, spacing, and line length. As with legibility, conducting UX tests with users will help assess text readability, especially if you test with users with varying ages and visual capabilities.
Here are five typography guidelines for readability:
Bolda by Morten Iveland is very cool, but I sure wouldn’t want to run into it as a Kindle book.
I hope you’ve found it helpful to browse this introduction to typography and usability. We’ve just covered the basics here, and there is plenty more information out there about typography, legibility, and readability for good UX.
If you are interested in learning more, here are some resources: