Setting line-height right is critical for easy online reading

Travolution have relaunched their new, purple, website this week - See site. Its a reasonable redesign - better than it was - but a long way from what I would want to see - both in design and strategy. However, I know which side my bread is buttered, so, for once, I will hold back. There is a time and a place for everything.

However, I do have one major design concern that probably could do with some explanation as we can all learn from it. That is about how they have displayed their text article content.

Article content, for a news site (or blog) is pretty much the core of what a website is about. You know it will be read online and therefore the text design should be devised in such a way that it can be read with ease.

There are some “guidelines” for making text easy to read online:

• Standard font size for long texts - “At first, you’ll be shocked how big the default text is. But after a day, you won’t want to see anything smaller than font-size 100% or 1em for the main text.”
• Active white space - “Having air around the text reduces the stress level, as it makes it much easier to focus on the essence. You don’t need to fill the whole window.”
• Reader friendly line height - “The default HTML line height is too small. If you increase the line height, the text becomes more readable. 140% leading is a good benchmark.”
• Clear colour contrast
• No text in images

Lets take an example article from the new Travolution…. here is the current…

…and here is what I would do with it…

I have added a bit more margin around all sides (giving it some white space so the content can breathe….. it isn’t clear from this image, but the purple background is very strongly contrasted with the white - hence why whitespace is required between the text and the purple). I have also increased line height in this instance to 1.6. Their line height was reasonable before - but 1.6 helps decompress the text. [Link to original article on Travolution site]

Better eh?

OK - so lets look at other websites (designed for focussed reading online) and see how they have laid out their pages. First those I like:

Travel-Rants (consumer facing travel blog)

The Guardian travel section

The Register

But here are some I don’t like so much…..

TravelMole

Central column is far too thin, the text is too small…… very difficult to read online

TTG (Travel Trade Gazette)

Needs more line-height

Perhaps this is another canary for companies that “get it”. Even though Travolution could be improved, they are close to being there…… TTG aren’t far away either.

Incidentally, as you may have noticed, I have tweaked the line-height on this blog a little now….. hopefully you like it! (Otherwise it was a plank / sawdust job!)

If you want to be notified next time something is published sign up for email alerts or subscribe to the RSS feed. Thank you for reading!