CSS

Text-transform command


Text-transform command

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercasetext-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word capitals.

This command is incredibly useful to help ensure consistency in style across an entire website, particularly if there a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won't show up on the website.

It's also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is ‘CONTACT US’, which is pronounced as ‘contact U S’ by some screen readers.

Published: 1st June 2016 by

Adverts