Good Text Formatting on Webpages

Clarity - Good Text Formatting on WebpagesI do an enormous amount of reading online. And just as a reader, there are two things that really bug me about the way a lot of people format their online text. The first is that many sites provide poor contrast for their text. The second is that many sites have text lines that are far too long. (Occasionally, sites have text lines that are too short.) These are not hard issues to address. Mostly, they are not addressed simply because website owners don’t care or are too focused on themselves to realize that not everyone has the same biological and technological equipment that they have.

Contrast

The lack of contrast is usually seen in displaying grey text on a white background. This is apparently the default for a lot of blog styles, because I see it everywhere. See for example, Viget where the main text is grey. And note: Viget is a “digital products” company! For all you young whippersnappers out there (that seems to be everyone at Viget), this is likely not a problem. But for people with poor vision, contrast is a key.

But I know why designers prefer to mute the text: it looks better from a design standpoint. Hard black on hard white looks crass. But ultimately, no one visits a site day after day because it looks pretty. People don’t even do that for Cute Overload; they go because of the content. (For the record: Cute Overload is a beautifully designed website that doesn’t suffer from any of the problems I’m discussing today.) If a site contains enough text to worry about this stuff, the site owner should worry about this stuff.

Or Maybe Not

Maybe it doesn’t matter at all. Maybe the stuff that you write is so great that people will even view the source and read it like that. There’s no reason to fear losing readers. After all, there are billions of them out there. They’ll come. The ones with good eyes and endless patience. Just wait till next year, Charlie Brown. You’ll see! Next year at this same time, I’ll find a pumpkin patch that is real sincere and I’ll sit in that pumpkin patch until the Great Pumpkin appears…

The Viget website also does a reversal of a common practice. Many websites make blocks of quoted text grey. In fact, we kind of do that here: we make the background grey. I don’t have a problem with this because quoted text is usually short and is not as important. And in our case, I think it is quite readable in a way that grey text on white is not. But Viget makes its quoted text black on white. They seem to be saying, “What we have to say is not that important, but the people we quote ought to be heard!” It seems strange to me.

Line Length

Line lengths are a much bigger problem. Traditionally, line lengths of 60-80 characters have been standard for books. In magazines, it is usually less, and that’s why they usually had double columns. But some research looking at reading speed and comprehension (discussed in the Viget article above) found that 95 characters per line was best. However, not everything is about efficiency. That same study found that people prefer reading 55 character long lines. I don’t really care. This site uses roughly 75 characters per line and I find that it is a good compromise.

What I do care about are sites like Booman that have text running all the way across the screen. In this case, a single line contains roughly 180 characters! This is really hard to read. But I don’t think the issue is just or even primarily the number of characters. The lines are so long geographically that my eye doesn’t know where the next line is. This page has a line length of six inches; Booman has a line length of 15! (Also note that if you decrease the width of your browser window, this site also decreases, but Booman does not — requiring you to scroll to read all the text. Try the same thing at Viget and you will see something really cool!)

It’s important to keep the number of characters down to a reasonable number. If you want to go up to a hundred, have at it. But keep the actual length of line down too. Personally, I don’t even like line lengths above eight inches. But I have old and tired eyes.

Readability

It’s not my intention to give you rules about text design. I just think that anyone designing a page should spend some time thinking like a reader and not as a designer. Ultimately, you want to make your pages as usable as possible. In the cases of Viget and Booman, the content is good enough to overcome any issues I may have (minor in Viget and major in Booman). But most of us don’t have this luxury.