Is there a case for uppercase?

A guide to using—or NOT using—uppercase text in your web pages and business documents, and why.

Photo by Alexander Andrews on Unsplash

Let’s do an experiment. Pretend you’re driving down the highway. You need to take the exit for Mockingbird. There’s a sign ahead. You’re driving fast, so you’ll need to read the sign quickly and determine if you need to switch lanes.

How many miles until you reach the Mockingbird exit?

Image created by the author

It’s probably impossible for you to tell.

Now let’s try again.

You’re still driving down the highway, wondering how far it is until the Mockingbird exit. This time, when you glance up, you see this sign:

Image created by the author

Now can you tell how far it is to Mockingbird?

If you said it’s four miles to Mockingbird, you’re correct. But how do you know? You can’t see any letters at all.

What you can see in the second image that you can’t in the first is ascenders and descenders. Ascenders are the part of a lowercase character that extend above the x-height — the letters b, d, h, and k have ascenders. Descenders are the parts of a lowercase character that extend below the baseline — the letters g, j, p and y have descenders. These ascenders and descenders gave you clues that help your brain convert shapes to words.

Image created by the author

Lessons from the road

In the late 1950s, the British government undertook a project to modernize and align signage across all its roads, including street signs that were written in all caps. Two graphic designers, Jock Kinneir and Margaret Calvert, were entrusted with developing a coherent, cohesive system of signage for Britain’s roadways. They found that signs using all capital letters could be illegible to drivers.

They hypothesized and tested using mixed case instead of all caps on street signs. They also considered fonts, and created a new typeface called Transport, based on Aksidenz Grotesk, that were more rounded and had tall x-heights. The new type treatment improved readability at a glance, since a glance may be the only chance a motorist has to read and comprehend a road sign.

We can apply lessons learned from street sign design to our visual communications, from web pages to marketing brochures to business memos.

Is mixed case always better?

For decades, the prevalent thought in typography has been that all caps are harder to read because the words all form the same shape, whereas lowercase text and its ascenders and descenders offer us clues to help our brains recognize words faster. We experienced this in our road sign experiment above.

If we start digging into research, things get a little muddled. A 2005 article from Jacob Nielsen claims that all caps headline slow reading by 10%. On the other hand, research from a 2007 study by Aries Arditi and Jianna Cho shows that at small sizes, uppercase text can be easier to read. A 2009 article from Susan Weinschenk points out that all caps aren’t inherently harder to read; they slow us down because we aren’t used to them.

So is the jury still out on whether uppercase text is acceptable or not? Well, not really. Working with what we know, there’s some guidelines we can follow to help our readers read what we write.

Writing a headline for a business memo? Use mixed case. A title for a web page? Use mixed case. A sentence in a paragraph that needs emphasis? Use mixed case. A block of text that is a full sentence or longer? Use mixed case. A really angry loud message in an internet chat space? Okay, fine, you can use uppercase there.

Mixed case will also be the safer choice for accessibility. It’s estimated that 10–20% of the population has dyslexia. People with dyslexia experience difficulty learning to read or interpret words and letters. Mixed case can improve word recognition, as we saw above with our highway sign experiment.

Is there ever a case for uppercase?

Maybe. But always consider the benefits and disadvantages before committing to uppercase.

Maybe: website navigation.
Uppercase might work when you’re communicating a very brief phrase. Nouns in a global navigation menu is an example of this. More websites are moving away from this, however, for accessibility.

Maybe: very short subheads. Uppercase text will slow your reader down. Sometimes you want that to happen. An example would be a long article broken into sections with very short subheads opening the new section. This would signal to your reader that it’s time to pause before diving into something new.

Maybe: text as graphic elements. Book covers or web page heroes—large banners at the top of a web page—might use all caps for strong visual impact and a contrast to content.

Impactful uppercase text from A Book Apart

In each of these “maybes”, it’s important to note that the text stands alone. The uppercase text is short and usually styled as uppercase for visual differentiation and impact.

Would mixed case also work for each of those “maybe” scenarios?
Probably, but other design adjustment may need to be made. Take the example of the global navigation menu. Using mixed case could help make each word slightly faster to read. But your text should be styled so that it doesn’t look like the rest of the text on the page. Give the nav links unique characteristics so your reader can easily recognize it as navigation. Explore changing size, weight, color, background, or surrounding clear space to avoid too much similarity to page content.

Ultimately, if you choose to use all caps, use it sparingly. Be deliberate. Use it with intention to create impact. Remember that some research suggests avoiding all caps, so experiment with mixed case to achieve your visual goal. Be able to defend your choice to use uppercase instead of the potentially preferable mixed case.