A user experience guide to typography How to improve usability through typography, legibility, and readability

typeface template

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.

What is 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.

Basic typography terms

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.

  • Character: A single element, like a letter, number, or punctuation mark
  • Typeface: A font family containing a type design’s full range of characters (e.g., the Arial typeface collection includes Arial Regular, Arial Italic, Arial Bold, Arial Bold Italic, and Arial Black)
  • Font: A single member of a typeface (e.g., Arial Bold)
  • Point size: A point is the smallest unit of measure in typography, used to measure characters and spacing
  • Serif: The ending strokes of characters that look like little crosslines or feet; typefaces are categorized as serif or sans-serif (without serifs)
Harper’s Bazaar logo

The letters in the Harper’s Bazaar logo have serifs – ending strokes on the characters.

american apparel logo

The letters in the American Apparel logo do not have serifs.

  • Ascenders: Not Ace Enders, but the part of a letter that projects above the midline/x-height, such as in lower case ‘b’ or ‘h’
  • Descenders: The part of the letter that drops below the baseline, such as in lower case ‘g’ or ‘y’
  • Line length: The distance between the left and right edges of a text block
  • Kerning: The space between individual characters
  • The quick brown fox jumps over the lazy dog: A great sentence for testing type, because it contains all the letters in the English language (which is also a fancy party fact you can use)

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.

Designing for legibility

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.

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:

  • Upright type is known to be more legible than italic type, so you should generally use italic type sparingly rather than for full text blocks.
  • Serifs are thought to help with legibility. The little ‘feet’ on the characters make them more distinct from one another. Traditionally, however, designing for the web meant using sans-serif typefaces because screens weren’t that great, and the serifs muddied things up. This is still possibly an issue for very small point sizes. A rule of thumb is to opt for serif for print and sans-serif for digital, but practically, it might just come down to preference.

Image from UrbanFonts

  • If kerning is off, readers might misread letters. Kerning is about making sure the spacing between letters look right, so, for example, users don’t read ‘click here’ as ‘dick here.’ There’s a lot you can do to kern properly to avoid embarrassing kerning fails.
kernng fail

Bum calories? A kerning fail shared by @joshocall on Instagram..

  • Text case influences legibility, so go easy on that caps lock key. Psychologists suggest that we recognize a word largely by its shape — by the pattern of ascenders, descenders, and neutral letters. This means that upper case text slows down our reading process. Avoid upper case for long pieces of text.

all upper case text

  • Low color contrast creates legibility problems. The basics of color contrast are easy to understand: higher contrast between text color and background color is better for legibility. However, some trends push back on this idea — lower-contrast text (like grey text on a grey background) can look fresh and modern, but it comes at the expense of usability.

good and bad text contrast

Designing for readability

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:

  • The optimal line length is considered 50-100 characters, or 30-40 characters for mobile. When line lengths are too long, it’s tiresome and difficult to read smoothly from line to line. Think about those awful websites with text that stretches the width of the full page. No thanks.
  • ‘Display fonts’ are okay for headlines or logos, but not great for long written material. Be careful with those fonts that are decorative, interesting, or unique, but not super readable.
Bolda by Morten Iveland

Bolda by Morten Iveland is very cool, but I sure wouldn’t want to run into it as a Kindle book.

  • Alignment matters. Text alignment can be justified or unjustified, but unjustified is typically more readable.

justified alignment

  • Create a visual hierarchy. Good typography is a navigating tool, guiding the reader’s eye. Use clear headings and an organised layout. Short, simple sentences are truly best.

visual hierarchy in text

  • Try to avoid text orphans. Orphans are when the last word of a phrase (or last word or line of a paragraph) falls by itself. All alone. Orphaned. The extra white space is awkward and the sentence ends abruptly. Minimise these by adjusting spacing or line length.

text orphans

Summary

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:

Our UX blog is on the move...

We're now publishing all of our brand new content on the UserZoom UX blog. All of our previously published articles will also be migrating to UserZoom over the coming months.

Don't worry, we'll still be just as accessible, interesting, helpful and entertaning as ever. We just have a different name and an owl instead of a question mark for a logo.

Come say hello!

Main image by Marcus dePaula

Becca Kennedy

Becca Kennedy is a Human Factors Psychologist and cofounder of Kennason, a UX consulting company in Upstate New York. Say hello on Twitter: @becca_kennedy

4 Responses to “A user experience guide to typography

  • Have you checked the correct definition of _readability_? It has nothing to do with fonts nor with justified text, but with understandability (is your text intelligible to the target audience)?
    You may also search for “readability indices”. Ex. https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests

  • Becca Kennedy
    8 months ago

    You are very correct! But there is also a definition of readability that is specific to typography, which is more similar to legibility and which I have discussed here.

  • It would be interesting to check your source. Where can we find a definition of readability linked to typography (apart from your blog article)?

  • Good article. The discussion on “readability” seems a little academic. In my work with older adults, people with dyslexia, etc., typography is a big factor in readability. If you spend all your mental energy decoding small text with poor contrast, for example, then you’ve got little energy left for the concept being written about, even if it is in plain English.

Leave a Reply