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.
Image: Stuck in Customs