Should you use text-transform: uppercase; in your style sheet?
Good, accessible website design has the separation of content from presentation as a core principal. This is nowadays achieved by presenting content with HTML (HyperText Markup Language) coding, whilst styling is presented using CSS (Cascading Style Sheets). Styling includes the font used, the colour of the font, and its size, as well as other aspects of presentation such as page layout.
Many popular tools to assist creating websites such as WordPress, Joomla and Drupal have standard templates that make it easy to choose a style for your website. However, many of these come with coding that change all menu items (and sometimes all headings) into uppercase. It doesn’t matter whether you write menu items as you would normally, or in uppercase, the result is shown in uppercase.
When writing text, our plain English recommendation is not to write text in uppercase, but to only capitalise words when they either:
- start a sentence; or
- are proper nouns.
Most people nowadays are familiar with the idea that writing in all capitals on the web IS THE EQUIVALENT OF SHOUTING. (People who don’t know this can expect to be told off for shouting by other internet users!)
Experimental data has shown that lowercase text is read faster than uppercase text, by about 5-10%. Whilst there have been different explanations for why this should be, the effect was first reported by Woodworth[1] in 1938.
So, if you are using a website template that turns all menu items, and/or headings into all capitals, regardless of how they were written, what should you do? In nearly all cases this is set using the text-transform: uppercase property in the style sheet(s) of your website.
The solution is to remove all text-transform: uppercase properties from your style sheet(s), or alternatively replace text-transform: uppercase with text-transform: none.
(You may need to ask your website administrator/developer to do this.)
