Text font and color and backgrounds

Okay, so you want everything about your page to be cool. You’ve got a cool background. You found a cool font. You want cool colors. Maybe you even want one of those cool non-scrolling background photos like you see on MySpace.

Step back. Take a breath. The first rule of text is that you want to make it as readable as possible. This is your message that you’re trying to use to promote yourself, and at least in theory having potential callers read your text will improve your chances of having them call you, right?

The harder you make it to read your text, the greater the likelihood that someone will just go away without reading it. People who wear reading glasses often have the most money to spend on you.

Now I know that may seem hard to believe, when probably you’re yourself attracted to pages that are maximally cool. So I think the best thing to do will be to look at some really bad examples that I’ve collected here and there.

The animated background

Animated backgrounds make it harder to read text. The most readable text has as much contrast as possible.

Believe it or not, there really is text on that twinkly, starry background. Black text. I’ve reduced the size of the animation to make it fit in the column and load more quickly. Click on it to see what you find when you highlight the text on that page. Do you think anybody read her page?

The most readable text is black on white. It’s all downhill from there.

Bad font choice

Now let’s look at another one with contrast issues. The contrast problem is obvious, but this one also has a font selection problem.

The fact is that there are thousands of fonts out there to choose from. Some of them are free to download, others may cost a bit. But a person’s computer will only display a font they have installed. So if I, as my own page designer, find a really cool font that I want on my page, a reader who does not have that font installed will see something very different.

A girl had a question about her page. I was the only one who had this font installed (she didn’t even have it installed herself), so I was the only one who was able to see the page as the designer intended, which was completely illegible. Everyone else was seeing a different font. An ugly one, which was still really hard to read with the black on brown. Click the image to see a larger version.

OK, let’s look at a MySpace background. The site was slow, so I wasn’t able to find one of those pages where the text scrolls over the giant, non-scrolling photo. This is a non-scrolling photo background of someone in my network. I guess.

So what can you do? Use a template where the text background is a solid color, and there is plenty of contrast between the text and the background. If you want to use a high-contrast background, like a photo, use it around the perimeter of the page. And choose fonts that the viewer is likely to have on their computer. Here’s a link to a page with a table showing the fonts that everybody is likely to have installed on their computer. A good designer will use a fancier font to make graphic images, like headers, rather than using an attractive but unusual font for content text. And maybe test out your listing on somebody who hasn’t seen it to see how easy it is to read.