text-transform

Definition

The text-transform CSS property is used to control the capitalization or transformation of text. It allows you to change the appearance of text by converting it to uppercase, lowercase, capitalize the first letter of each word, or applying other transformations.

The text-transform property accepts several values:

none: This is the default value. It leaves the capitalization of the text unchanged.
capitalize: Converts the first character of each word to uppercase, while leaving the rest of the text in lowercase.
uppercase: Converts all characters to uppercase.
lowercase: Converts all characters to lowercase.
full-width: Converts all characters to their full-width equivalent, which is commonly used in East Asian typography.
inherit: Inherits the value from the parent element.

Here’s an example:

.heading {
  text-transform: uppercase;
}

In this example, the .heading class sets the text-transform property to uppercase, converting all characters within the element to uppercase.

It’s important to note that the text-transform property affects only the visual appearance of text and does not change the underlying text content. It is primarily used for stylistic purposes or to conform to specific typographic conventions.

The text-transform property is commonly used to style headings, buttons, or other text elements to achieve a consistent capitalization style. For example, using uppercase can create a bold and attention-grabbing appearance, while capitalize can make the text more visually pleasing for titles or headings.

Keep in mind that the text-transform property may not work as expected with certain Unicode characters or languages that have complex capitalization rules. It’s important to test and consider the impact on internationalization and accessibility when applying text transformations.

Syntax

.btn {
  text-transform: uppercase;
}

Values

none: preserve original casing.
capitalize: uppercase the first letter of each word.
uppercase / lowercase: convert all letters.
full-width: convert to full-width Unicode characters (CJK contexts).

Practical Examples

.btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Transform case for UI elements without altering the underlying text content.

HTML

Code

<div class="flex gap-4">
  <button class="rounded-full bg-slate-900 px-5 py-2 text-sm font-semibold text-white">Default Case</button>
  <button class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold text-white tracking-wide" style="text-transform: uppercase;">Uppercase</button>
</div>

Tips & Best Practices

Use CSS transforms instead of editing copy so screen readers maintain correct pronunciation.
Pair with letter-spacing when applying uppercase to improve readability.
Avoid transforming long-form body text; it can hurt comprehension.

Accessibility & UX Notes

Keep the DOM text in natural casing so assistive technologies read words correctly.

Browser Support

Universally supported.

font-variant for small caps.
letter-spacing and word-spacing to adjust spacing after case changes.
content for pseudo-element labels that may also need transformation.