Uppercase or lowecase in navigation?

Hi there,

Is it best to use uppercase or lowercase for a main top navigation bar? I’m thinking of readability, but also if using uppercase will make the navigation stand out more.

Any thoughts on this?

Thanks!

I don’t think it matters too much, it’s in the eye of the beholder what looks right on your page.

But I will mention one more technical, rather than creative consideration regarding capitals and UX.
USING ALL CAPS can confuse screen readers (and search bots) into thinking it is a string of initials, not words.
So if you do want caps, write normally and use css text-transform to make it caps.

<span class="caps">My Text</span>

with

.caps { text-transform: uppercase; }

will result in:-

MY TEXT

2 Likes

Personally, I do find all uppercase a little harder to read, but for individual words in a navigation menu, it would make no difference to me; whichever looks better with your design, as @SamA74 says.

However, it’s as well to be aware of this (and use text-transform, as suggested, where required):

Capitalization

Typing sentences or phrases IN ALL CAPITALS is rarely a good idea. It may make sense under some circumstances, but only rarely. Lengthy segments of capitalized content are more difficult to read. They also may give the impression that the author is shouting. If the author really does want to convey a shout, an exclamation point and/or use of <em> or <strong> may be better.

Screen readers generally do not read text differently if it is in all capital letters, so listeners will not know that the author is giving emphasis to the text. Screen readers may, however, change the voice inflection with exclamation points, <em>, or <strong>.

In some cases, a screen reader may interpret ALL CAPITAL text as being an acronym and may read it as letters rather than words. For example, a screen reader may read the uppercase text CONTACT US as “Contact U. S.” because it interprets the uppercase “US” as being an acronym for “United States”.

http://webaim.org/techniques/fonts/#variations

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.