A CASE STUDY IN READABILITY

30 JANUARY, 2012 — MENLO PARK, CA

My VPS disappointed my blog and me. It failed, my trust withered. But I twisted this misfortune and took the opportunity to redesign my blog. I migrated it to Github, and its design evolved. Here’s a recounting of that evolution.

As my thoughts turned over design decisions, a few considerations stood out. For me, on an ideal blog:

  1. The typeface reads enjoyably.
  2. The column width minimizes lateral movement of the eyes.
  3. Whitespace has meaning.
  4. Content scales well at different screen sizes and zoom levels.
  5. Lists, block quotes, and code are distinct, but fit the flow of the page.
  6. Headings and links are apparent, but not obtrusive.
  7. The whole is aesthetically pleasing.

Readability concerned me primarily. Aesthetics were secondary (stuffed tersely into #7). With this list in mind, my work began.

Typeface

Serif typefaces read more easily to my eyes (perhaps to others, too [1]), but sans-serif tend to look better on the web. Google web fonts provides a wonderful way to explore free typefaces, but I ultimately went with that old standard, Helvetica Neue. A sample:

  • I wrote this in Helvetica Neue.
  • I wrote this in Helvetica Neue.
  • I wrote this in Helvetica Neue.

Other great options exist. Old Standard TT and Amethysta contended for the position, but lost. Also, my thanks to Beautiful Web Type for inspiration.

Column width

My main column with is 32em on a 14px font-size, and with the sidebar this forms an instance of the golden ratio. A relatively narrow main column makes scanning text easy. I read faster on a Kindle, since it has a smaller column-width than most print novels, and I want my blog to offer the same convenience.

Whitespace

Here, line-height and paragraph spacing concerned me most. I tweaked these parameters until things looked good: a line-height of 1.4em, and a paragraph margin of 1em.

Paragraphs stand out from one another, but not too much.

Content Scaling

A centered column fits well on most screen sizes, and since its width is em-based, it scales with the zoom-level. Hit CMD+ or CMD— a few times, and you should find the effect generally pleasing.

Lists, Block quotes, and Code tags

Bullets set off normal lists, as does the adjacent whitespace. I space list elements with no extra vertical spacing. For instance:

  • A loyal list item tells no lies.
  • This list item betrayed me.

And now we’re back to a paragraph. The list is distinctly set off, yet it remains unobtrusive. This post has a longer list, if you want a more realistic example. Numbered lists share one additional consideration: the position of the numbers (you can’t elide numbers if you want a numbered list). They go outside the column to improve flow.

  1. This number is lower, and can do nothing about it.
  2. Higher numbers by birth should avoid egoism.

I set block quotes by a slight margin and a subtle left border. They shouldn’t distract:

I AM A SICK MAN…. I am a spiteful man. I am an unattractive man. I believe my liver is diseased. However, I know nothing at all about my disease, and do not know for certain what ails me. I don’t consult a doctor for it, and never have, though I have a respect for medicine and doctors. Besides, I am extremely superstitious, sufficiently so to respect medicine, anyway (I am well-educated enough not to be superstitious, but I am superstitious). No, I refuse to consult a doctor from spite. That you probably will not understand. Well, I understand it, though. Of course, I can’t explain who it is precisely that I am mortifying in this case by my spite: I am perfectly well aware that I cannot “pay out” the doctors by not consulting them; I know better than anyone that by all this I am only injuring myself and no one else. But still, if I don’t consult a doctor it is from spite. My liver is bad, well — let it get worse!

That’s from one of Dostoevsky’s lesser known works. [2] Moving on, a light shade of grey highlights the code-snippets. Not so much that it gets in the way:

--Replace free variables as specified in provided mapping
replace_terms :: Stmt String -> [(Stmt String, Stmt String)] -> Stmt String
replace_terms rule lst =
  case rule of
    Var r1 -> Var r1
    Free r1 -> let search = List.find (\((e,f)) -> r1 == val f) lst in
      case search of
        Just (e,f) -> e
        Nothing -> Free r1
    (Op ro r1 r2) ->
      (Op ro (replace_terms r1 lst) (replace_terms r2 lst))

I’ll consider adding syntax highlighting, but for now it’s set off nicely enough.

Headings and links

Size and boldness offset the headings. Links are colored red. ALL-CAPS headings serve as a second level of differentiation. I didn’t want the headings to be significantly larger than the content text, but that’s not a universal principal.

I took inspiration here from the style of academic papers.

The Whole

Aesthetics are subjective, so this section I’ll leave to you. Yet whether or not the effect of my design succeeded, we should give more thought to readability on the web. As Edward Tufte said:

Good design is a lot like clear thinking made visual.

As I aspire to clear thinking, so will I aspire to good design.

1 Wikepedia on the serif readability debate.

2 Notes from the Underground, also known as The Underground Man.