4 text tips to improve website performance.

Do some blogs or websites have you running the other way? They are so hard on the eyes that you decide to skip reading it even though the topic may be compelling? The reason for blogging is to provide information that people will share with others. That’s how you generate new traffic. But if they find your site hard to read it’s highly unlikely that they’ll share it.

This is the first of a few articles that address readability and ways to improve your website design so people will stick around and then share it with friends. This article focuses on type and what makes it easier to read.

If the column width is unreasonably wide, or won't resize, it make your eyes work too hard.

The further your eyes have to travel from side-to-side the more they have to work. Reading slows and retention rates decrease as the width of the line increases beyond the optimal width. That width varies a bit depending on the size of the type. But in general test your text and see if your eyes are overworking.

Your readers may also be getting lost because they can’t track from the end of one line to the beginning of the next. Do you find yourself re-reading a line because you lost your place? See the sample below to test it out. Which can you read more quickly?

When the body text is reversed out of a dark color the type dances around.

As a designer I love the look of dark background colors to create a dramatic effect but when it comes to reading the text on a monitor, it tires the eyes. And in my opinion function comes before form. Use it sparingly in small areas such as call-to-action buttons, headings, quote boxes, or banners. For body text find a design option where the body text is not reversed. The same rule applies to dark photographic backgrounds. Do you see a difference with the varied color backgrounds below?

Overprinting body text on a ghosted photograph distract you from the words. 

It is possible to make overprinting work but it’s tricky and most people don’t do it well. Many times the photo isn’t ghosted enough to make the copy legible. Often there's too much variation from dark to light so the type doesn't have enough contrast. And what might look fine on your monitor may not look fine on someone elses. I work on two monitors and they are purposly calibrated differently and what works on one may not work on the other one. It's better to err on the side of making it lighter than you like so that the text will be readable. Do you see how distracting the images are below even with fairly tame and light photos?

All caps shout at you and need to be used with restraint.

I sometimes think that people use all caps because they don’t know what words to capitalize or are too lazy to use the shift key when typing. Capital letters are meant for emphasis so using them for the headline or a bold lead-in line is fine. Just don’t overdo it. It’s too much of a strain to read. Words are symbols so we don't recognize the symbol as easily when it's all caps and have to look more closely to read them. Can you read the caps as quickly as the upper and lower case copy below?

I’m not saying that your design should use only black type on a white background. These examples are here to show how simple things can become obstacles to your readers. Many people are creating blogs for themselves and don’t have designers helping them. Hopefully keeping these tips in mind will make your online communications a more pleasurable experience for your customers so they share the content you've created.

Guidelines:

• Keep text columns fairly narrow.
• Use lighter colored backgrounds with dark type.
• Avoid overprinting on ghosted images unless the photo is very light.
• Use all caps only for short headlines, emphasized words or subheads.

What tips do you have for making text more readable online? Share your comments below.