Why your Uppercase/All Caps Text Probably Need Some Letterspacing [Typography]

Learn about why you’ll often benefit from using a bit of letterspacing on your uppercase text elements — and how to do it with CSS.

In typography, when you use uppercase/all caps (capital letters) on text elements you usually need to add a bit of breathing room between the letters, otherwise, they become too tight to read comfortably.

Letterspacing is also known as tracking. They’re synonyms. Both refer to the amount of space between a group of letters (words). In communication, the term letterspacing is more used on the web, while tracking is used more in print typography.

Let’s look at some examples.

Normal vs. Uppercase

Compare the following text elements, normal case, and all caps/uppercase:

Typography

Typography

Do you see a problem?

It’s okay if you don’t. When using normal/default font-weights it’s often not a problem. It depends on the typeface design, and how it’s used.

Normal case vs. Uppercase (bold)

Now let’s compare the same examples, but this time we add a bold font-weight:

Typography

Typography

Do you see how tight the all caps text looks now when we use thicker letter strokes (bold)? Now you can see that some of the letters are touching each other.

In CSS, a bold font-weight can be declared by using font-weight: bold;. You can also use numeric values, but make sure that you know how many font weights options are available from your font-family of choice. 700 is usually the equivalent of bold — but not always.

Letterspacing (aka tracking)

Let’s make a copy of the uppercase text element example from before and give it 4px of letterspacing, and see how the two compare:

Typography

Typography

Wow, what a difference! The first example almost evokes a claustrophobic reaction, while the second one gives the opposite effect.

In CSS, letterspacing is declared with the letter-spacing property, e.g.: letter-spacing: 4px; It can be spelled with or without hyphen (-) in regular language, but in CSS it’s always with a hyphen.

Let me be clear. I’m not suggesting that the second text element example with the added letterspacing is always the superior choice. It depends on the type of atmosphere/mood you’re trying to establish in your specific use case.

One of the most powerful tools to express and reinforce the theme of a movie on a poster is typography. A skilled typographer will carefully make decisions about:

• typeface/font-family
• typeface classification (serif, sans-serif, etc.)
• font-sizes
• letter casing (uppercase, lowercase, etc.)***
• font-weights (normal, bold, etc.)
• font styles (regular/normal/italic)

Whether you’re working on a movie poster, a book cover, a food label, or something else, your typographic formatting decisions should be based on the context of the task at hand.

Letterspacing is just one, but a powerful element of typography:

CAPTIVITY

FREEDOM

Can you feel the difference?

Feelings aside, consider this: Uppercase text, in general, is already harder to read than normal case text, because the symmetric and proportionate structure that letters get from using this letter case type, make it hard to distinguish individual letters in a word — especially in a sentence or paragraph.

In summary:

• For the sake of reader-friendliness use uppercase text sparingly. It can work well for titles or short headings, but not for whole sentences or paragraphs.
• As a rule of thumb uppercase/all caps text benefit from getting a little bit, sometimes a lot, of spacing between letters to make the text easier to digest.
• Text tends to be more aesthetically pleasing when it doesn’t look like you glued the letters together. Visuals matter.
• Sometimes tight tracking/letterspacing is exactly the right fit.

It’s not black and white. Context is key.