Text Transform

Force the text into capitals, lower case, or title case without retyping it.

Where to find it
Labelled Typography → Transform in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
textTransform

In plain English

Text transform changes the case of your text as it is displayed. The words you typed stay exactly as you typed them; only the appearance changes.

That separation is the point. A navigation label stored as "Our services" can be displayed as "OUR SERVICES" today and changed back tomorrow without anyone editing the content. Screen readers and search engines still see the original words.

"uppercase" makes everything capitals, "lowercase" makes everything small, and "capitalize" puts a capital on the first letter of every word.

What each option does

OptionWhat you will see
noneShow the text exactly as it was typed. The default.
uppercaseALL CAPITALS. Common for small labels, buttons, and section eyebrows.
lowercaseall lower case. A deliberate stylistic choice, occasionally used for brand voice.
capitalizeThe First Letter Of Every Word. Note that it capitalises every word, including "and" and "of".

When you would use it

  • A small section label should be set in capitals.
  • Buttons across the site should look consistent regardless of how each label was typed.

How to change it

  1. Select the column, open "Selected Column", then "Typography", then "Transform".
  2. Pick a value from the dropdown.
  3. If you chose "uppercase", add a little Letter Spacing — around 0.05em — so the capitals do not look cramped.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Long stretches of capitals are meaningfully slower to read, because we recognise words partly by their shape and capitals flatten that shape. Keep it to a few words.
  • "capitalize" is naive: it capitalises every word, so "the art of war" becomes "The Art Of War" rather than proper title case.
  • Acronyms and proper nouns can be mangled by "lowercase". Check the result rather than assuming.

Related settings

For developers

The technical reference for what this setting produces: MDN: text-transform. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next