When you need to display text in all caps on a web page, CSS provides predictable, maintainable ways to do it without changing the underlying content. The most common method is the text-transform property, which controls capitalization independently of how text is stored in your HTML. This approach keeps documents semantically clean while giving you full visual control over uppercase rendering across browsers. This guide explains how to capitalize all letters in CSS, compares valid approaches, and highlights accessibility and internationalization considerations that matter in production environments.
Core method: text-transform
The standard, reliable way to capitalize all letters in CSS is to set text-transform: uppercase on an element. This CSS property does not alter the DOM text; it changes how the text is rendered visually. Use it to enforce all-caps styling for headings, navigation, labels, or UI surfaces while preserving lowercase source text for editing, localization, and accessibility tools.
Syntax and selectors
Apply text-transform: uppercase to any block or inline element. It works with type selectors, class selectors, attribute selectors, and pseudo-elements. The declaration follows standard CSS declaration rules and is widely supported across modern rendering engines, making it a low-risk choice for production projects.
Browser support and rendering
Support for text-transform: uppercase is comprehensive across current and legacy browsers. Rendering differences are minimal, but subtle variations can appear depending on font design and text shaping features, especially for non‑Latin scripts. Test with real content and critical typefaces to confirm visual consistency where exact appearance matters.
Feature support snapshot
| Property | Value | Verified support | Notes |
|---|---|---|---|
| text-transform | uppercase | Yes (CSS Text Module Level 3) | Supported in all modern browsers and IE9+ |
| text-transform | capitalize | Yes | Affects word‑initial letters only |
| Unicode | Full multilingual | Depends on font and shaping engine | May require language‑specific handling |
Accessibility and semantics
All‑caps text can reduce readability for some users, especially for longer passages. Screen readers pronounce source text as stored, not as visually rendered, which helps prevent confusion. Keep semantic content lowercase in HTML and use text-transform: uppercase purely for presentation. Pair caps styling with adequate spacing, line height, and type scale to improve legibility for all readers.
Alternatives and limitations
Avoid using all‑caps transformations to emphasis short phrases is not sufficient for conveying meaning. For acronyms or abbreviations, prefer semantic HTML such as <abbr> or <strong> as appropriate rather than relying solely on visual caps. Note that text-transform does not affect content copied by users; the original text remains unchanged in the document, supporting copy‑and‑paste accuracy.
Practical implementation checklist
- Apply
text-transform: uppercaseto the intended selector or pseudo‑element. - Validate rendering across target browsers and devices.
- Verify that screen readers announce the intended semantics correctly.
- Check line height, letter spacing, and font choice for caps readability.
- Ensure source content remains lowercase for localization and editing.
Internationalization and script considerations
When working with multilingual content, test uppercase with scripts that have different casing rules or no concept of letter case. Some writing systems may not change appearance under text-transform: uppercase, while others may require language‑specific font features. Always pair CSS decisions with appropriate lang attributes on HTML elements to ensure correct behavior in browsers and assistive technologies.
Summary
To capitalize all letters in CSS, use text-transform: uppercase on the target element. It is standards‑based, broadly supported, and preserves semantic source text. Combine this technique with good typography, accessibility testing, and internationalization checks to achieve consistent, production‑ready all‑caps styling that remains robust over time.