Is Your Blog Design Turning Readers Away in Disgust?

Imagine you see a great headline on Twitter.

You click through.

You can’t wait to read the post. You’re excited.

You arrive at the blog post…

*ARGH*

What a disappointment! Too much effort to read that! Yuck!

How often does that happen to you? It happens to me all the time.

Let’s look at another, completely different scenario…

Imagine you’re a chef in a posh restaurant

You’ve grilled a seabass to perfection and carefully arranged it on a plate.

You add a thin slice of Sicilian lemon and a sprig of chive on top. And you arrange a few drops of lemon-butter sauce in an artistic pattern.

You pass the large, white plate to a waiter. He moves the slice of lemon to the side. He shakes the plate so the once-carefully-arranged vegetables become an ugly heap spoiling your pattern of lemon-butter sauce. Maybe he even puts the sprig of chive between his lips as if it’s a cigarette.

The plate arrives at a table all muddled up.

Crazy?

Yes, of course.

But that’s what happens with many blogs.

Don’t leave design to your web designer

Because many web designers focus their attention on the overall good looks of your site.

They don’t care whether people enjoy consuming your blog posts. They don’t mind whether your font selection entices people to start reading or not. They don’t worry whether people read your post from start to finish.

They don’t design for readability. Quite often they don’t even read much themselves.

Don’t let your web design spoil your precious blog posts.

Entice readers by following a few simple rules. Let me show you how.

How to select your fonts

Fonts can look divine, but still turn readers away in disgust because they don’t tempt people to start reading.

Follow these 6 rules to select readable fonts:

1. Simple fonts are proven to work best because they minimize reading efforts. Go for a safe option.

   Check a few web sites you enjoy reading and pick the same font for your body text. What Font is a neat chrome extension to help you check which fonts are used on your favorite websites.

   I use Georgia – a font that’s used by popular online newspapers like The Times here in the UK, the New York Times, Los Angeles Times, and the Chicago Tribune.

2. Feel free to pick a serif or non-serif font. Because there is no definitive answer on whether serif or non-serif fonts are more readable.
3. You might want to use a fancy or complicated font (such as script fonts that look like handwriting) to make your website look different, but these fonts are difficult to read, so use them for only a limited amount of text like a hand-lettered logo.
4. Nobody holds a monitor as close as a book. Most people are between 20 to 28 inches (50 to 70cm) away from their computer screen. That’s why your font size needs to be much larger on the web than in print.
5. Simple sound bites like size 14 is the new size 12 may sound good. But font size doesn’t matter. What counts is the x-height of your font.

   The x-height is the height of letters like o, e, n, m, or x. Different font types may have the same font size, but different x-heights.

6. Subheadings entice scanners to start reading, so ensure your subheadings stand out. Make them large and in a different color.

Looking for an introduction to selecting fonts? Check out this video of Pamela Wilson and sign up to her free design course. You won’t regret it.

How to use design to promote your blog readability

Want to keep people reading?

Follow these 4 rules to focus attention:

7. White space makes your text more comprehensible. Rafal Tomal shows you how to reduce distractions and increase white space.
8. The ideal line length is between 50 to 75 characters (including spaces). A longer line length makes your text difficult to read as you need to move your head like you’re watching a tennis match. A shorter line length becomes stressful as your eyes have to move back to the beginning all the time.
9. The vertical distance between lines needs to be just right to make reading pleasurable. As a rule of thumb the optimal line height is 1.5 times the font size. Alternatively, you can calculate the optimum height with the Golden Ratio Typography Calculator by Chris Pearson.
10. Maximize contrast between the background and the font color, because it enhance readability (source – opens a PDF). Go for black or nearly black on white. And don’t let a background pattern distract people from reading.

The simple truth about blog design

You slave over your blog posts. You polish each sentence. You carefully pick each word.

But that isn’t enough. Don’t waste your blogging efforts. Don’t have an unappetizing blog design.

Entice your web visitors with carefully arranged text. Just like the chef in a posh restaurant arranges food on a large, white plate.