A good blog post is not only what’s written inside.
Another crucial factor is how you present it to your readers.
Your readers are humans, and humans are visual creatures.
I’ve compiled 31 simple hacks to improve your blog post readability from the visual aspects.
Check it out:
Element Size & Style
#1. Adjust Post Width Between 580px-700px For Maximum Readability
Do you know the reason why most of the best-selling books have similar designs, formats, and sizes?
It’s because they’re eye-friendly and highly readable.
Imagine reading a book or blog post that is too wide, or too narrow.
It wouldn’t be easy and fun.
Most popular blogs sets their post width between the 580px to 700px wide.
The blog post you’re reading right now is 640px wide.
#2. Add More White Space Around Your Post
What is a white space?
White space is the blank section between your blog post to another element.
A blog without a proper white space is like cheap brochures, it’s cluttered and hard to read.
If you use Genesis theme, the white space is the padding of your content.
In my opinion, a recommended padding is 80px -120px wide.
This blog sets it’s white space (padding) to 100px (left and right) and 80px (top and bottom).
In addition, you can learn more about white space on Tim Brown’s post What is White Space in Web Design? How To Use it and Examples.
#3. Use Only Two Style Of Fonts
The reason why you should use only a pair of fonts is because it provides:
Too many fonts will just make your blog (again) like cheap brochures…
…cluttered and not professional.
This blog itself only use two fonts:
- Raleway Heavy (headings)
- Open Sans (text)
Normally you would want to use bold font for headings and medium font for texts.
#4. Use ‘Normal’ Font For Text
There’s a reason why Arial, Open Sans, Georgia, and Times New Roman is the most popular font.
And that reason is:
They’re easy to read!
Sure, you may want to use fancy fonts like Pacifico.
However, that kind of font decreases readability.
Most people loves simple things.
So you should use a field-proven font for your text.
Tips: Avoid Comic Sans (it’s only good for comics!) and Times New Roman (in most cases it’s only good for books).
This blog use Open Sans for the text.
#5. Set Your Font Size Between 16px-22px For Optimum Readability
The optimum size for text is about 16px-22px.
Too small, you can’t see what’s written, let alone enjoy it.
Too large, you can read it, but surprisingly you still can’t enjoy it.
Most popular blogs are in 18px-20px range.
This blog uses 18px when viewed in desktop browsers and 15px when viewed in smartphones.
You may want to scale down a few pixels for smartphones.
For headings (h1, h2, h3, h4, h5, h6), you’re more free to adjust the sizes.
Most blogs use h1 size 2-3 x larger than the text size with the h2, h3, and the rest gradually scaled down.
To learn more about font size, especially how to make it readable on any device, here’s a really good post for you:
How to use legible font sizes for all devices by Patrick Sexton.
In addition, this blog use the following size for headings:
#6. Adjust Font Line Height To Add More White Space Between Lines
Line height is the space between text lines.
Too wide, you’re wasting space.
Too narrow, the text becomes hard to read.
Blogger Make Money set its line height to 1.625.
Hence, you want to set your line height around 1.625, because that’s the most popular blogs are using.
#7. Too Thin Or Too Bold Can Irritate Your Readers
Have you read a blog where the text font is too thin, or too bold?
It’s not easy to enjoy it, isn’t it?
Thin font maybe looks luxurious, and bold font looks…bold.
Maybe they are good for titles, headings, or short description of your product.
But it is not good for your blog post.
In most cases, medium is the ideal weight of your font.
In addition, this blog use the regular weight (400) Open Sans for the text.
#8. Dark Fonts, Bright Background (Not The Other Way Around)
It’s more comfortable to read a dark text with a light background, according to Limas Ziana from pyramid | limlimzi.
Here is a simple rule:
Set your font color as dark as possible, and the background color as light as possible.
Sure, a black background with white font also provides contrast…
…however, it’s not eye-friendly.
And always use black as the font color, and white as the background color, if possible.
In addition, this blog use #FFF for background color and #111 for text color.
#9. Make Important Objects & Elements Larger…
An example of important object/element is headlines.
You want your headline to be big and bold.
Your headlines are what makes people attracted to read your posts.
So it’s logical to make them as clear as possible.
Another example would be subheadings.
It should differ from a regular text.
In addition, this blog use 18px Regular Open Sans for regular text and 36px Raleway Heavy for headlines.
#10. …And Unimportant Objects & Elements Smaller
As the important objects and elements became bigger, the unimportant became smaller.
An example of unimportant object/element is the Entry Meta just below the headline.
Usually, it contains the author and the published date.
Make it small but not too small.
You don’t want that element to stand out, because, you know, it’s not a big deal.
“Outrageous! I write the post and people should know who I am!”
Sure, you write the post, and you deserve a credit for it.
But most people doesn’t care about who writes the post the first time they read a post.
If they like your work, they will eventually find out who you are.
#11. Declutter Unnecessary Things
Here’s a good, simple rule:
If it is not beneficial for your readers, remove it.
An example of something that used to be good, but it isn’t anymore:
There are still a lot of blogs that uses tags on their posts.
The thing is, it’s not useful anymore.
Brian Dean from Backlinko, an SEO expert, doesn’t use any tags on his blog posts.
In my opinion, tags are ugly.
It clutters the aesthetic aspect of a blog.
If you want to interlink your posts, there is a better way other than tags.
To learn more about blog design, take a look at Marko Saric’s post How To Design A Blog And Make It Look Pretty.
#12. Break Long Paragraphs Into Smaller Ones
If you observe this post, there is one characteristic you may encounter.
I always use short paragraphs for blog posts.
Actually, I don’t care about crafting the perfect paragraph at all.
I care about making my post as readable as possible.
And yes, breaking your paragraphs into a few parts is effective.
Try to set your paragraphs lengths to a maximum of 3 lines…
…and you will see the difference.
Furthermore, the number of popular blogs which uses short paragraphs is rising.
It’s simple and effective.
To write effective posts, you can read 14 Tips for Writing Posts That Work by Amy Lynn Andrews.
#13. Write Headlines (And Subheadings) With Consistent Style
One common thing all popular blogs do is a consistent style in terms of writing.
That includes writing headlines and subheadings.
Unfortunately, a consistent style is something most beginners underestimate.
Take a look at the following example of a series of a post on how to train left hand:
Post A: “How to train your left hand to be ambidextrous pt. 1”
Post B: “How To Train Your Left Hand to Be Ambidextrous Part II”
The style is not consistent.
First, on post A, the only capitalized letter is the first of the sentence (sentence case).
While on the post B, every first letter on every word is capitalized (start case).
Second, there is a difference in writing the word “part”.
On post A, the part is abbreviated into “pt.”, while on post B, it isn’t.
Third, the post A writes the part number as “1” (Arabic numerals) while the post B write it as “II” (Roman numerals).
If you want to provide a good experience to your readers, as well as to be seen more professional, consider using a consistent style in all of your posts.
For a comprehensive guide on writing headlines that work, see Neil Patel’s post The Simple Guide to Writing Social Media Headlines (That People Click).
In addition, this blog use start case for headlines and subheadings.
#14. Use Compelling Subheadings To Keep Readers Constantly Reading
A good subheading not only attracts readers to read more, it also looks beautiful.
For example, you may want to create a subheading like you write a headline:
You don’t want to write a general, boring, plain subheading.
Take a look the following example of subheadings:
A: Use Subheadings
B: Use Compelling Subheadings
C: Use Compelling Subheadings To Keep Readers Constantly Reading
Which subheading is the most compelling (and attractive to readers)?
#15. Know When To Use Bold, Italic, And Underline On The Right Words
First of all, bold and italic are used to emphasize on an important thing.
“The Falco peregrinus, or the peregrine falcon, is the fastest bird on earth.”
As you can see, I want to emphasize on the title of the bird as the fastest bird.
I used italic on the Latin name of the bird because it’s how you write uncommon things. The same way goes with foreign words.
Furthermore, never write the whole paragraph in bold or italic.
Use bold and italic as little as possible.
The point of using bold is to contrast the words from the surrounding words.
If you emphasize on the whole thing, then there is nothing emphasized.
This is one of the mistakes I made years ago as a beginner.
Finally, avoid using underline at all.
You’re writing a blog post, not a cheap brochure.
If you underline some words, people may perceive it as a link.
And when they click on it, nothing happens.
That is disappointing.
To learn more about using bold and italic, I truly recommend you to read Bold or italic by Matthew Butterick.
#16. Highlight Important Things To Make Your Post Easier To Scan
Most people read blog posts by scanning.
It means they’re looking for something quick.
No time to be wasted.
Therefore, if you highlight the useful information they’re looking, you make their job easier.
#17. Use Block Quotes When Quoting From Another Source
I will demonstrate how and when you use block quotes right below.
#18. Use Pull Quotes To Repeat Important Points
Pull quotes are key, important, short sentences from the text itself that gets re-emphasized.
The point of pull quoting something is to make something stand out from the rest of text so readers can scan it easily.
It’s also a decoration to your text, making it visually more appealing.
Here’s a good tip:
If you think a sentence or phrase is cool and worth to emphasized, then pull quote it.
#19. Use Bulleted List For Short List To Make Your Post More Scannable
There are reasons why you should start using bulleted list:
- Your post easier to scan as a result
- It makes your points easier to absorb
- It prevents your post from becoming plain and boring
When to use bulleted list?
- If you only have a few points to be presented
- When you have a short list
- When the points don’t have to be in order
#20. Use Numbered List For Longer Lists (Also To Make Your Post Easier To Scan)
First of all, here’s the things about numbered list:
- Numbered list is used when you need to present the points in order…
- …or you have a lot of points to be presented.
- Ask the following questions to help you to choose the type of list.
- First, how many points are you going to present?
- If it’s more than 5, I recommend using numbered list.
- Then, should it be in order?
- If yes, numbered list is the definite way.
- Start arranging the points in order.
- Numbered list is the right choice for points that needs to be in order.
- Finally, you see this list itself is a prime example of numbered list.
#21. Columns Are Good, Use It
Besides adding variation to your text, columns are also good for comparison.
For example, I will tell you the pros and cons of using columns (by using columns).
- It’s good for comparison (like this pros and cons itself)
- It makes the lines shorter and easier to read
- It adds variation to your text
- When viewed in smartphones, most columns are useless
- It doesn’t look good if your post width is too narrow
- That’s all
#22. Use Box For Additional Information
Sometimes, you need to add some additional details or tips.
Writing it down is enough in most cases.
Hence, if you want to make it visually appealing and make it stand out, try using boxes.
Images & Icons
#23. Use Simple Icons To Enhance Readability (And Make It Visually Appealing)
You may notice that I used icons in this post.
Icons that are small and simple yet powerful to make this post attractive.
Imagine a long blog post without any colorful icons…
…it would be just a long text, black and white.
Colorful icons add colors to your post, and as a result, your post becomes more eye-friendly.
Furthermore, take a look at the following example of post with and without icons.
#24. Use Colorful Images (And Increase The Chance Of The Post To Be Viral!)
Xerox found that colorful images made people 80% more likely to read a document.
This perfectly makes sense since less-colorful images are boring and plain.
Colors are natural and everywhere, that’s why people prefer colorful images over not-colorful images.
Furthermore, just take a look at some of the most popular sites in the world.
They’re all colorful!
#25. Avoid Using Cheesy (And Overused) Stock Photos
Most beginners are completely not aware of the importance of using the right images for their blog.
They used stock photos…
…the cheesy and overused ones.
For example, imagine you’re looking for an image for your blog post “How To Leverage Your Career In 7 Steps”.
Instead of using this photo:
You may want to use this photo:
In addition, I always look for super-cool photos at Pexels or Pixabay.
They have a massive collection of professional photos, and you know what?
If you want more free stock photos sites, take a look on Christopher Gimmer’s 21 Amazing Sites With Breathtaking Free Stock Photos.
#26. Use The Proper Size Of Images (And Place Them Correctly!)
Image size and placement is two things that beginners usually doesn’t care about.
In most cases, here are the keys to a good sizing and placement:
- Not too small, and not too large
If your post width is 640px (like this blog), then your images width should be at least 640px too.
#27. Use Photo When Quoting Someone To Make It More Credible
Actually, a quote without any photo is good.
However, if you want to make your quote more credible, consider adding a photo of the person you’re quoting.
It creates an effect where readers will perceive that the quote is legit.
In addition, take a look at the following quote taken from Backlinko’s White Hat SEO Case Study.
#28. Apply Border Line For Screenshots To Reduce Readers Confusion
Sometimes, you want to insert a screenshot of some text into your blog post.
You just insert it and then published the post.
A problem occurs when some readers can’t differentiate between a screenshot and your post.
A screenshot of text may looks like it’s part of the post.
The solution is by adding a border line to the screenshot, like what I did with all screenshots in this post.
That way you will know that it’s a screenshot.
To learn how to add border line to your images, here’s a guide from Brian Jackson.
#29. Tiled Galleries Are Great To Present A Lot Of Images (Especially Product Images)
When you’re doing a product review, usually there are a lot of images involved.
Too many images can make your review unseen by the readers.
The solution is by arranging the images in a tiled style gallery.
Take a look at the following example.
#30. Use Standardized Icons For Social Sharing Buttons
Every social sharing sites hany it owns sharing buttons…
…however, they’re all different in shapes.
To enhance tidiness, most big sites uses their own standard sharing buttons.
In fact, you should do it too.
Most social sharing plugins offer a standardized sets of social sharing buttons.
#31. Remove Unnecessary Social Sharing Buttons (Less Is More)
Use only the ones that you readers use.
In most cases, Facebook and Twitter alone is enough, because usually there is a “More” button to share using other apps.
Too many buttons and it will clutter your site design, also it makes people confused when choosing where to share.
I recommend using no more than 4 social sharing buttons.
For example, this blog only uses Facebook, Twitter, Pinterest, and Google+ buttons.
Choose wisely the buttons based on your readers demographic.
You definitely want to increase your social shares, and I recommend you to read How to Improve Social Sharing by 97% by Ian Cleary.
Do You Have More Tips? Share With Us
I already compiled the best and most effective visual hacks you can implement to your blog.
Let’s see if there are any other tips from you.
Please shoot a comment below and don’t forget to share this post if you find it useful.