Increase Readability When I asked what the most important aspect of design was, many of you replied that it was readability; how easy it is to read your content.

People come to your blog to read articles, and the easier they are to read, the better. A design that obscures the content will only turn visitors away.

So what can we do to increase readability, and keep those readers reading?

30 Things That You Can Do Now

  1. Underline your links. Readers expect links to be underlined, so don’t disappoint.
  2. Use appropriate space between lines in a paragraph. A quick way to test this is to divide your line-height by your font-size. Ideally you want a value around 1.5.
  3. Clearly separate your post from the rest of your design. It should be obvious where the post starts and stops. Your sidebar, comments, post meta etc. should be visually distinct from the actual content.
  4. If you use pull-quotes, make sure they’re extremely obvious and near the top of the article. If a user doesn’t spot them quickly, they aren’t of much use.
  5. Keep it brief. Odds are that if you’ve written something in 50 words, you could probably say it just as well in 30.
  6. Use Snook’s Color Contrast Checker on your font and background colors, to ensure the combination is readable to those with visual impairments.
  7. Use a structured hierarchy in your document, e.g. Title – Intro – Heading – Text – Subheading – Text, etc. This gives your page a more logical flow.
  8. Refrain from breaking up posts with adverts in the middle. This will interrupt the readers thought train.
  9. When styling italics and bold, there is usually no need to change their color. Doing so will only confuse readers about what is and isn’t a link.
  10. Use semantic markup, i.e. h1, h2, h3 for headings, strong for bold etc. Many of your readers will be reading your content in a feed reader, where your <span class=”myheading”> will have no effect.
  11. Use post images at the start of the post. In most cases, their purpose is to draw users into an article. Naturally, they do this best at the top of the article.
  12. Blocks of text are bad. Nothing scares a web user away more than a wall of text. Liven things up a little!
  13. Left aligning is usually best. Very rarely is centered or justified text going to look better, and I can’t think of any time when right aligning is the best choice.
  14. Take care with text wrapping. Depending on how your text wraps around an image, you may want to rephrase the text, or resize the image to let things sit better.
  15. Headings and subheadings must stand out. One of the major benefits of using headings is that readers can scan down and see exactly what is in the article. This only works if the headings stand out, so feel free to use larger fonts, underlines, colors or whatever else is necessary.
  16. Know when to use an ordered list, and when to use an unordered one. If your bullets are in a particular order, then number them.
  17. Indent your lists. Show that they aren’t just more paragraphs.
  18. If a certain image plays an integral part in your post (e.g. a diagram or chart), then center it, and skip a line before and after. This shows that the image is a part of the article, not just a decoration.
  19. Remember that your posts may not always be read on screen. Set up a print stylesheet to keep your articles looking good on paper as well.
  20. When choosing what font to use, choose a common font that everyone has.
  21. If you add a “PS – I forgot to mention that xyz…” to your post, style it in italics to show clearly that it is an addition to the original post.
  22. Highlighted phrases should be the same font-size. Changing the font size will change the height of that particular line, breaking the flow.
  23. DON’T USE ALL CAPITALS ON BODY TEXT. Making all of the letters a similar size reduces the different between them, making it much slower to read.
  24. Don’t use SnapShots on your links. Whilst the feature may seem cool the first time, it becomes a pain in the neck the rest of the time. The pop-up covers a good few lines of text every time you accidentally hover over a link.
  25. Keep lines to a reasonable length (Under 100 characters). Liquid layouts often cause the content area to stretch on wide monitors, making reading much more difficult.
  26. Too many paragraphs is better than too few. When writing on paper, paragraphs might commonly be 4 or 5 sentences long. On the web, shorter paragraphs of just 2 or 3 sentences are common because they present the point of the paragraph in a nice, bite-size chunk.
  27. Keep your sidebar short. The sooner your sidebar ends, the sooner it will stop competing with the article for attention.
  28. If you use pagination (Splitting one post onto several different pages), then make sure the post navigation is clear and easy to use. Also, begin the post with a quick table of contents so that users know what they can find.
  29. A faint gray color works well for that information that has to be there, but isn’t crucial (e.g. the post date, author etc.). The faint color means the line won’t draw attention.
  30. Use the acronym HTML code to expand acronyms that readers may not all be familiar with. Use CSS to style the acronym with a dotted bottom boarder (The common convention).

There is a lot that can be done, and that’s only the visual aspects. Just think of how much your actual wording matters.

What do you do to increase readability on your blog?

Enjoy this post? You should follow me on Twitter!