IncomeDiary.com

How Pros Make Money Online

Income Diary

7 Quick Tips to Make Your Blog Design More Readable

By:     Topics: Blogging

If you’ve ever read a book at the beach, you’ll understand that your environment plays a big role in how enjoyable it is to read.

The same applies to your blog, except, you control every element that makes up the environment.

One of the easiest ways to improve the quality of your blog is to increase the readability of the design.

I’ve already made my point about the importance of subheads and lists. So now I want to tell you about seven other rarely-used, blog readability design tips.

How we get over 64.75% of new email subscribers

We first added a popup opt-in box to IncomeDiary back in 2010. Today, it gets us more subscribers than our homepage opt-in, footer opt-in, sidebar opt-in and squeeze pages combined. After seeing how well it worked for us, we decided to develop it into a plugin our readers could use. It's been so popular that over 60,000 websites now use it!
Click Here For More

1. Lure in their Eye with a Drop Cap

If you flip through a magazine, you’ll likely notice that many of the articles start with a drop cap.

They do that to draw your eye in to the beginning of the article. The easier it is to find the beginning of the article, the more likely you are to read.

How to Create a Drop Cap

Put this code in your theme’s style.css (or your theme’s equivalent):

.drop_cap { color:#888; float:left; font-family:Georgia; font-size:3em; font-style:normal; text-shadow:#333 1px 1px;}

Adjust the CSS to fit the colors of your theme. That’s just a good starting point.

Wrap the first letter of your posts in:

<span class=“drop_cap”>I</span>f you’ve ever…

2. Help them Start Reading with Big Intro Text

Once you lure in their eye, you need to make it as effortless as possible for them to slide into the content. One way to do this is to simply enlarge the text of the first paragraph.

This, coupled with the drop cap, will give your post intros a magazine-style professional touch.

How to Post Intro Text

Put this code in your theme’s style.css (or your theme’s equivalent):

p.intro { color:#333; font-size: 1.4em; line-height:1.4em; }

Again, adjust the CSS to your theme, but this will get you off to a good start.

Wrap the first paragraph of your post in:

<p class=“intro”> <span class=“drop_cap”>I</span>f you’ve ever…</p>

Note: I chose not to include a drop cap or intro text in this post because it wouldn’t be consistent with the rest of the posts on IncomeDiary. Consistency trumps fancy.

3. Keep Short Paragraphs

I know this advice is slightly redundant, but I think it’s important enough to mention again. Looking around the web, it’s as though we all had teachers who told us that paragraphs are comprised of 8-10 sentences.

Writing for the web is different than writing for paper because people are constantly being distracted. You need to keep somebody focused by helping the breeze through the content.

Solution: 1-3 sentence paragraphs.

4. Choose an Easy-to-Read Font

It’s a general consensus that sans-serif fonts, such as Arial and Verdana, are best for the body content of a webpage because they’re clean and not as cluttered as their serif counterparts.

I know, typography purists will argue why there’s no such thing as a best font for every situation, but here’s what some of the world’s top websites use for their body content:

  • Google: Arial
  • Wikipedia: Sans-Serif
  • CNN: Arial
  • Yahoo: Arial (home), Georgia (content)
  • MSN: Arial
  • New York Times: Georgia
  • Wall Street Journal: Arial

When choosing your body font, you can be creative or you can go with what big sites have tested and found works best. Personally, I use Arial for almost every site I build.

5. Keep a Minimum 14 Point Font Size

A couple of weeks ago, Derek Halpern wrote a data-driven post about how the size 14 is the new size 12.

In the post, he cites a few of studies that revealed how fonts affect people’s ability to follow instructions and how they perceive your brand.

Just know that 14 pixels is the absolute minimum for easy-to-read body content.

6. Set Golden Ratio Line Height

Once you set your font size, you need to establish your line height based on the golden ratio. The golden ratio (1.618) helps you determine the optimal amount of space between lines.

Chris Pearson created a nifty tool to help us determine these numbers called the, Golden Ratio Typography Calculator.

How to Set the Golden Ratio Line Height

Use Chris’s tool to determine the optimal line height based on your font size and content width.

Let’s say your font is Arial, your font size is 14 pixels, and your content area is 600 pixels.

Put this code in your theme’s style.css (or your theme’s equivalent):

.format_text p { font-size: 14px; line-height: 23px; }

7. Pick a Light, Calming Background Color

A few months back, Neil Patel changed the background color of QuickSprout from a medium-grey to a calming yellow.

His reasoning was that as you scroll down the posts, the background area becomes more predominant. So it’s important that you choose a soothing color if you want your readers to respond positively to your message.

IncomeDiary follows suit with the light grey patchwork pattern in the background of the site.

How to Change the Background Color

Your theme likely has some built-in functionality to control the background color. If not, you can put this code in your theme’s style.css (or your theme’s equivalent):

body { background-color:#FBF7D1;}

Once again, adjust the color to fit your site.

The Final Note

As a blogger, I’m sure you spend a great deal of time creating content for your site.

That’s good, but spending a few minutes implementing a few of these tips will drastically improve the readability of every blog post you’ve written.

If you have any questions about making any of these changes, let me know in the comments and I’ll try to help.

Image:  Stuck in Customs

"Do Not Write Another Blog Post Until You Watch This Free Video..."

Traffic Domination

Watch this free video to learn...

  • How I got over 10,000,000 people to visit my websites.
  • The types of blog post that got me all that traffic.
  • How to get someone else to do it for you!

Where should I send your video?

  • Kelli Roig

    This is good advise, but how do you do this if you are using a pre-built template from WordPress, for instance. I cannot control the size of the font at all, and I know it’s way too small. Thanks

    PS (don’t know a thing about coding, etc.)

    • http://www.dansumnerblog.com Dan Sumner

      Hi Kelli,

      Depending on which theme you are using you may be able to check your theme settings. I use the Thesis theme and this allows you to edit the font size directly from the Thesis control panel.

      Some themes may not have this feature. If not then you need to look into editing your style sheet (style.css). If you are inexperienced with blog code then I wouldn’t recommend it. If you do however want to give it a go ensure you make a copy of your existing style sheet before edit, so you can replace it if you break it.

      Like I said, it’s not a task for the inexperienced.

      Dan

      • Nicholas Tart

        Thanks for the support, Dan :). I also use Thesis which makes everything a lot easier. Kelli, if you give us a link to your site, I’ll tell you exactly what you need to change.

  • Matthew Newnham

    Thanks so much, Nicholas. That’s great, rock-solid advice that I’m putting into play immediately. I particularly like the Golden Ratio. Along with the 1-3 sentences rule, that should give blog content plenty of “breathing space”…

    Matthew Newnham
    Meaning Into Profit
    Marketing for businesses who believe in changing lives…

    • Nicholas Tart

      Sure thing, Matthew. Everything I know about the Golden Ratio is from Chris Pearson and Wikipedia. It’s one of those little-known-but-becoming-widely-understood tips.

  • Bharath patel

    Hi Nicholas Tart,

    I could not close your website from my browser, as it have got such a excellent, huge, quality and unique content which i can’t find any ware else on web.

    Also thank you for sharing such a quality bundle pack about blog design.
    Thank you once again.

    Regards,
    Bharath Patel

    • Bharath patel

      Also i wanted to know which plugin u use for Rss which come along with the scroller.

      • Nicholas Tart

        Hey Bharath! I’m pretty sure Michael had that custom built. You can get a similar effect with CSS positioning.

  • http://www.dansumnerblog.com Dan Sumner

    Hey Nicholas,

    Thanks for the tips. I am currently going through the same updates on my blog. I need to engage the reader more. I have taken to removing all my ads to concentrate on opt-in.

    I am also working on a lot of interlinking to keep the reader on my blog.

    All the tweaks count to the whole picture. It a long process, but I feel I’m getting there.

    Great tips Nicolas, Thanks.

    Dan Sumner

    • Nicholas Tart

      Hey Dan, I’m glad I could help. The more I write here, the more I see all the things I need to fix on my blog as well. You already have solid engagement on your blog. See you around.

  • Bryan

    Those are some great points. I know some blog are hard to read and that is why I won’t go back and read them. I will be making some changes to my blog today. Thanks for putting in the style code.

    Bryan

    • Nicholas Tart

      Sure thing, Bryan. I understand that simply knowing how to make changes to their blog is a stumbling block for a lot of bloggers. Let me know if there’s anything I can do to be more helpful.

  • http://www.brianfarello.com Brian Farello

    I will definitely be implementing these tips in my blog posts. I have been testing different ways to increase my readability and I think these will definitely come in touch.

    • Nicholas Tart

      Hey Brian… Just breezing through your site, I was super distracted by all of the sharing options for posts on your homepage. It took me awhile to simply figure out where the posts begin. Just my two cents :).

      • http://brianfarello.com Brian Farello

        Thanks for the advice Nicholas. Do you have any other tips? I really appreciate the feedback :)

  • Joe Elliott

    Hi Nicholas,

    What a great article, these points are so easy to implement and they will make such a difference.

    You mentioned the number one rule consistency in design which is really important.

    One we thing to note with blog design, when a viewer reads they automatically start left to right, they might not notice they are doing it but it’s what our eyes do automatically, so it is a good idea to put your call to actions and most important things to the left of your page :)

    Thanks
    Joe Elliott

    • Nicholas Tart

      Thanks for the tip, Joe! That reminds me about sidebar positioning. I can’t think of any big blogs that have the sidebar on the left.

      • Joe Elliott

        No Problem Nicholas, It’s called the F layout, most important things to the left then least important on the right, the only reason I can think of maybe putting left sidebar is if your mailing list subscribe is on it, but to be good to your readers keep it on right. There is a Z layout but isn’t near as common its good for a 1 product website though :)

        Joe

  • Niall Madhoo

    Thanks. Pity you didn’t give demos but anyways, will test them later. Never really think of using dropcaps; great idea!

    • Nicholas Tart

      Hey Niall, you’re right, I think I could’ve made my points more clear with images and examples… Thanks for the feedback.

      • Niall

        No problem. :-)

  • http://veggieab.com Abigail

    Thanks tips to help me stand out with my blog. I am going to try, and hopefully the tips are easy to implement. I like that your articles are very easy to read and straight to the point and useful. IncomeDiary has a special technique for being easy to read, unique, and captivating! A difficult mix, seems hard but it makes IncomeDiary stand out and an authority! I look forward to reading everyday.

    • Nicholas Tart

      Thank you, Abigail. Yeah, Michael has invested quite a bit into this design and making it easier to read is a big portion of that. Thanks for commenting consistently. I remember the folks who do.

  • http://www.oopsmademoneyonline.com Aaron

    Fantastic.

    Short, simple & useful.

    I’ve created a couple of information blogs and realised how important small little things like the font used can help make things easier to read and digest!

    • Nicholas Tart

      Yep, font selection is often over-looked by a lot of bloggers and designers. When, really, people spend more time looking at your font than any other part of your design.

  • http://onlinemoneydn.blogspot.com Nitin

    Really useful tips for me because my blog templet is very simple. Your tips help me to improve my bllog.

    • Nicholas Tart

      I’m glad, Nitin. Almost every blog starts with a simple design. Then you just keep tweakin’ it.

  • http://www.tipsinablog.com Daniel

    A very interesting post, Nick.

    I was not to clear about drop caps, so I just went and did a bit of browsing in relation to this.

    Just one question regarding WordPress and in particular the Thesis theme: Do you actually need to go in and do code edits with WordPress, on such basic things as changing font size , color, etc ?

    That does sound like a bit of a pain, as you can do that with Blogger in a split second(click)using Blogger ‘s template editor.

    In my case, I get a fair amount of coding practice, as I am using a Bloggerized WordPress theme that does not allow you to use Blogger’s template editor.
    It’s a bit of a trade off, “Great template —-limited editing function apart from manual code edits)
    So maybe the shift to WordPress Thesis won’t be as Painful for me (The learning kerb required).

    • Nicholas Tart

      Thanks, Daniel! Yep, Thesis and many other premium themes make it easy to make simple changes like changing font size and background color. I know Chris Pearson, creator of Thesis, is working on building a full-scale design editing function into Thesis that’ll be released later this year. If you buy it, you’ll have unlimited upgrades for life.

      • http://www.tipsinablog.com Daniel

        Many thanks for the reply, Nick.

        Sounds like the design editor would be a very welcome addition for thesis users. That(The full scale design editor) may turn out to be the catalyst for many Blogger users to decide to jump ship.

  • Nathan Brook

    Thanks for the Informative and Interesting post. good points to keep in mind while doing Blog.