All caps text: when uppercase helps and when it hurts

All caps text helps when it's short: an eyebrow above a headline, a label, a button, a date, or a headline of two or three words. It hurts when it runs long. Capitals are all the same height, so a word in uppercase becomes a plain rectangle instead of a recognisable shape, and a sentence of them is slower to read and comes across as shouting. Used briefly and with a little extra letter spacing, capitals add order and authority; used for everything, they flatten the hierarchy.

Why all caps is harder to read

Lowercase letters have ascenders (b, d, h, k) and descenders (g, p, y). Together they give each word a distinctive outline, and practised readers use that outline to recognise familiar words without spelling them out. In capitals every letter sits between the same two lines. The outline becomes a box, and the reader has to look harder at each letter. Over two or three words that's fine. Over a paragraph it's tiring.

When all caps works

• Eyebrows and kickers: a small category or date above the headline, like NEW IN or EPISODE 12. Caps tell the reader it's a label, not content.
• Navigation and buttons: short, scannable words where every item is the same kind of thing.
• Short headlines of one to three words: SALE, NOW OPEN, SOLD OUT. The shape of the block becomes part of the design.
• Wordmarks and logos: many strong logos are set in capitals, where the word is seen as a fixed image rather than read.
• Data labels and table headings: short capital headings above columns keep them distinct from the values below.

When all caps hurts

Script faces deserve a special warning: their capitals are designed to start words, not to sit together, and a word in script capitals is often close to unreadable. Tone matters too. Capitals read as loud, which suits a sale and undermines an apology. If you're deciding between capital styles for headings more generally, sentence case vs title case covers the quieter options.

How much letter spacing all caps needs

Fonts are spaced for lowercase. Capitals placed side by side, with their straight sides and wide shapes, look cramped at default spacing. Opening the tracking gives each letter room and makes the word easier to scan. The smaller the text, the more space it needs. Letter spacing explains tracking in general; for caps specifically, use these starting points.

Large capitals may also need hand kerning on awkward pairs such as AV, LT and TY, where the default gap looks too wide. Tracking vs kerning explains the difference between the two adjustments.

Using text-transform uppercase in CSS

Write the words in normal case in your HTML and apply capitals with CSS. Copying, search results and translation tools then get natural text, and you avoid the risk of a screen reader treating a word typed in capitals as an abbreviation and spelling it out. It also lets you change your mind later without retyping anything.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

Set the page's lang attribute too. text-transform follows language rules, which matters for words like the Turkish dotted i, and the MDN reference notes how each language is handled. Translated labels are often longer than English, and capitals make them wider still, so leave room in buttons and tabs.

All caps on social posts

On a phone, capitals at small sizes can hold up better than small lowercase, because their shapes are simpler. That makes caps a good choice for the tiny details on a post: a date, a handle, a page number on a carousel. For the headline, use capitals only if it's very short; otherwise sentence case reads faster in the moment someone gives a post. A sturdy headline font helps either way. Text layout for social media posts shows how the levels fit together.

In Gradiently, the Designer writes headlines and details for you and lays them out in your Mark, and every word stays editable in the Studio afterwards. Auto ink keeps small capital labels as readable as the headline by picking light or dark type for each line from the Mark's palette.