Why you shouldn’t write your content in Uppercase, instead use CSS.
Uppercasing is common in designs on the web you’ll often see it in navigation, on buttons and in headings or subheadings. I was recently changing the text in a navbar from uppercase to lowercase and I came across the situation where, instead of relying on the CSS, the last editor of this nav wrote the text in uppercase. This prompted a tweet whinge because this really bothers me. As a result of my tweet, it came to my attention that a lot of people don’t know why this is a problem (it’s easy to forget people, sorry about that). I figured it was a good opportunity to run through the reasons you shouldn’t write your content in uppercase and instead you should rely on CSS.
There are some great tweets from Jen Simmons in the thread of this tweet you should totally read, also follow her, she is a great source of knowledge!
First, a caveat, if something is meant to be uppercase, like an acronym, that is okay to write as uppercase, e.g CSS. If your text makes sense semantically in uppercase then it’s not a problem. (Note: HTML has an abbreviation element you should totally use)
With that in mind, if your content is uppercased, only for design or styling purposes, then it should always be done with CSS. The way that you accomplish this is with the text-transform CSS property.
Text transform will allow you to specify how you want to capitalise your element’s text. It has a number of options, e.g. all uppercase, all lowercase or you can choose to capitalise each word. There are also some options for working with other languages.
In our case it would be:
text-transform: uppercase;Why is this important?
- Like my original example, it’s a lot harder to change the design later if you have written everything in uppercase. In my case, it was a small fix because it was only one instance. However, imagine this across a large website. You couldn’t easily switch the casing without having to edit all of the site’s content. CSS was literally made to make this stuff easy, lean into it!
- When you copy and paste text written in uppercase, it will copy in uppercase. Unlike text styled with CSS, which will copy however you wrote it. (This is a constant source of frustration for me, especially when it’s a word I have trouble spelling, I copied it for a reason, and now you going to make me re-type, or use some tool to convert it anyway, come on friends, make my life easy not hard 😭!).
Note: It was pointed out that Chrome still copies and pastes in uppercase if you style with CSS. Can confirm Firefox doesn’t. - It’s not great for screen readers — uppercased text will be read out as individual letters (like abbreviations). So CSS is read as C.S.S. Just as JELLO would be read as J.E.L.L.O, not as the word Jello.
Note: some screenreaders, like Macs Voiceover, will still do this with text styled as uppercase using CSS — you can resolve this with an aria-label. - Reading modes don’t work as well. I have a particular interest in reading modes (Check out my blog post on Building websites for Safari Reading Mode). Reading modes, and other reading apps typically work by taking the content from your page and applying new styles. It relies on the proper use of semantic HTML, among other things, but also it assumes that you have written the content up as it is meant to be. If you uppercase your text in the content, it will come across as uppercase, therefore any styles reading mode attempts to apply to improve the reading experience will not work. The same applies to instances like Google Search results, or if you want to re-use the content in a different area of your site with different treatment. (Think back to CSS Zen Garden!)
The main takeaway to remember is this:
If your text does not make sense in uppercase, semantically, whether it be in your page, in search results, in reading modes, when you copy paste. If it is simply a design treatment for a specific instance, then use text-transform.
Thanks for reading, and thanks to everyone for supporting my tweet frustrations 💜
Mandy
