- 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
| Option | What you will see |
|---|---|
none | Show the text exactly as it was typed. The default. |
uppercase | ALL CAPITALS. Common for small labels, buttons, and section eyebrows. |
lowercase | all lower case. A deliberate stylistic choice, occasionally used for brand voice. |
capitalize | The 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
- Select the column, open "Selected Column", then "Typography", then "Transform".
- Pick a value from the dropdown.
- If you chose "uppercase", add a little Letter Spacing — around 0.05em — so the capitals do not look cramped.
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
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.