Yesterday I wrote about my biggest website design pet peeve, reversed color text, or the infamous white text on the a black background. Hate it…hate it and by some of the Twitter and email response, it appears that a lot of other people hate it too.
So while I’m on the subject of text on your website, here are a few more tips:
Don’t make the main body of your text too small, especially if your audience is *ahem* mature. Don’t go smaller than 11 point, and 12 to 14 point is usually ideal.
Stay away from low contrast text. This is the old light gray text on the white background color scheme that was all the rage a few years back. Some designers made it a double whammy and also made the text extra small to boot. Folks with low vision…heck even folks with normal vision may have problems reading it. Some people have commented that they find black on white a bit harsh. If you want to go a little gray on your text that’s fine, just make it a dark grey.
Be consistent with your fonts. In an effort to make websites more interesting, some people make the mistake of using just about every single font in the world on one page. While a talented designer can pull off the multiple font families trick and make it look interesting, if you don’t know what you’re doing you’ll probably end up making it look like a mess. A rule of thumb I use is to stick with one kind of font for your headlines and subheadings and another kind of font for your body copy and captions on your website. That’s simple enough to keep most people out of trouble.
You’ll also want to be consistent with your font sizes as well. Body copy should be between no smaller than 11 point all the way up to 14 point. Main headlines can be 4 to 10 points higher than your body copy and your sub-headlines can be in between your body copy and your main headline sizes. Captions are usually 2 to 4 points smaller than your body copy.
Don’t underline any text that’s NOT a link. Sometimes people underline words in their website text to emphasize words. The problem with this method is that most people know that underlined words usually means that that piece of text is a link and they’ll click on the words to see where they’ll go. If your words are just underlined, but not a link, then you’re going to end up frustrating your visitors. Use means other than underlining to emphasize your text such as bolding, changing the text color, using all caps, or sizing.
Stay away from using blue on text that’s NOT a link. The same rule about underlined text also goes for blue text. For most people, blue text automatically means that the text is a link and they’ll try to click on it. Try to avoid using the same “hyperlink blue” color on any text that’s not a link.
Avoid overuse of text centering
Centering your headlines are okay
But centering whole paragraphs is not
It’s just plain annoying
And unprofessional looking
So don’t do it
KEEP THE USE OF ALL CAPS TO A MINIMUM. AN ALL CAP WORD OR A SENTENCE IS ALRIGHT, BUT AN ENTIRE PARAGRAPH IS CONSIDERED SHOUTING. PLUS READING ALL CAPS IS VERY HARD ON THE EYES. SO DON’T DO IT.
Stick with your standard “web fonts”. Remember that fancy fonts don’t always work on your website. In order for a person to be able to see whatever special font that you have declared on your website, they also have to have that same font installed on their computers. If they don’t, then their computer will resort to the next handiest font and you’re not always sure what that will be. So to stay on the safe side, stick with those fonts that are pretty standard across most computers. Those include; Arial, Courier, Georgia, Impact, Tahoma, Trebuchet, Helvetica, Verdana, Times New Roman, and Palatino.
So that’s my list of tips to keep your website text visitor friendly. If you have any tips of your own, leave a comment and let me know.
{ 2 comments… read them below or add one }
I love how you’ve not just told people what not to do, you’ve shown them. Very powerful! lol
Great information! Very useful.