text-transform
Transforms the case of text. Applies uppercase, lowercase, or capitalize visually without changing the original.
Class List
| Class | CSS | Description |
|---|---|---|
ttn | text-transform: none | No transform. Reset inherited transform |
ttu | text-transform: uppercase | All uppercase. For labels, headers, buttons |
ttl | text-transform: lowercase | All lowercase. For email, URL normalized display |
ttc | text-transform: capitalize | Capitalize first letter of each word. For names, titles |
Visual Comparison
Compares each text-transform value on the same text.
None — ttn
the Quick Brown Fox jumps Over the Lazy Dog
Original text displayed as-is
Uppercase — ttu
the Quick Brown Fox jumps Over the Lazy Dog
All characters converted to uppercase
Lowercase — ttl
the Quick Brown Fox jumps Over the Lazy Dog
All characters converted to lowercase
Capitalize — ttc
the Quick Brown Fox jumps Over the Lazy Dog
Only first letter of each word capitalized
Class Details
ttutext-transform: uppercase
Converts all to uppercase. Very common in section headers, buttons, labels. Combined with letter-spacing completes the label style.
<!-- Section label (table header style in this document) -->
<th class="ttu fs12px fw600 ls0-05em cA1A1AA">class</th>
<!-- Button -->
<button class="ttu fs14px fw600 ls0-05em bg6366F1 cFFFFFF py12px px2-4rem br8px bn cp">
get started
</button>
<!-- Badge -->
<span class="ttu fs12px fw600 ls0-05em c34D399 bg34D399-10 py4px px8px br4px">
active
</span>Preview — Label style
Common Combinations
ttu fs12px fw600 ls0-05em | Section label — same style as table headers in this document |
ttu fs14px fw700 ls0-05em | Emphasis label — larger size label |
ttu fs12px ls0-05em cA1A1AA | Secondary label — muted color category display |
ttltext-transform: lowercase
Converts all to lowercase. For normalizing email display or URL-style text.
<!-- Normalize email display -->
<span class="ttl c71717A">User@Example.COM</span>
<!-- URL-style text -->
<span class="ttl fs14px cA1A1AA">/Docs/Getting-Started</span>Preview
User@Example.COM
Email displayed in lowercase
ttctext-transform: capitalize
Capitalizes first letter of each word. For names, titles, menu items.
<!-- Username -->
<span class="ttc cFAFAFA fw600">john doe smith</span>
<!-- Menu Item -->
<nav class="df gap2rem">
<a href="#" class="ttc tdn cFAFAFA hover-c6366F1">home</a>
<a href="#" class="ttc tdn cFAFAFA hover-c6366F1">about us</a>
<a href="#" class="ttc tdn cFAFAFA hover-c6366F1">contact</a>
</nav>Preview
john doe smith
First letter of each word capitalized
ttntext-transform: none
Resets inherited text-transform. Use when a child should maintain original case while parent has ttu.
<!-- Reset parent ttu in child -->
<div class="ttu fs16px cFAFAFA">
SECTION TITLE
<span class="ttn c71717A fs14px ml8px">Original Case Text</span>
</div>
<!-- Responsive reset -->
<h2 class="ttu sm-ttn fs2rem fw700">
Uppercase on desktop only
</h2>Preview
Parent has ttu but green text maintains original with ttn
Common Patterns
Common combinations in table headers, section labels, badges.
<!-- Table header label (actually used in this document) -->
<th class="ttu fs12px fw600 ls0-05em cA1A1AA">column name</th>
<!-- Category label -->
<div class="mb2rem">
<span class="ttu fs12px fw600 ls0-05em cA1A1AA mb8px db">category</span>
<h3 class="fs2rem fw700 cFAFAFA">Actual title stays as original</h3>
</div>
<!-- CTA Button -->
<button class="ttu fs14px fw600 ls0-05em bg6366F1 cFFFFFF py12px px3-2rem br8px bn cp hover-bg818CF8 tall200msease">
subscribe now
</button>| Pattern | Usage |
|---|---|
ttu fs12px fw600 ls0-05em cA1A1AA | Section label / table header — used throughout docs |
ttu fs14px fw700 ls0-05em | Emphasis label — buttons, CTA |
ttc tdn cFAFAFA hover-c6366F1 | Navigation link — capitalize + link style |
ttl c71717A fs14px | Normalized display — email, URL, etc. |
ttu sm-ttn | Responsive reset — uppercase on desktop only |
Tips & Notes
ttu does not change the actual text
text-transform only performs visual transformation. Original text preserved on copy/paste.
Use with letter-spacing
Uppercase text benefits from slightly increased letter-spacing. ttu ls0-05em is a de facto standard for labels, headers.
Accessibility: Screen readers read original text
Screen readers ignore CSS text-transform and read the original. CSS transformation preferred over uppercase in HTML.