How Letterspacing Can Make All Caps Easier to Read

by on 04/19/16 at 2:35 pm

All caps text is like a spice, you don’t want to overuse it. A little can go a long way when you use it on content and menu headings to show contrast from regular body text. But when your headings contain more than a few words, users need to make an effort to read them. This is because all caps text is easy to spot, but hard to read.

All Caps Letterspacing

If you want to make your all caps headings easier to read, increase the letterspacing. All caps text with no letterspacing makes the letters tight and crowded. When the letters are too close, the words are harder to distinguish.

all-caps-readability

It makes the shape of each word look like a rectangle with straight edges. This means all letters have the same height and lose their ascenders and descenders. Ascenders and descenders increase the recognizability of words. Without them, users need to focus closer to recognize each word. This slows users down when they read.

Increasing the letterspacing gives the edges of each word a teeth shape instead of a straight line. The teethy edges give off a unique shape for each word. This allows users to perceive each word differently for faster word recognition. Users don’t need to focus as closely and can read words at a quick glance.

all-caps-letterspacing

Avoid Too Much Letterspacing

Having no letterspacing can make all caps hard to read. But too much letterspacing can also hurt readability. When letters are too far apart, users can have trouble associating letters with words.

A good rule of thumb is to add between 5-12% letterspacing to your all caps text. In CSS, you would set the letterspacing property in the range of 0.05-0.12em. Use your designer’s judgment to know what works best for you.

Letterspacing Example

Apple Music’s app makes good use of letterspacing on their content and menu headings. Their all caps text is easy to read at a glance. This means they didn’t add too much letterspacing, but just enough.

They used all caps to contrast the headings from the body text. But they could’ve used a different font weight and size as well. Sometimes all caps isn’t necessary. For them, it was a stylistic choice to add appeal to their brand.

apple-letterspacing

When All Caps Is Easy to Read

There are cases where all caps text is easy to read and don’t need letterspacing. But those come under certain circumstances. For instance, all caps at large sizes is always easy to read. This is because any text at a large size is easy to read in general.

Another case is when your all caps text only contains 1-2 words. With only a couple words, there’s not much to read as there is to scan. There’s no benefit on helping users read 1-2 words quicker. It’s on making those words easy to spot. This is where all caps text is useful.

Letterspacing works well on all caps headings that have many words. This makes all the difference when users need to read instead of scan. All caps do have a place on user interfaces. But designers need to use them in the right way so that they don’t compromise readability.


Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

5 Responses to “How Letterspacing Can Make All Caps Easier to Read”

  1. Bronson

    Apr 28th, 2016

    Thanks for this great practical advice for making ALL CAPS easier to read. I’m definitely putting this to work.

  2. David Aldred

    Apr 29th, 2016

    Can you comment on the accessibility aspects of this?

    I generally regard all-caps as a major accessibility failure on any website – basing this on advice from Dyslexia organisations. Is altering the spacing actually sufficient to overcome the difficulties of this group, and if so can you point me to research / confirmation from appropriate specialist groups?

    If not, your suggestion remains something which shouldn’t be adopted by any significant website, as it would leave the website owner open to challenge under disability / equality legislation.

    • anthony

      Apr 29th, 2016

      If you need research from specialist groups to tell you how to make a judgment you probably shouldn’t be a designer. All design is judgment. The designer makes decisions on how content and interfaces should be displayed to the user. You should be asking yourself, “what’s my judgment on this based on my personal experience?” not, “where can I find valid research to tell me how to think?”.

      Treating research like the law is dangerous. Research is helpful in educating your judgment. But when you’re looking for it to answer whether you should always or never use all caps, you’re looking for the law. It’s so binary that you blind yourself from considering the context in which it’s used. The context in which you use something is huge. Compare a knife used to commit murder with a knife used for cooking. All knives aren’t bad, it’s the context in which it’s used.

      You should be asking “In what context is all caps effective and in what context is it less?” That leads you to more questions like “why is all caps text so hard to read?” and “what can designers do to make all caps easier to read?”, which is what this article answers.

      • David Aldred

        Apr 30th, 2016

        But your answer, as far as I can see, works only for those without dyslexia.

        I can’t see that you’ve made the basic effort to ensure that it works for people with disabilities. If you haven’t, then you’re acting in a discriminatory fashion, and indeed encouraging others to do so. That’s not responsible design, whatever the context.

        • anthony

          May 2nd, 2016

          I think you need to understand that dyslexics are a subset of a whole set of users. If you improve readability for the whole set of users, it affects the subset as well. You acting as if letterspacing only helps normal users is just plain silly. Letterspacing won’t cure dyslexia, but it’ll make all caps easier to read for everyone. You should do more research on this and offer your insights here instead of criticizing and acting self-righteous.

Leave a Reply to Bronson