# All caps text: when uppercase helps and when it hurts [Canonical HTML page](https://gradiently.design/guide/all-caps-typography) Capitals give a label authority and a headline weight, and turn a paragraph into a wall. Here is where uppercase earns its place, how much to space it, and how to set it properly on the web. ## The short version - All caps text works best for short labels, eyebrows, buttons and headlines of a few words. - Capital letters share the same height, so words in all caps lose the varied outline that helps people recognise them quickly. - All caps needs extra letter spacing: around 0.08em to 0.12em for small labels and 0.01em to 0.03em for large headlines. - On the web, type text in normal case and apply uppercase with CSS text-transform, so copying, translation and screen readers get the natural words. - Long passages, body text and anything already loud should stay in sentence case. **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. A portrait post where the headline, date and details are all set in capital letters and compete for attention Everything in capitals: nothing stands out because everything is shouting. The same post with only the date in small capitals and the headline and details in sentence case Capitals kept for the small eyebrow. The headline and details read faster in sentence case. ## 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 ### Keep out of caps - Body text and paragraphs - Headlines longer than about four words - Every heading on a page at once - Script and decorative faces - Messages that must feel calm or kind - Legal text and terms ### Good in caps - Eyebrows and labels - Buttons and navigation - One to three word headlines - Sturdy sans and slab faces - Sales, openings and urgent signs - Table and chart headings 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](https://gradiently.design/guide/title-case-vs-sentence-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](https://gradiently.design/guide/letter-spacing) explains tracking in general; for caps specifically, use these starting points. | Use | Size | Letter spacing | | --- | --- | --- | | Tiny label or eyebrow | 11 to 13 px on screen, 28 to 32 px on a 1080 px post | 0.08em to 0.12em | | Button or navigation | 14 to 16 px | 0.04em to 0.08em | | Subheading in caps | 18 to 24 px | 0.04em to 0.06em | | Large headline in caps | 48 px and up | 0.01em to 0.03em | | Huge display word | 120 px and up | 0 to 0.02em, check pairs by eye | Starting values in em, so the spacing scales with the size. Adjust by eye for your font. 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](https://gradiently.design/guide/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. ```css .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; } ``` The `case` feature lifts punctuation to sit centred on capitals. `all-small-caps` gives a quieter alternative to full capitals. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 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](https://gradiently.design/guide/headline-fonts) helps either way. [Text layout for social media posts](https://gradiently.design/guide/text-hierarchy-social) shows how the levels fit together. A vertical story with NOW OPEN in large capitals, a small capital eyebrow and a sentence case detail line Two words that work in capitals, with the longer details left in sentence case underneath. 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. ## FAQ ### Is all caps text harder to read? For more than a few words, yes. Capitals share one height, so words lose their recognisable outline and take longer to read. ### How much letter spacing should all caps have? About 0.08em to 0.12em for small labels, 0.04em to 0.06em for subheadings and 0.01em to 0.03em for large headlines. ### Should I type in capitals or use text-transform uppercase? Use `text-transform: uppercase` on normal case text. Copying, translation and screen readers then get the natural words. ### Do all caps headlines look like shouting? Long ones do. One to three words in capitals reads as confident; a full sentence reads as shouting.