Start With A User-Friendly Blog Layout

Your blog layout is the first step in formatting your posts. Often, it is constrained by the WordPress theme or Shopify theme you’re using.

Here are a few key tips when designing your layout.

1. Use Single-Column Or Two-Column Layout

The first thing your readers see is how easy your blog is to read and navigate. The number of columns you use plays an important role; it’s best to limit your blog to two columns.

A single-column blog makes it easy to read, and it's the easiest format to make responsive.

But there are times when you want to use a multicolumn layout, mainly as a sidebar that doesn't take away from your main content.

A sidebar provides additional space for:

Introducing the author of the blog post.

Adding an email opt-in form.

Promoting related blog posts.

What if you want to make your blog as neat as possible, but include a sidebar for marketing purposes?

Here’s an example of how Product Habits uses the two-column layout in the blog list page where readers are browsing instead of reading and single-column layout for the blog posts to keep readers' focus on the content.

The blog uses the two-column layout to showcase the list of blog posts with a sidebar for an email opt-in form and the three most popular posts. A single-column layout is used for blog posts to improve readability.

2. Limit The Number Of Characters Per Line

When you read a book, newspaper, or article on your desktop screen, you move your eyes from left to the right again and again, and it gets harder for your eyes to follow the line when it gets too long.

You might even want to turn your head from side to side just to read it. Here’s an example for how it looks to have different numbers of characters in a line:[*]

To make sure this doesn’t happen to your readers, limit the number of words and characters per line for your blog posts.

Here’s the rule of thumb you can follow for materials on the web:

Anything from 45 to 75 characters is commonly seen as a satisfactory length of line for a single-column page set in a serif text face in a text size. The 66-character line (counting letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.[*][*]

There are two ways to optimize the characters per line:

Adjust the width of the column. If you have too many characters in a line, narrow down the column, and vice versa.

Adjust the font size. If you want to keep the column width to fully use the available screen, you can choose to use a large font size for your text.

3. Use Easy-To-Read Colors For Texts And Background

You don’t need to be a graphic designer to know how to use colors to make your blog posts easy to read.

Depending on your brand colors, you can use different colors for your website background. The rule of thumb is to have the text color in contrast with the background, so they are readable.

If the background is white, use black for the text. On the flip side, use white text (or any light colors) when the background is black or dark.

But remember, never use pure black for your background or text.

Pure white has 100% color brightness and pure black has 0% color brightness. The contrast between them is proven to lead to eye strain for the readers.[*]

Instead of using pure black, use dark gray for your text or background, especially for paragraph text because readers spend more time on them compared to the headers.[*]

4. Select The Right Fonts For Your Blog

There hundreds and thousands of fonts out on the Internet and you probably don’t know every one of them. Me either.

However, most fonts come down to two categories: serif and sans serif.

In the early days of computers, serif was generally for print, and sans serif was for monitors, since the monitor resolution was poor and made the serifs look fuzzy and it affected readability.

Serif fonts also have a longer history compared to sans serif, and are commonly used on mediums with lengthy text like books and newspapers. Because of that, you can use serif fonts if you want to portray a more serious, professional image.

On the other hand, sans serif fonts are the modern typefaces that are easily recognizable and read. These fonts are widely used by people who prefer a more modern design approach.

For the numbers of fonts in your blog, try keeping it at fewer than three fonts (I would highly recommend you use only one to two fonts).

You can use a site called FontPair to find the perfect font pair for your site:[*]