What does the text-transform property do in CSS?

The text-transform CSS property specifies how to capitalize an element's text, allowing developers to control the letter casing without altering the actual content. It's a powerful tool for visual styling, enabling text to appear in all-uppercase, all-lowercase, or with each word capitalized, and it can also help improve legibility for ruby.

Understanding the text-transform Property

This property is purely for presentational purposes, meaning it changes how text looks on the screen but does not modify the underlying HTML content. This separation of content and presentation is a core principle of CSS, offering flexibility and maintainability. It's commonly used for headings, navigation links, or specific UI elements where consistent capitalization is desired.

Common text-transform Values and Their Effects

The text-transform property accepts several values, each providing a distinct effect on the text's capitalization.

Value	Description	Example Input & Output
none	Prevents any capitalization or transformation. The text appears exactly as it is written in the HTML.	Input: Hello World Output: Hello World
capitalize	Transforms the first letter of each word to uppercase. Other characters remain unchanged (unless they are already uppercase). This can be useful for titles or proper nouns.	Input: the quick brown fox Output: The Quick Brown Fox
uppercase	Converts all characters in the text to uppercase. This is often used for headings, acronyms, or short, emphatic text.	Input: css properties Output: CSS PROPERTIES
lowercase	Converts all characters in the text to lowercase. Useful for standardizing user input display or creating a subdued visual effect.	Input: WEB DEVELOPMENT Output: web development
full-width	Transforms all characters into their full-width (wide) equivalents. This is particularly relevant for East Asian typography (like CJK characters), where it ensures consistent spacing and can significantly improve legibility, especially in contexts such as ruby annotations.	Input: abc 123 Output: ａｂｃ　１２３ (Note: Actual display depends on font support)
full-size-kana	Transforms all small Kana characters (primarily Japanese) into full-size Kana characters. This helps normalize text appearance and readability in specific linguistic contexts.	Input: っぁ (small kana) Output: つあ (full-size kana) (Note: Actual display depends on font and character set)

none

This is the default value, leaving your text exactly as it's typed. It's often used to override an inherited text-transform value from a parent element.

p {
  text-transform: none; /* Text appears as written */
}

capitalize

The capitalize value is handy for titles and names, ensuring the first letter of each word is capitalized.

h3 {
  text-transform: capitalize;
}
/* "welcome to our website" becomes "Welcome To Our Website" */

uppercase

For emphasis or specific design aesthetics, uppercase can convert all letters to their capital forms.

.button-text {
  text-transform: uppercase;
  font-weight: bold;
}
/* "read more" becomes "READ MORE" */

lowercase

To present text uniformly in small letters, lowercase is the appropriate choice.

span.tag {
  text-transform: lowercase;
}
/* "NEW FEATURE" becomes "new feature" */

full-width

This value is crucial for internationalization, especially for text involving CJK characters. It ensures that characters, which might otherwise appear as half-width, are displayed as full-width. This transformation can dramatically enhance the visual balance and readability of mixed-script content, fulfilling its role in improving legibility for elements like ruby annotations.

.cjk-text {
  text-transform: full-width;
}
/* Ensures consistent character width for CJK text */

full-size-kana

Specifically for Japanese text, full-size-kana addresses the display of Kana characters, converting small Kana to their standard full-size forms for better readability and consistent typography.

.japanese-text {
  text-transform: full-size-kana;
}
/* Ensures all Kana characters are full-size */

Practical Applications and Best Practices

• UI Consistency: Use text-transform to maintain a consistent look for elements across your user interface, such as navigation links, buttons, or form labels.
• Accessibility: While uppercase can be visually striking, avoid using it for long blocks of text as it can significantly reduce readability for some users, especially those with dyslexia.
• SEO: Since text-transform only affects presentation, it has no direct impact on search engine optimization. Search engines read the actual HTML content.
• Internationalization (i18n): The full-width and full-size-kana values are vital for developing multilingual websites, ensuring proper rendering and legibility of different scripts.
• Don't Alter Content: Remember that this property only changes the visual display. If the underlying data needs to be capitalized (e.g., for database storage), use server-side scripts or JavaScript.

How to Use text-transform

Applying text-transform is straightforward. You select the element you wish to style and declare the property with your chosen value within your CSS.

/* Example: Making all headings uppercase */
h1,
h2,
h3 {
  text-transform: uppercase;
}

/* Example: Capitalizing the first letter of each word in a class */
.product-title {
  text-transform: capitalize;
}

/* Example: Ensuring a footer text is always lowercase */
footer p {
  text-transform: lowercase;
}

Further Resources

For more in-depth information and browser compatibility details, refer to the MDN Web Docs on text-transform.