A user experience guide to typography

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)

• 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. 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:

• 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.

• 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.

• 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.

• 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.

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.

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

• 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.

• 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.

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:

• Beginning Graphic Design: Typography [YouTube, GCFLearnfree.org]
• Choosing the Right Font: A Guide to Typography and User Experience [UserTesting]
• 10 Tips on Typography in Web Design [UX Planet]
• Why Don’t Online Readers Like Italics? [Fast Company Design]
• Size Matters: Balancing Line Length and Font Size in Responsive Web Design [Smashing Magazine]