FREE Snackable Writing Course

16 ultra-short emails with easy-to-implement tips
Learn how to write persuasive content and win more customers
 
 

Is Your Blog Design Turning Readers Away in Disgust?

A large white plate with carefully arranged grilled seabassImagine 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 your 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:

  1. White space makes your text more comprehensible. Rafal Tomal shows you how to reduce distractions and increase white space.

  2. 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.

  3. 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.

  4. 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.

This blog post is part of a free tutorial about business blogging.

Image credit (adapted): Shutterstock

Comments

  1. Thanks Henneke, this articleis very helpful because very practical!
    I like “size 14 is the new size 12″. And I wonder if I should get my body copy bigger. The truth is the website has not been set up by me and I’m not sure about customs CSS… A bit stressed at the idea of messing it all!
    Veronique Mermaz recently posted…Selling your product in France: how ready are you?My Profile

    • Henneke says:

      Your font size is currently 14px. You use exactly the same font and font size as the Guardian newspaper in the UK. I think it’s fine. You could go bigger, but it’s not necessary.

      You might want to look at reducing the length of the lines. I’m not sure how it works with your theme, but with my theme I can easily adjust font sizes in the design settings, but it’s more difficult to change line length.

  2. Hi Henneke.

    Just recently, I came across the site Contrast Rebellion. It makes some good points about making text readable on websites. http://contrastrebellion.com

    Also, I love how Google Fonts let’s you mix and match typefaces then test drive them on a page, even using your own text if you want.

    • That’s a great link, Mark. Thank you for sharing!

      And yep, Google Fonts is great and incredibly easy to use. My headlines and logo use Cabin Condensed – this is a Google Web Font, too. You do have to be careful as some of the Google Web Fonts don’t look sharp when you use them at bigger sizes.

  3. This post definitely gives me a lot to think about. I guess some of the quick-fixes are changing the font, the font size, and the size of paragraphs. It’d be interesting to make a few changes to some existing articles and see how they do against one another in the analytics report.

    • Henneke says:

      I like your site design! And yes, I’d try to up your font sizes and reduce the line length – especially on your home page where you have just one column for your introduction, it feels quite hard to read. Let me know how you get on?

  4. Whenever I’m tweaking my sites, I always make sure to increase the font size to 13-14 with medium-large headings and subheadings. More than anything, it’s to help me read my own content, since I have poor eyesight.

    As for type faces, I wonder if you can suggest alternatives to Georgia. I feel I’m in a love-hate relationship with it, but can never settle with other serif fonts. :)

  5. Great advice Henneke, as always. Short, clear, to the point.

    Have a great weekend! :)
    Andrea Hypno recently posted…3 Things Your Cat can Teach You about LifeMy Profile

  6. Kitty Kilian says:

    Gee, you’ve been doing some research, Henneke! I will be checking out all of those links ;-)
    Kitty Kilian recently posted…Moeten we echt een nieuw blogontwerp nu de zijbalk verdwijnt?My Profile

Add your comment

*

CommentLuv badge