Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Text Transform

Set the capitalization of text using the text transform utility.

Format: .ds-u-text-transform--[uppercase|lowercase|capitalize]

.ds-u-text-transform--uppercase
upper case transformed text
.ds-u-text-transform--lowercase
LOWER CASE TRANSFORMED TEXT
.ds-u-text-transform--capitalize
capitalized transformed text

Guidance

Accessibility

Use all capital letters sparingly. They can cause challenges for some people.

  • All capital letters make it harder to read words, particularly for those with dyslexia. "When we read, we don't actually look at every letter in a sentence, but actually the shapes of the words. When text is in All Caps, the height of every letter is identical making every word an even rectangular shape, forcing us to read letter-by-letter, reducing our reading speed." For more information, read Writing readable contentThis link goes to an external site

    You are leaving design.cms.gov.

    You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

    Learn more about links to third-party sites.

    Continue
    .
  • "Some screen readers read capitalized text letter-by-letter. And this occasionally even occurs when the HTML is in sentence-case and the CSS forces the capitalization." For more information, read Making Accessible LinksThis link goes to an external site

    You are leaving design.cms.gov.

    You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

    Learn more about links to third-party sites.

    Continue
    .