How to Design a Blog Post - Insights From 10 Million Monthly Visitors

by Shane Rostad - Want to get the next post delivered to your inbox? Subscribe Now.

Most blogs on the internet look terrible - and yours probably does too.

You’re trying to write content that engages readers and ultimately turns them into customers...

Yet your lines are so cramped together it’s impossible to read.

Or maybe your font size is so small people need a magnifying glass to read it.

Or worst of all, your blog is still written in Times New Roman.

Without even knowing it, you’re committing many more than just these few I-love-your-writing-but-can’t-stand-to-read-it offenses.

“But Tim Ferris’ blog is ugly and a lot of people read it.” Sure, but you’re not Tim Ferris. He could publish his content upside-down and people would be turning their computers over in coffee shops to read it.

I get it… you can’t afford a team of 6 designers to give your blog a complete makeover like HubSpot. I’m here to say you don’t have to.

In this article, I’m going to give you a small list of changes that, once implemented, will have your blog looking great.

In order to create this list, I analyzed multiple posts from 10 blogs from various industries that receive a combined 10,000,000 monthly visitors.

Let’s jump in.

Styling the text on your blog

Choosing the right font

Would anyone tell you they care about your font choice? Probably not. But you can certainly tell the difference between:

Clearly, not all fonts are created equal. Yet you don’t need to run off to design school to choose a proper font for your blog. Here’s a simple rule (forgive me, designers):

  • Trying to be professional and classy? Use a serif font.
  • Trying to be laid-back and casual? Use a sans-serif font.

Here’s a few free Serif fonts you can’t go wrong with:

EB Garamond

Get it from: Google Fonts

Merriweather

Get it from: Google Fonts

PT Serif

Get it from: Google Fonts

And here’s a few free Sans-Serif fonts you can’t go wrong with:

Work Sans

Get it from: Google Fonts (no italics), Font Squirrel (includes italics)

Roboto

Get it at: Google Fonts

Montserrat

Get it at: Google Fonts

Note: all fonts here were ‘borrowed’ from Erik Kennedy’s Learn UI Design.

I’m not going to get into the world of font-pairing, so I recommend you use *one* font for all the text on your page.

Getting your font size right

The worst offense I see around the web is super tiny font sizes. You tell me - why do I need to zoom in on your blog post to read it? Call me lazy but that’s too much effort.

What I’ll do here is lay out a few font-size frameworks taken directly from popular blogs that you can use to ensure your content is easy to read. The frameworks will give you specific font-sizes for 3 heading levels (H1, H2, H3) and your paragraph text.

For the purposes of these frameworks I’m going to keep things simple and talk in terms of pixels(px). Font size can be assigned using px, em, or rem, which I recommend you learn about in this blog post.

From HubSpot's blog:

From Invision's Blog:

From FirstRound's Blog:


From Backlinko's Blog:

Pick whichever sizing you like and stick with it. If nothing else, at least update your paragraph text to a size between 18-22px.

Adjusting for line height

Now you’ve got a solid font and it’s properly sized. Next up is line-spacing. If you couldn’t guess, this is the space between consecutive lines of text.

My first instinct is to tell you to use 1.5 spacing for everything. Lucky for you me, Steve Schoger shared this tip on Twitter which gives a better recommendation:

"Using the same line-height for all text is a very subtle but common mistake. 1.5 may work great for body copy, but as text gets larger, your line-height should get tighter."

So here’s the rule:

Paragraph-text = line-height: 1.5;

H2/H3 = line-height: 1.25;

H1 tags = line-height: 1.125;

Choosing the right content-width:

Have you ever read a blog post and it feels like your eyeballs are running a marathon to read a single line of text?

I have, and I hate it. Here’s an example (blog #1):

This text covers 74% of the page and uses a 16px font. To put that into perspective, through all my research the largest content-width was 50% - and even that was paired with a 22px font.

Here’s what that page (blog #2) looks like:

Can you tell the difference?

You may have noticed the string of consecutive alphabets in the last image. This is another rule I learned from Erik Kennedy - keep your text-width between 2-3 alphabets in total. For comparison, blog #1 measures in at 5 alphabets wide.

So here’s what you should do: set the width of your content somewhere between 40-50%, and set a `max-width` of 720px. That way the width will be constrained on very large monitors.

Formatting images for your blog

Featured image

A featured image for your blog post (the one that sits at the top) is a must - but it’s also easy to get wrong.

You don’t want an image so big that it’s the only thing people see when they load your page.

An easy formula to solve for this is to use a featured image that is the same width as your text area, and make it half as tall.

For example, your content width should now be 50% with a `max-width` of 720px. Crop your featured image to a width of 720px and a height of 360px.

Styling inline images

In 2014 blogpros analyzed 100 high ranking blog posts and found each article had an average of 3.2 images. And because you want your posts to succeed you’re probably adding images into your content too.

Now, the question is, how do you display those images? For this, there are only two rules I suggest you follow:

1) always constrain larger images to the width of your text

2) always center smaller images

You’ve already seen examples of these rules in action throughout this post. Aside from these rules, the only other question is: to border, or not to border?

The answer is up to you. Most blogs choose to not add any type of border to their images, but I like a little shadow.

Quick changes for mobile screen sizes

If you haven’t heard, mobile is a big deal. Google ranks mobile-friendly sites higher, 50% of all web use is mobile.... these stats could go on for days.

So, what do you need to change for mobile? Just your content width. Most blogs I researched maintained the same font-size, line-height, image format, etc on mobile. But if they didn’t update their content width, the posts would look like this:

By giving your content a 100% width on mobile (with a little bit of padding), it ends up looking like this instead:

Now it’s on you

There’s a ton more I want to cover on this topic. Inline CTA’s, popups, et cetera.

But what I've covered here are the fundamentals of having a blog that is readable. If you’re spending any time at all creating content it’s worth it to spend 30 minutes making these changes.

If you couldn't tell, these are the steps I've taken to design my own individual blog posts (like this one you just read). The quality of writing may be painful, but it's easy on the eyes.

Shane Rostad

I’m a web designer who cares as much about business results as I do making things look good.

Get the next post delivered straight to your inbox

SUBSCRIBE

© 2019 All rights reserved

HOMEWRITINGCONTACT