Why should you avoid all caps text?

You should avoid all caps text for anything longer than a few words because it's slower and more tiring to read than normal mixed-case text. Capital letters are all the same height and have fewer distinctive shapes than lowercase letters, so words look more uniform and readers have less to go on. All caps also takes up more space, reduces the impact of real emphasis, and is widely read as shouting in digital communication. It still has a place in short labels, buttons, small headings and acronyms, but when you use it, set it with CSS rather than typing in capitals, and give it extra letter spacing so it stays legible.

Uppercase is one of the easiest ways to make text look important, which is exactly why it's overused. A navigation bar, a hero heading and a call-to-action button all in capitals compete with each other, and long uppercase paragraphs in legal notices or banners are often skipped entirely. In this article you'll learn why all caps text is harder to read, where it genuinely works, how to style uppercase properly in CSS, what accessibility issues to watch for, and better alternatives for adding emphasis.

Why All Caps Text Is Harder to Read

Most of what people read is in lowercase, with capitals used at the start of sentences and names. Readers are simply more practised with mixed case. There are also a few structural reasons uppercase slows people down.

Capitals Have Less Variety

Lowercase letters have ascenders (b, d, h, k, l) that rise above the x-height and descenders (g, j, p, q, y) that drop below the baseline. These give each word a varied outline. Capitals all sit between the baseline and the cap height, so every word is roughly a rectangle:

Mixed case:  Typography helps people read
All caps:    TYPOGRAPHY HELPS PEOPLE READ

It was once widely claimed that people recognise whole words by these outlines, sometimes called "word shape" or Bouma shapes. Reading researchers now generally think readers identify letters in parallel rather than reading outlines, so that explanation is disputed. The practical result is the same either way: uppercase letters are less distinct from one another, readers see them less often in running text, and long passages in capitals take more effort.

Capitals Take More Space

Uppercase letters are wider than lowercase ones. The same sentence set in capitals typically runs noticeably longer, so it wraps onto more lines, crowds buttons and narrows the space left for other content. On mobile screens, an all caps heading that fitted on two lines in mixed case may need three.

It Reads as Shouting

In emails, chat and social media, capitals have long been understood as raised voice. On a website, an all caps paragraph can feel aggressive or alarmist, especially in error messages and warnings, where a calm tone is more reassuring.

It Weakens Real Emphasis

Emphasis works by contrast. If menus, headings, buttons and labels are all uppercase, nothing stands out. It's much more effective to keep capitals for one or two specific roles.

Where All Caps Works

Uppercase isn't banned. In the right places, it adds structure and rhythm:

• Short labels and eyebrows: A small uppercase label above a heading, such as "CASE STUDY", is a common and effective pattern.
• Buttons with one or two words: "SUBMIT" or "ADD TO BASKET" can work if the brand style calls for it, though sentence case is often friendlier.
• Small section headings: Sidebar titles, footer column headings and table headers in small, spaced capitals help organise content.
• Acronyms and initialisms: BBC, NASA and HTML are written in capitals by convention.
• Logos and display type: Large, short headlines in a typeface designed for capitals can look striking.

The common thread is length. Uppercase works for a handful of words that people scan, not text they have to read.

Don't Use It For

• Paragraphs and body text: Including legal small print, disclaimers and terms. Text written to be read should be easy to read.
• Long headings: A ten-word heading in capitals is tiring to scan.
• Form fields and validation messages: Error messages in capitals feel alarming.
• Long navigation menus: A short menu in small caps is fine; a menu with many long items gets hard to scan.

Style Uppercase With CSS, Not the Keyboard

When you do want capitals, write the text in normal case in your HTML and transform it with CSS:

<p class="eyebrow">Case study</p>
<h2>How a small bakery doubled online orders</h2>

