Use uppercase text judiciously
Occasionally I come across websites that use uppercase text a lot. Probably the most popular use of uppercase is in navigation menus, which may not seem like a problem. Menus don’t consist of paragraph after paragraph of text, after all, and it is generally the use of uppercase for entire sentences or paragraphs that is recommended against.
Here are a few articles where the use of uppercase text is discussed:
From Web Style Guide 3:
We read primarily by recognizing the overall shape of words, not by parsing each letter and then assembling a recognizable word. Words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the eye
Back to those menus, which is where I encounter uppercase text the most. My personal feeling is that scanning menus set in all uppercase takes longer than scanning menus where the text is capitalised (first letter in uppercase, the rest in lowercase).
I haven’t been able to find any research on this particular use of uppercase letters. However a quick, completely non-scientific and possibly quite biased poll done by asking a few people around me shows that I’m not the only one to find mixed case menus easier to scan than menus set in all uppercase.
Potential screen reader problems
One other thing to be aware of is how uppercase text can affect screen readers. An example is how VoiceOver speaks Swedish text. (VoiceOver for Mac OS X doesn’t support Swedish natively, so for starters it has a heavy American English accent, but it’s still possible to understand.) It tends to spell out some words letter by letter if they are in uppercase, even if the text is in lowercase in the HTML and transformed to uppercase with CSS. If the same word is in lowercase, VoiceOver speaks it normally (well, with that accent).
My guess is that this is a matter of internal dictionaries and language support, and probably something that doesn’t affect a lot of screen reader users. Either way it’s something to be aware of.
I’m not saying “do not use”, just “think before using”
I’m not saying that you should never use uppercase text, just that it’s good to be aware of and consider the potential drawbacks of it before making an informed decision.
- Previous post: Conditional and custom next/previous post links in WordPress
- Next post: How to create a 3-column layout with CSS