7 Quick Tips to Make Your Blog Design More Readable
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.
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.
Read more: ‘11 Ways To Dramatically Boost User Engagement On Your Blog’
Image: Stuck in Customs
Read Next
-
10 eCommerce Trends Every Blogger Needs To Know About! -
17 Writing Tips For Bloggers Who Think They Can’t Write! -
![New WordPress Install – 20 Things You Must Do [Checklist]](wp-content/uploads/2016/09/new-wordpress-install-2016-210x120.jpg "New WordPress Install – 20 Things You Must Do [Checklist]")
New WordPress Install – 20 Things You Must Do [Checklist] -
11 Reasons Why Your Blog Isn’t Making Money and What To Do About It -
15 Editing & Proofreading Tips Every Blogger Should Know -
11 Ways to Fake Your Way To Guru Status! -
The 20 Biggest Benefits of Blogging -
Blogger Profile: Seth Godin and The World’s Weirdest Marketing Blog
"Do Not Write Another Blog Post Until You Watch This Free Video..."
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?
Please enter your email address
How We Get Over 64.73% Of New Email Subscribers
We first added a popup opt-in box to IncomeSup 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 To Get Instant Access
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.)
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
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.
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…
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.
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
Also i wanted to know which plugin u use for Rss which come along with the scroller.
Hey Bharath! I’m pretty sure Michael had that custom built. You can get a similar effect with CSS positioning.
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
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.
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
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.
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.
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 :).
Thanks for the advice Nicholas. Do you have any other tips? I really appreciate the feedback
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
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.
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
Thanks. Pity you didn’t give demos but anyways, will test them later. Never really think of using dropcaps; great idea!
Hey Niall, you’re right, I think I could’ve made my points more clear with images and examples… Thanks for the feedback.
No problem.
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.
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.
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!
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.
Really useful tips for me because my blog templet is very simple. Your tips help me to improve my bllog.
I’m glad, Nitin. Almost every blog starts with a simple design. Then you just keep tweakin’ it.
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).
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.
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.
Thanks for the Informative and Interesting post. good points to keep in mind while doing Blog.