📌 Introduction

The text-transform property in CSS controls the capitalization of text. It allows you to convert text to uppercase, lowercase, or capitalize the first letter of each word — all without modifying the actual HTML content. This makes it a powerful tool for headings, buttons, UI labels, and consistent typography. ✨

🎯 Why Use text-transform?

🧠 Available Values

1. none

No transformation is applied (default behavior).

2. uppercase 🔠

Converts all letters to uppercase.

3. lowercase 🔡

Converts all letters to lowercase.

4. capitalize ✨

Capitalizes the first letter of each word.

5. full-width 🧱

Converts characters to their “full-width” Unicode versions — often used in East Asian typography.

6. full-size-kana 🇯🇵

Converts Japanese katakana characters to full-width size. (Useful for Japanese UI/typography.)

✨ Syntax

selector {
  text-transform: none | uppercase | lowercase | capitalize | full-width | full-size-kana;
}

🔥 Examples

1. Uppercase Headings

h1 {
  text-transform: uppercase;
}

2. Capitalizing Titles

.title {
  text-transform: capitalize;
}

3. Lowercase Text

p.note {
  text-transform: lowercase;
}

4. Japanese Full-Size Kana

.jp-text {
  text-transform: full-size-kana;
}

📊 Comparison Table

🖼️ Visual Example

🎉 Conclusion

The text-transform property is a simple yet powerful CSS tool that ensures consistent, aesthetic, and accessible text formatting across your UI. From uppercase buttons to capitalized headings, it gives you full control without touching the original content. Master it and elevate your typography game! 🚀