by anthony 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.
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.
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.
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.
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.