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:
- single column
- big text
- 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.
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!
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!
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.