Design of a Site Meant to Be Read: Part Two

Over two years ago I wrote a post about how to design a site for reading experience. In that post I explored visual clutter by looking at ad placements, image use, and image placement, as a method of determining what attracts your eye, and thus detracts from the reading experience.

My first stab at talking about a readable site was very focused on clutter, and yet very flawed, because of the fact that I looked just at clutter, and not more elements of the site design.

A good, readable, design is far more than just clutter.

The first go around, if you haven’t read it, showed that bigger sites clutter the content more, and added more visual distractions within a body of text. The takeaway from that post was that one should never interrupt the flow of content, and also should seek to let content be the only thing visible while reading.

Changes Since

In looking back at that, one major thing I think I got wrong was the idea that there should be no full width images. In studying this more, I’ve come up with a better idea of why to use non-text visuals within a post to help, not hinder the readability of an article.

The use of images is best limited to:

  • Examples
  • Adding context
  • Providing a break in a longform article

Uses outside of that are likely to be more distracting than additive to the content at hand. So instead of me forcing small images to the right of the text, I’ve switched back to full width images, but I try very much to limit the use of them. I’ve done this for quite some time now, and have been thinking on this topic since the day I published my last post on it.

I’ve come to find that images are very effective for allowing the reader to pause while you move from section to section. They offer a nice break to engage the reader further into the content. The breaks, which I had initially assumed were bad, turn out to be actually a good thing when designing a readable experience.

That is, in moderation. Everything in moderation. That’s my new mantra.

For instance: an image who’s height goes beyond the bounds of the current viewport is less an image, and more of a visual thing that is just in the way. We need to scale images better to fit within the viewport they are shown in. This is minor, and something I am still working through myself, but something that I think is increasingly important as we trend towards viewing on mobile devices with limited RAM and users with limited patience.

Part Two

In addition to images, I’ve now learned a few more things that add to readability:

  1. Typography is king. Previously I didn’t touch on this at all, but I really should have since this can make or break a site.
  2. White space and site colors are crucial. Too cluttered, too low of contrast, and you might as well have ads everywhere.
  3. Scrolling performance is very important. If you want someone to scroll and read through 10,000 words, you better make sure they can smoothly scroll so they aren’t losing their place constantly.

Now, as with the previous look at readability, this is not a catchall approach. Doing just the three things above will not make your site perfectly readable. But, they will all help — sometimes substantially.

Typography

The most important factor is not the typeface you choose. Many people wrongfully assume the typeface itself is most important, but it’s not nearly as important as how you use your typeface.

There’s only two recommendations I can give you, which I know for certain, about choosing a typeface for reading.

  1. Don’t pick Helvetica
  2. Don’t pick Comic Sans

Both are highly unreadable, but let’s focus on Helvetica for a moment. Helvetica may be the most popular font in the world right now, it is all over iOS,1 but it’s a shitty font for readers. It has tight apertures which make it hard to distinguish between letters at small sizes, and overall is not well suited to body text in any way.

Simply put: there are better san-serif typefaces out there, use them. But, as I said, the choice of typeface is minimal as compared to how you implement it in your site. So if you must have Helvetica, then you need a large type size on your site to make it work, and more contrast than normal.

I would still stay away from Helvetica, but just because I say it is bad doesn’t mean that you can’t make it readable. To test this set the type on your site at your preferred size, now step back from the screen two steps. Can you still read it? If not increase the font size until you find something that is good when you are close to the screen and still good when you are further from the screen.

If you can’t make that work without looking ridiculous, then perhaps it is time to try something else. Georgia, is a pretty easy go to.

Styling Your Typeface

First, you should really read Jason Santa Maria’s book “One Web Typography” to get the full meal deal, but even before that came out, it became apparent to me that you have to look at four critical elements of typography:

  1. Line Height. Your lines need room to breathe. There’s a reason no one likes to read single-spaced documents — they are hard to read. So the larger, or wider, the section of text the more ‘white space’ you need between the lines.
  2. Font Size. Make the font large enough to easily read at a normal distance away from the screen. And then increase the size by 10% or so. Make it bigger, in other words. I constantly up the size of the text on my site.
  3. Font Weight. Make sure the font isn’t too heavy otherwise bolds won’t be so bold, and it will seem a bit too tedious for readers to take in. Likewise, too light and many devices may not render the letterforms well and lead to all sorts of problems. This is about finding the right contrast, so if you love a font, but it seems heavy, lighten the color of the font, or darken the background a bit.
  4. Pick Two Typefaces. Not three, and not four. Pick just two typefaces.

None of this advice is universal, or rules per se, but these are rough guidelines that are readily apparent whenever you look through other sites that look great, and also read great.

Color

I don’t think that I’ve ever considered using color in my content on typography to help aide readability, however in studying many other sites, I’ve come to the conclusion that headings should utilize color to minimize breaking the reading flow.

Allow me to explain that cumbersome wording.

If you take a classic section heading approach and use a combination (or all) of these general rules: different typeface, larger size, underline, border, different weight, etc. If you do any or all of those things, you still need to utilize more white space around the heading to aide in scanning your prose.

A header should: – Signal a shift – Give the reader a break – Offer a stopping point – Be easy to see when scrolling the content quickly

In general white space is good, but too much between sections can cause a reader to lose focus and move on to something else — too much of a break is actually bad.

By adding color to headings you can reduce the size, and weight of headings and still allow them to stand out, while not detracting from readability. Thus, your article remains easily scanned by a reader for relevant headings, but also allows a good flow for a reader who is reading from start to finish.

Where I was once against color, I’ve actually found that a strong, but not bright, color works very well at breaking up an article in a way that is not distracting, but still accomplishes the goal of good section headings.

Make your headings stand out with color, but not distract with color, or other gimmicky means of separating a heading from body text (like obscene borders).

Scrolling

Let’s get this over with quickly: don’t hijack a users scroll, and make sure your site scrolls smoothly. If you do the former many readers will pay more attention to the scrolling than the content. If your site doesn’t scroll smoothly it will be hard for people to retain their place as they read, and even hard to scan the article to see if it is something a reader wants to read at all.

Conclusion

In my first look at designing a site for readability I looked at how content was framed. This was a good first baby step in looking at a highly readable site design. In this post I looked at making the actual words themselves look good and readable.

I’ve not read a lot of potentially really great content because the design was awful.

Your design can either entice me to read your work, or keep me from reading your work entirely. A good design will get people coming to your site, instead of using an Instapaper like service to obscure your design — and if you have ads on your site that is important to your pocketbook.

A good design, architected for reading, helps everything.


  1. Mercifully it will soon be gone. 

Become a Member

This site is 100% member supported and free of advertising. Members receive access to exclusive weekly content: iPad Productivity Report, videos, and the best products listing.

Join Now

Already a member? Please sign in.

Article Details

Published
by Ben Brooks
8 minutes to read.


tl;dr

Make people want to read your article. That’s step one.