Text Transform
A CSS property that changes the capitalisation of text without altering the source HTML.
Plain English
Text transform lets you display text in ALL CAPS, Title Case, or lowercase without editing the actual content. This is the right way to apply capitalisation rules in a design system — rather than writing HTML in all-caps (which breaks screen readers and search indexing), you apply text-transform: uppercase in CSS and the source stays readable while the display changes.
Technical
The text-transform CSS property accepts: uppercase (all caps), lowercase (all lower), capitalize (title case — first letter of each word), and none (default). Critical accessibility note: screen readers may read uppercase text letter-by-letter (e.g. "N-A-V") rather than as a word. When using text-transform: uppercase on labels, pair with letter-spacing: 0.06–0.12em to compensate for the reduced legibility of all-caps text.
Live Demo
Text transform
Normal case
Design Playbook
noneDefault — for body text and most headings
Uppercase
Design Playbook
text-transform: uppercaseLabels, badges, nav items, button text
Lowercase
Design Playbook
text-transform: lowercaseBrand names, stylistic choice only
Capitalize
Design Playbook
text-transform: capitalizeTitle case for headings and proper nouns
Use CSS transforms rather than typing in all-caps — keeps the source text semantic.
Usage
✓ Good usage
Apply text-transform: uppercase + letter-spacing: 0.08em to section category labels (e.g. "SPACING", "TYPOGRAPHY") for a polished editorial feel.
✗ Bad usage
Writing body paragraphs in ALL CAPS in the HTML source — breaks screen readers, SEO, and copy-paste behaviour.
Recommended values
- uppercase + letter-spacing: 0.08em — category labels, section markers, badge text
- capitalize — title-cased nav items, button labels (style-dependent)
- none — all body text, headings you write properly-cased in HTML
- lowercase — brand-specific stylistic choice (rare)
Common mistakes
- Writing content in ALL CAPS in HTML instead of using text-transform — breaks accessibility.
- Using text-transform: uppercase without adding letter-spacing — uppercase text is harder to read without extra spacing.
- Applying capitalize to body text — looks cheap and is non-standard in most design systems.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use text-transform: uppercase + letter-spacing: 0.08em for all category labels and nav section headers. Keep all other text at text-transform: none with proper case in the HTML.