.eyebrow {
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

This has several advantages:

• Easy to change: If the design moves away from uppercase, you change one line of CSS rather than retyping content.
• Better for content reuse: The same text appears in normal case in search results, RSS feeds, social previews and reader modes.
• Better for screen readers: Text typed in capitals is more likely to be read letter by letter as an acronym, depending on the screen reader and the word.
• Correct for each language: text-transform follows language rules, provided you set the lang attribute.

Add Letter Spacing

Most fonts are spaced for lowercase text. Capitals sitting next to each other at default spacing look cramped, especially at small sizes. A positive letter-spacing of roughly 0.05em to 0.12em restores breathing room. Larger display headings need less extra spacing than small labels:

.label-small {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.display-heading {
  text-transform: uppercase;
  font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  letter-spacing: 0.02em;
  line-height: 1;
}

Because letter spacing is also added after the last character, centred uppercase labels can look slightly off-centre. If that's noticeable, compensate with a small amount of padding on the opposite side or a negative margin equal to the letter spacing on the end.

Use Case-Sensitive Forms

Many OpenType fonts include case-sensitive forms, which raise hyphens, brackets, colons and some other punctuation to sit centrally against capitals instead of against lowercase letters. Enable them for uppercase text:

.eyebrow,
.label-small {
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}

Fonts without the feature simply ignore it, so it's safe to apply.

Consider Small Caps

For acronyms in running text, full-height capitals can look loud. Small caps are capital letterforms drawn at roughly the x-height, so they blend into a paragraph. If your font includes true small caps, use font-variant-caps:

abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
}

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> publishes the guidelines.</p>

If the font lacks small caps, browsers synthesise them by shrinking full capitals, which can look thin. Check the result and avoid it if the synthesised version looks weak. See what small caps are and how to use them properly for more detail.

Accessibility Considerations

All caps text raises a few specific accessibility issues beyond reading speed.

Readers With Dyslexia and Low Vision

Dyslexia guidance, including the British Dyslexia Association's style guide, specifically advises against long passages in capitals. For people with low vision who rely on high magnification, uniform-height capitals can also be harder to follow. Keep uppercase short in any content where accessibility matters, which is all content.

Screen Readers and Typed Capitals

How screen readers handle capitals varies. Many read uppercase words normally, but short words typed in capitals may be spelled out as if they were acronyms, and some voices change pitch or emphasis for capitals. Using text-transform keeps the underlying text in normal case, which avoids most of these problems.

The reverse is also true: real acronyms should be typed in capitals in the HTML, because that's what they are.

Copying Text

When users copy text styled with text-transform: uppercase, browsers differ in whether they copy the displayed capitals or the original case. If people are likely to copy the text, such as a reference number or a code, show it in its actual case instead of transforming it.

Language-Specific Rules

Uppercasing isn't the same in every language. With the correct lang attribute, browsers handle cases such as:

• German: The sharp s (ß) uppercases to SS in most contexts.
• Turkish and Azerbaijani: The dotted lowercase i uppercases to a dotted capital İ, not a plain I.
• Greek: Accents are normally dropped in uppercase Greek, and some browsers, such as Firefox, remove them automatically when lang="el" is set.

<p lang="tr" class="eyebrow">istanbul</p>

With lang="tr", the browser renders this as İSTANBUL with a dotted capital I. Without it, you get the English result. This is another reason to type in normal case and let CSS do the transformation.

Better Ways to Add Emphasis

If you're reaching for capitals to make something stand out, consider these options first:

• Weight: A bolder weight draws the eye without changing letter shapes. One step heavier is often enough.
• Size: A modest increase in size establishes hierarchy more naturally than uppercase.
• Colour: An accent colour for a label or link is effective, as long as it meets contrast requirements.
• Space: White space around an element isolates it and gives it importance.
• Position: Putting a message near the top or next to the relevant control often matters more than how it's styled.

/* Instead of shouting in capitals */
.notice {
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid #b45309;
  background-color: #fffbeb;
  color: #422006;
}

A calm, well-structured notice like this communicates importance without the strain or tone of all caps.

---

FAQ: All Caps Text

---

Conclusion

All caps text is harder to read than mixed case because capitals are uniform in height, less familiar in running text and wider, and it carries a shouting tone that rarely helps. Overuse also cancels itself out: when everything is in capitals, nothing is emphasised. That's why it's best kept away from paragraphs, long headings, error messages and legal text.

Used deliberately, uppercase is still a useful tool for short labels, small headings, buttons and acronyms. Type the content in normal case, apply text-transform: uppercase in CSS, add a little letter spacing, enable case-sensitive forms where the font supports them and set the right lang attribute. For everything else, use weight, size, colour and space to create emphasis that readers can actually take in.