A couple of weeks ago, I sent an email out to everyone on the genome campus, to let them know about a handy web browser add-on, called Readability, that… well… makes web pages more readable (and easier to print, in the process). I have been using that quite a bit, and have been very pleased with it. Today, I found out about an alternative one, called Readable, which does basically the same thing, but allows for a bit more customisation.

Readability is important because if you can’t read a web page, for example, it will be pretty hard to use, right?

Flow, text size and line length

What I find interesting about either application is how they reconfigure a page of text in order to make it more readable. The three big features in either case are:

  1. single column
  2. big text
  3. manageable line-length


Having a single column is readable because we are all used to that layout from books. Of course, papers, magazines, etc. often have content split into multiple columns, and we manage OK, but if you want to read rapidly, a single column will allow your eye to flow across the text. It also prints easily.

Text size

Larger text is obviously more readable (within reason), and often, web pages try to cram so much content in, they opt for tiny text. No-one wants to try and read content that gives them eye strain!

Line length

While we are trying to make fluid or elastic page layouts, to cater for different screen sizes and resolutions, it is easy to forget that there is an optimum line length for text. Generally speaking, at a medium font size (yes, OK, it does depend on the typeface and operating system… ), 12 to 15 words per line is manageable. More than that, and the human eye (and neck!) starts to get tired. And when your users get tired, they lose attention. Fast.

Maybe then, they’ll try to print out the page, but sometimes that can be worse!

Easy printing

Being able to print out web pages is also important, but it is frequently overlooked by designers. How many times have your printed out a page, and had to suffer all the navigation and adverts being in there? Hmmm… rubbish.

It is easy to provide a print stlyesheet, but if one doesn’t exist for the page you want to print, applications like Readable or Readability can help bridge the gap.

There’s more to it than just those three features, of course… padding and margins, headings and titles, line height and letter spacing, and the power that CSS affords, but… just a little something to think about. And I hope those readability applications come in handy for some of you.


3 thoughts on “Readability

  1. Sun Sunich says:

    I always feel sorry for the designers who tried their best to create a nice-looking web site and because of that never change the font way site looks. 🙂

  2. Mark Bingley says:

    Having had a play with both of these, I would say that the second one “Readable”, although more configurable, is much less reliable. For example if you try and use it on the SKY News website (a site that is almost unusable due to the way in which distracting content is splattered across the entire page) it fails, where as the other one: “Readability” copes with it very well indeed.

    Thought I would pass on my experiences.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s