Designing for readability - a priority if you want to be read

Update: this whole post was a precursor to the redesign of our own blog. You can read more about the resulting redesign here.

We write content all the time that we really hope you won’t read. Don’t bother reading the testimonials - click on the button:

Don't read the testimonial, enroll instead

Other times, though, we reallyreally want you to read what we’re writing. Like now, for example. The primary goal of most blog posts is to be read (closely followed by shared). When I’m writing blog posts, I’m hoping to engage you through to the end. I’m hoping you will get enough genuine value that you share it with others, I’m hoping that you might subscribe in one way or another or join our community. And yet, too often, we create sub-par reading experiences.

I’m increasingly of the opinion that all pages designed to contain long-form copy that is supposed to be read should be designed with readability as the #1 priority. That wasn’t our own approach when we built this site. We focussed first on the brand:

Distilled homepage

And then on branding consistency extending to the blog:

Annotated blog post

In the process, we ended up with a relatively small content window, a plethora of distractions from the copy and a format in which it is relatively hard to make consistently beautiful posts. It’s a familiar story, and one that is no doubt repeated at businesses of all sizes throughout the world. It’s about at this point that I should emphasise that I don’t believe this is typically designers’ faults (it certainly wasn’t in our case). The buck stops with management (or with you, if you’re an SEO advising management).

Well, I’m learning my lesson. I’m working on a new brief for a blog redesign that will have a single over-riding priority: readability.

There will be some ability to share the post, but only discreetly - available if you want it. Likewise main navigation and other distractions. In the traditions of the lean startup, I have a hypothesis:

Making readability the primary focus of our blog will result in measurably higher engagement (time on site, pages per visit) and sharing will increase such that we will see an increase in visitors to the blog as a whole

In order to create this brief, I have been delving into what the experts say leads to the most readable pages on the web. I’m going to run through some examples of pages that work really well for reading and end with a checklist:

Instapaper - the readability experts

I use instapaper to save articles to read later. I love the readability and I also love the ability to send new articles automatically to my Kindle every week so this was where I started in my search for readability. This post on allthingsd is so easy to read on Instapaper:

I started with instapaper


The print version of the New York magazine

While the main version of New York magazine articles is also readable, I actually really prefer the printable version:

NY magazine print version


Forbes does remarkably well

A few too many share buttons, perhaps, but the recent Forbes redesign has made for a much more reader-friendly experience (if you can ignore the interstitial ad):

Forbes readability


Too few media sites get design, FastCoDesign is an outlier

Unsurprisingly, FastCoDesign excels with a fantastic combination of readability and visual display:

fastcodesign excels


I’ve also been impressed with Kernel mag’s readability

Whatever your opinion of their controversial journalistic style, there’s no doubt it’s easy to read:

kernelmag


A readability checklist

I am trying to take a two-pronged approach to my briefs and recommendations these days - to show and tell. Partly this is to ensure my recommendations or requirements are comprehensible to all different kinds of communicator and partly it’s to ensure that my thinking is clear and consistent in my own mind. So after collating the examples of what readability means to me, I went in search of the rules. I found a few (thanks information architects), added some of my own and came up with the following - feel free to re-use this if you are briefing a readable design:

  • Is the font big enough? (information architects recommends 100% - i.e. the browser default size)
  • Do the column widths allow for around 10-15 words per line?
  • Are the lines spaced widely enough? (information architects recommends 140% leading)
  • Is it high contrast without glare? (information architects benchmark: #333 on #fff)
  • Is it left-aligned? (the eye is drawn back to the flat left-hand side)
  • Is there a larger gap between paragraphs than between lines?
  • Is the amount of clutter minimised as far as possible?
  • Are fonts kept to a minimum? (ideally no more than 2, max 3)
  • Does it stay readable on mobile devices? (for example I recently found this excellent post totally refused to scroll on my Android touch-screen-based browser)

What have I forgotten? I’d love to add more readability items to my checklist and support Information Architects’ 100E2R. And I’d love to see more SEOs recommending a readable design as part of their blogging and news site strategies - hit me up in the comments.

About the author
Will Critchlow

Will Critchlow

Will founded Distilled with Duncan in 2005. Since then, he has consulted with some of the world’s largest organisations and most famous websites, spoken at most major industry events and regularly appeared in local and national press. For the...   read more