text-transform in CSS: changing text case without touching the HTML

An uppercase navigation menu, a section heading with only its first letter capitalized, a label that always stays lowercase no matter what gets typed into it: these are purely visual choices, and they should never depend on how a writer happened to type the text. That is exactly the job of text-transform.

This property changes how a text's case is displayed without touching a single letter of the actual content stored in the HTML. The distinction sounds technical, but it has real consequences for accessibility and for how easily a site can evolve later.

Definition

text-transform changes how text is displayed, in uppercase, in lowercase, or with only the first letter of each word capitalized, without ever modifying the text actually present in the document.

nav a {
  text-transform: uppercase;
}

h2 {
  text-transform: capitalize;
}

A concrete example: a navigation menu

A very common case is to write menu labels normally in the HTML, lowercase with a capital at the start if needed, and then let CSS handle displaying them in uppercase for a more formal look.

nav a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

That added letter-spacing and word-spacing is not a coincidence: capital letters, visually denser, almost always benefit from being slightly spread out when produced by a CSS transformation rather than typed directly in uppercase.

Why not just type in uppercase directly

It would seem simpler, on the surface, to write "HOME" directly in the HTML instead of going through text-transform: uppercase;. It is nonetheless a bad habit, for two concrete reasons.

The second benefit is purely practical: if the design decision changes and uppercase is no longer wanted, a single CSS line, text-transform: none;, does the job, instead of retyping every label everywhere it appears in the code.

The special case of capitalize

capitalize puts a capital letter at the start of every word, including small words like "and" or "the" that would not normally be capitalized mid-sentence. On a heading where every word should be capitalized, the effect works perfectly; on a regular sentence where only the first word should carry a capital, the result can look odd, closer to an English-style title.

Frequently asked questions

No, copying text transformed by CSS pastes the original text exactly as written in the HTML, without the visual transformation. That is exactly the proof that text-transform only affects display, never the actual content.

Capital letters naturally take up more width and leave less white space between them than lowercase letters. That is exactly why a slight letter-spacing and word-spacing almost always accompanies a text-transform: uppercase; on a label.

Behavior can vary slightly between browsers on edge cases like words starting with an apostrophe, but overall accented letters are handled correctly and the actual first letter of the word receives its capital, accented if needed.

Whenever casing is a purely visual choice, like an uppercase menu applied across every language on the site, text-transform is preferable, because it applies uniformly regardless of how each piece of content was originally entered, sometimes by different people.