18 Easy Ways to Beautify Your Blog Posts – Part 3

As I’ve mentioned already, designing a blog isn’t all about choosing pretty fonts, colors and graphics. One of the best ways to make your blog beautiful is to pay attention to the readability of your blog posts.

Welcome to the final of a 3 part series on helping you beautify your blog posts and make them easy to read! By now you’ve learned 9 ways to make your blog posts scannable and 6 ways to make your blog posts easy to read. Today, I want to discuss 3 more details that many bloggers tend to look over. But first, grab your free checklist here:

16. Make your links look like obvious links

They should be completely obvious that they are something to be clicked on. Likewise it should also be completely obvious that non-links are not links.

Thankfully there are three easy ways to do this:

1. Don’t underline anything that is not a link.
   Underlining your links is personal preference however it does make it painfully obvious that what you have underlined in a different color is a link. Don’t confuse readers by underlining anything that is not a link. It’s confusing.
2. Make your links a noticeably different color from your main text color.
   Use a color that stands out. I’ve seen blogs and websites where their links are the same color as the text and the only way to know it’s a link is by hovering over it. That’s a bad user experience. Help your users by making them obvious.
3. Choose one color for all of your links and only use that color for links.

   Caveat: you may choose to use this special link color for your buttons as well since both are clickable elements.

Link States

While we’re on the subject of links, it’s a good idea to have your links look different on hover and also after they have been visited.

On hover is the way a link looks when your mouse hovers over it. This just gives extra indication that the link is an active link.

A visited link should also have a different color so that it indicates to the user that they have already visited that link and they don’t need to click on it again. This is especially useful when you have a list of links for someone to read through. It helps them know which ones they’ve already visited.

Here’s how to fix this on your blog

To underline your links (if they aren’t already), you’ll need to edit your CSS. I’ll walk you through an example. We can start with underlining our links no matter which state they’re in and setting the default link color, which should be a color that
contrasts well with your body copy yet is still readable:


a:link, a:hover, a:visited {
text-decoration: underline;
color: darkturquoise;
}


a:link is the default state for a link on the page.

a:hover is the state of the link when it is hovered over by a mouse. Either set this to a different color or you may opt to remove the underline if the default state is underlined or vice versa. You can choose a different color in your palette for the hover color or you can choose a lighter or darker variation of the default color:


a:hover {
text-decoration: none;
color: aqua;
}


a:visited is the state of the link after it has been clicked. It’s a good idea to set this to a different color from the default state to alert users that they have already been there. It’s perfectly fine to use the same color for the hover and visited states if you’d like:


a:visited {
color: aqua;
}


17. Use Thinner Fonts for Your Body Copy

Reserve thicker fonts for titles, subheadings and highlighting important text within your body copy.

Too often I see blogs using heavy fonts for their normal body text and it’s just plain unattractive. You don’t have to use hairline thin fonts if you don’t want to, just use normal weights.

18. Preview Your Posts Before publishing

This one may seem obvious, but previewing and proofreading your posts is essential before hitting the “Publish” button.

Things to look out for to make sure your formatting is ok:

• No extra line breaks where they shouldn’t be
• Alignment of page elements and uneven spacing
• Look for weird text-wrapping issues
• Spellcheck

To remove extra line breaks, you may have to check the code view to look for and remove extra <br /> or <p></p> tags.

To fix text-wrapping issues, especially around images, make sure your images are aligned left or
right. This will cause the text to wrap around the image.

Bad spelling is unnecessary and it looks sloppy. I don’t mean to sound judgmental but it really distracts me when I’m reading an article and I see plenty of misspelled words. I know, no one’s perfect and everyone makes mistakes (even me!), but try and keep them to a minimum if you can.

Take the time to proofread your content and don’t forget to use a spell checker.

Well my friends, that’s it. We covered 6 new ways to make your blog posts easy to read and 18 ways in total to beautify your blog posts. I’d love to know what your favorite tip(s) have been so far. Share below with me.

Need feedback or help with any of the above suggestions? I’m happy to help, just leave a comment below with the URL to the page in question and I’ll take a quick look for you!