How To Format Your Post Like A Pro

Formatting is an often overlooked part of writing a post. If your post looks ugly or hard to read, no one ( ok, maybe your mom ) is going to read it!  So skip the tiny fonts and hard to read colors and go for simple, clean and easy to read type that looks great on all devices. By following the examples below your post will look professional, be easy to read and give you some automatic credibility! All of this will give your visitors the incentive to keep reading. But it's still up to you to write quality content!

Use a large font for your paragraph text

Don't make it hard for your audience to read your content. With all the screen time we have each day our eyes are tired and want easy! Besides, this is the internet not print. I recommend a font size between 18 - 20 pixels. Yes, that is grandma big but your readers will appreciate it. The actual size you choose will probably depend on your font choice. If it looks too small or if you aren't sure then make the font size larger.

Your paragraph text should be medium dark

Make your text as easy to read as possible. You never want to use a colored font unless for the visually impaired or to bring attention to a specific point.

A monochrome medium dark gray color is your best choice.  HTML uses hexadecimal code ( a set of six alphanumeric characters ) to create colors. Here are some easy ones to remember so you don't need to learn any code:

#444444 - medium dark gray

#555555 - a little lighter than #444444

#666666 - even a little lighter

You can probably guess that if you tried #333333 you would get a darker gray and you would be correct! #777777 would generate a lighter gray which in my opinion is too light. If you are interested, there are no shortage of tutorials on how to create your own colors using hexadecimal like at w3schools.

Use your judgment to see what works best for your design.

Use plenty of spacing between lines

There is no reason to squish your lines of text. It just looks bad and will get your potential readers checking out their instagram feed instead of your post if your lines are too close to each other. Besides, we aren't restricted to space on a page like in print.  Line spacing also known as leading in typography should be a minimum of 1.5 times your font size. If your font size is 18 then your line height should be a minimum of 27. My preference is 1.85 which comes out to a line spacing of 33.3 pixels.

Your copy width should be a maximum of 800 pixels ( 65 - 75 characters )

There is a lot of research into what the proper width should be for optimal reading. The idea is to not require your reader to move their head when reading. Even better if they don't even have to move their eyes! Using a font size of around 18 - 20  pixels should bring you in range of the 65 - 75 character line limit.  This will allow your reader to either skim or quickly read your post and you can bet they will remember the next time they think about reading your content.

Think twice before using a sidebar

Do you really need a sidebar? Is it really serving a purpose for your readers or is it there just for you? If the latter then I suggest you remove it and don't look back. For most of us it is just a distraction and if you want someone to read your post why would you want to distract them? Besides, I am willing to bet that most of your readers are using a mobile device and never see the sidebar anyway!  There are a few exceptions but in general, if you really need a sidebar you can probably place that content either above or below your post instead.

Use complementing headers against body text

Not only should your headers be larger but they should also be a complement to your body copy. If anything, it will help break up your content into more readable chunks. Hopefully, it will bring attention to each of your sections. The most commonly used method is to mix a serif with a sans-serif font. Wikipedias description of a serif font is one that has a small line attached to the end of a stroke in a letter or symbol.

In this post ( and throughout this site ) I am using the serif font ( "Playfair Display" ) for the headers and Helvetica a sans-serif font for the body copy. By using a contrasting font for the headers I don't have to use a much larger font. It just stands out on its own. The current font size for my section headers is 28px and set to bold and my body copy is sans-serif font Helvetica at 18px.

You can certainly do the opposite and use a sans-serif font for your headers and a serif font for your body copy. You don't have to mix serif with sans-serif fonts. If you want you can use all serif and/or all sans-serif. You can even use two different types of serif and/or sans-serif font. Again, the idea is to get the readers attention so don't get carried away and bombard them with too many fonts. I would never use more than three fonts and if a third is used it would be for a special purpose such as in a quote.

Are you struggling to choose a set of complementing fonts?  I highly recommend you check out Design for Hackers by David Kadavy. He'll explain everything you need to know and more in simple terms.

Use quotes to hammer down an idea and make it tweetable

Line spacing also known as leading in typography should be a minimum of 1.5 times your font size. Click To Tweet

Notice how the above quote reinforces an idea and looks professional. Making it tweetable is an added bonus to bring new visitors to your site. The plugin I am using is Social Warfare but there are a few in the WordPress repository.

Keep your paragraphs short

If at all possible keep your paragraphs short. Two or three sentences are great! The common theme throughout this article is to make your content easy to read and you've reached the end of this paragraph and post 🙂