deliciously simple web design & creatively technical writing

• Home
• About
• Gallery
• Archive

How to make text more legible

If you want to place content on the web that is easy for your users to read, especially lengthy articles, it is a good idea to consider a few of the general principles listed below.

Internet users scan. They don’t read.

The internet is a different medium than paper magazines and books. One might decide to read Tolstoy’s War and Peace, but they’re not likely to sit down and read the thing on a PDF file on a computer somewhere.

Usability studies suggest that users on the internet don’t read but they scan quickly around the page for sections that might interest them.

There are several plausible explanations for this….

This is a large part of the reason why eBooks haven’t really taken off yet.

* the current lack of high resolution monitors that makes reading online text less pleasant than reading printed books

* the craziness of modern life and the billions of other websites competing for users attention

* the nature of the internet that encourages people to actively explore new links

Whatever the actual reason, the point to remember is that users don’t treat web pages as books. Design content for easy scanning by using simple terms in headings, using active whitespace, using large fonts, etc.

Use large text

The stylesheet on this webpage has text at size 1em. This might appear a little bigger than ideal at first, but this is actually the default size that web browser makers chose for text. Larger text is easier to read, especially on laptops and for older people, and it has another side benefit.

In using larger font sizes, one might complain that trying to fit all of their content on screen is too difficult.

You know what? Thats a great thing.

It leads directly to my next point.

Get rid of useless content

Even great websites are filled with useless content.

But the majority of websites, especially those from large organizations that try and get every single company department on screen at one time, are filled with clutter.

That green section would be even more usable if you didn’t need to click on it to find out any information whatsoever on the story.

On the Philadelphia Sixers home page for example, there is only one section above the fold that is very useful to the average fan, and thats highlighted in green.

The rest of the content either amounts to an ad, or is too small (the calendar) to be useful. It might meet the standards of some marketing dullard somewhere who can check off a bunch of items on a list and claim that they’ve done their job, but its horrible for the actual users.

Anyway, the point is simple. You’ve got to sit down and pick and choose what content is actually useful to your users. Get rid of what isn’t useful and focus on the good bits.

This is probably my favorite design quote ever.

As French writer and aviator Antoine de Saint-Exupéry said,

You know you’ve achieved perfection in design, Not when you have nothing more to add, But when you have nothing more to take away.

Getting rid of much of the useless content and increasing the font-size of text to 1em as I mentioned would automatically make a lot of sites much more useful. And this leads to my next point.

Use active whitespace

Let text breath a little. You don’t need to cover 100% of your website with content. Focus your users on what is important.  You can take a look at this site itself for an example.

Look at how much focus is on article content. The only thing taking even a little bit of focus away from the article text itself is a useful side note. Article whitespace is highlighted in orange here.

Think a little bit about what a little luxury like space says about the subjective value of an item.

Space implies quality. The next time you go to a Dollar Store, take a look around and notice how stuffed the shelves are. Then go into some store thats sells premium products like Nordstrom or an Apple store. There are few products on each shelf and each item will have more than the usual amount of space around it.

Thin content areas also make reading online text easier. The rule of thumb is to use no more than 15 words per line for the web.

Line Height.

Not only is space around text blocks desirable, but space between lines is as well. Using a standard amount of space between lines isn’t very good for reading long blocks of text.

  Don’t overdo it, but make sure that text is easy to read.

What font to use?

Sans-serif typefaces lack the additional little squiggles on the ends of characters.

Because current consumer computer monitors are generally limited to around 110 pixels per inch (which isn’t close to the detail that print offers), capturing the finer details of rich serif typefaces such as Times New Roman isn’t currently optimal. Sans-serif fonts are currently best for the web. So the typical stylesheet that I’d use would contain something like this.

font-family: “Lucida Grande”, Lucida, Verdana, sans-serif;

Lucida Grande is the default Mac OS X font and quite beautiful and usable and because I develop on and use Macs, I always make sure to include this. Verdana is a safe cross-platform choice and also quite readable. As a final backup, the site would default to any sans-serif fault on the user’s system.

Don’t use too many images

Without images we wouldn’t have cool things like eBay, Amazon, and porn. Use them on your website.

I recently came across the program Picturesque for the Mac that makes presenting images quick and easy. A very simple tool that is worth a look.

Just don’t overdo it. Its better to have 2 great images on a site than 20 tiny thumbnails.

Text color

I don’t believe that color is as important as a great layout. A bad color decision can easily be changed in CSS.

But it is important to keep text readable. If you ever try and use yellow text on a green background, silver text on a gray background, red text on a blue background, etc please reconsider.

The gold standard is probably something like #333 on #fff, which is charcoal-colored text on a white background. But #fff on #000 also works, but its not ideal for larger content sections because of how dark it makes things and how tiring it can be on your eyes.

Background Images

Using patterned background images on the web in general is fairly pointless. It adds little value to the user, and it increases loading times as more graphics have to be downloaded. It can also make it more difficult to maintain dynamic sites.

Yes, a pirate-themed photoshop site. I like creative nonsense and my teachers got a kick out of it.

I did a pirate-themed photoshop site when first learning photoshop and building sites, and I went really carried away with the background here. Yuck. What was I thinking?

I would not use gritty textured backgrounds behind blocks of text. Its not cool. It serves no purpose other than making it harder for people to read content.

Find out how people use your site

I’m going to have to review both of these at some point, as well as discuss some other options

Don’t be afraid to use the free Google Analytics or the very inexpensive Mint to find out how people use your site.

Nobody is perfect, not even me. Even a great design can be improved over time, and having statistics about how people use your site always helps. Sites should continuously be improved with user-feedback, and you can’t do that easily if you’re not doing your sites with CSS as mentioned in the first article in this series.

Grid systems

Less is more, but less and more can coexist.

Understanding what grid systems are and how they work is helpful for creating more complex sites that are usable, and I’ll cover that in the next article.

Thanks. If you’re still reading this down here, I guess I’ve done something right.

Posted on June 16th, 2007 by Chris Papadopoulos.

Subscribe to the RSS feed, Trackback, or contact me privately.

Comments

1. David Carr (3 comments.) @ Aug 13

   A well-crafted and very useful post. If only a few more people would consider your points we may end up with less difficult to read web sites.

2. johno (7 comments.) @ Sep 13

   I’m enjoying going through your archives. Some great articles and sound advice.

3. Chris Papadopoulos @ Sep 13

   Neat.

   Yeah, I definitely am not as familiar with typographical terms and specific concepts as you John, but I do want to try and keep things easy to read if nothing else. So this idea of legibility in web design was something I could write a few things about.

   I learned from experience some of the wrong ways of doing things way back in the day, so just recognizing my mistakes and continuing to improve is the goal.

   And I definitely hope to learn more cool things about typography from your site so keep at it!

4. Austin @ Jan 21

   I agree with some of this article, however users DO, in fact, read content. I think you have to give the user some credit, they are at your site for a reason, and they probably won’t just glance at what you’ve written. Even if someone uses StumbleUpon, they know that other users think that the article is interesting and will read it. The important thing is to write about interesting things, give us a reason not to scan. Also, too much white space is boring and it makes it look like you wrote an article way beyond what the original design of your website planned on. Like the text extends way past your layout — in my opinion.

5. Toon @ Design Forum (1 comments.) @ Jan 23

   Really good read and an important lesson into web typography

Agree or Disagree?

Your Name (required)


Your E-mail (required)


Your Website (optional)


Your Comment

Notify me of followup comments via e-mail