Finally we’re at the stage where we can use some of our design skills! In the next few articles we will look at how to make our content easy to read and scan; in the next post we’ll work on grabbing attention with good headlines! Your content won’t be read if you don’t add kick ass headlines! And your content won’t be read if it isn’t formatted to be easy, pleasant and quick to read! Many bloggers do not consider just how important these points are in the beginning, I didn’t either, but after being online so long, I really appreciate good formatting and yes, catchy headlines work on me as well as they work on anyone else!

So what exactly is good formatting and how do you give you visitors a better reading experience?

Text Formatting

Choose The Right Font

Pick the right font for headlines and content ( paragraphs) – what’s right depends on personal taste and the site topic you’re writing about of course, but take a look at this article – How to Safely Match Web Design and Typography for a more in depth explanation. Never underestimate the power of proper typography, it can be the difference between whether or not people read your articles.

Some of our readers have already noticed we use a serif typeface for headlines, which according to some theories, isn’t the best style of font to use for headlines. Well, I am writing this guide to remind myself how important it is to have really good and thought through typography and will change the CSS styling to 1WD shortly after publishing this article. How about that – case study in action!

Tip: Just to be clear, don’t use more than 2 fonts on your site! It’s ok to use different fonts for headlines and content, but if you use too many fonts your site will probably look very unprofessional. There are some exceptions for quotes, logo, just don’t get crazy, play with different CSS styles not fonts!

Importance of Typography

Still not convinced typography is important? Ok, then I suggest you read this article – What’s Left? The author removes all the content from blogs to show what happens when you a blog is stripped of everything but the design. While the article is about needless website redesigns, I enjoyed this simple test to see why “content is king” – for blogs content actually is everything!

If you would like to see what happens when you strip a site of it’s design, check MIN. MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

Related reading for better typography tools – Ultimate List of 32 Font And Typography Tools.

Paragraphs

Text Size

This is a tricky point too, because you can increase text size in a browser with a few clicks, but still wouldn’t it be better if we could read content right away when we visit a site? I think different formatting and distractions are the main reasons why feed readers, Zite, FlipBoard and Readability are so popular! Many blogs have strange text formatting, too many ads and social media which distract from the content itself! If you can’t remove ads or social buttons, take the time and care to create a great reading experience! How big should your text size be? Again it depends on your audience, but I think 14px is a good starting point – not too small, not too big.

Use Sans-Serif Typeface For Content

Use sans-serif font for content, it’s easier to read letters without serifs (I know, I know Times New Roman is serif and it’s a common typeface that people use when using Word, but online, sans-serif fonts seem to work much better, they also make big chunks of text much easier and faster to scan).

Separate big chunks of information

Paragraphs should not be more than 3-4 sentences. Imagine how hard it would be for you to read text without any formatting? Just one huge pile of words and sentences with no visual difference or hierarchy between the different topics, paragraphs and headings! Imagine yourself sitting at a desk full of different papers, notes, tools – how do you feel? Overwhelmed? There’s a good reason minimalism is so popular in web design! Put clear separation in your content as well!

Headings

Headings are both for clear content separation and search engines! You should use a lot of headings for the same reason you need to separate paragraphs clearly. With these headings you can grab reader’s attention or lose it! If there are no headings at all – you’ve already lost!

While H1 always will be your blog content headline, make use of H2 and H3 stylings as well. I don’t recommend using H5,H6 – it will just create confusion.

• H2: use it to describe the main article topics, usually you’ll have 3-5 major points in an average article
• H3: goes to explain some lesser points, Notice how I formatted this article? There was a paragraph section (H2) and since I was explaining a lot of different sub-topics (H3) there, I dropped it down for much easier reading!

Just go with H2 and H3 and you’ll do great! If you need to separate your content even more I would suggest using bullet points or numbered lists, but more about them later.

Here are some fonts for you to pick from which will help your headlines get noticed – 40 Awesome Free Fonts for Big Headlines

Bullet points, numbered lists

Use bullet points or numbered lists whenever you’re listing something. See how I did it with headings description? Readers will easily recognize that I have created a list and explained similar points and list points are easy to scan and read. No wonder list posts have been so popular, for most readers, the only way they read a post is by quickly scanning it, bookmarking it and then they go on to the next site.

Images

I work hard to find the right images, because I believe visual memory is the strongest one! If you read a post and want to go back again you may not remember site names or web addresses, but you will definitely remember a well designed, visually appealing site! How about using screenshots from a website or product you’re featuring?

However if your article isn’t about websites or online tools, it’s still a good idea to find the RIGHT images which visually convey your opinion or stand. Many bloggers don’t take this point serious though they should! Visual presentation is so powerful! I bet most of you reading this article right now always start with wire-framing or sketching your design to get an idea of how it will look! We make notes on paper because it’s a way for our thoughts to become real, isn’t it smart to get visual in blog posts too? If you’re writing about fear – show a desperate man in a picture, if you talk about power – show skyscrapers, freedom – sky, clouds! Help your readers get their imagination working!

Quotes

Do you remember writing essays and quoting very well known authors to lend a certain auhtority to your work? Great, relevant quotes will make you look more professional – good, relevant quotes show you know what you’re talking about and who the pioneers or leaders in your industry are. This is a great way to add some smart content to your article. You can use quotes to support your opinion, and then explain how they relate to the article topic.

To be honest I don’t do this often yet, just because I forget the sources to those great quotes and end up writing them in my own words, but when I am reading books, a great quote can be a powerful thing.!

Some people just can say something in a few words which we cannot!

Quote the most attention grabbing content in article! I’ve seen this a lot in newspapers, it’s a great way to get scanners to read your article just because they want to find where that quote has been used in context!

Using bold, italic

Bolding is used to emphasize just a few words or a sentence in the article. The previous sentence is an example of how I emphasized just those words which are crucial to explain how to use bold.

Italic is used differently, I usually use it for tips, comments I might have which seem little bit out of context. Basically italic is similar to bold, but draws less attention.

Interlinking

Oh, this is not directly related with blog post formatting, but I wanted to include it, because it will help you in the writing process! Once you feel you’re writing an article which has some points that you’ve already coveredt, link to that article! If you have any related resources to the post, let people know about them!

And yes, if you’ve found some great thought provoking article which could help your readers understand some points better – link to it! Yes, you’re linking outside, but because of valuable content people come back to you! With Twitter you don’t just link to your own articles all the time, you retweet (RT), it’s a great way to share some exceptional articles or tools you’ve discovered! You provide value – do it with your own articles too and your readers will appreciate you by doing so!

Typography Tools And CSS Frameworks With Typography In Mind

Here I found several tools to help you get started to improve your typography in web designs.

Awesome FontStacks

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code! This website will help you to remove the pain from guessing what kind of fonts you should use together! It will do the hardest part for you, you just have to choose which font stacks you want to use – sans-serif, serif, monospaced fonts. Fontstacks will automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste.

Type-A-File

A really awesome way to get your site up to typographic snuff. It uses traditional semantic HTML tags along with some additional semantic classes named after commonly occurring elements in print design to create a solid typographic toolkit for your website, whoever you are.

Pick from several different stylings and sizes..and then download your css file immediately!

FontSquirel : FontFace

Download hundreds of prepackaged @font-face kits which include multiple font formats, CSS and HTML code. This site is similar to FontStacks but it offers a much better variety of fonts.

Better Web Readability Project – CSS Library

The main purpose of this project is to contribute to better reading experience on the screen by using CSS typography library. View typography demo

The Golden Grid

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites. While this framework’s main intention is for grids, it has Typographic style too. View Typography demo

PX To Em

With a very simple function – convert, get CSS, learn, it’s all what this site does, but does its job well! Use Em’s because in that way when you zoom your browser, all other font elements will scale accordingly.

BluePrintCSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. View typography demo

BaseLine

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser's default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using "real" baseline grid as its foundation.View Typography demo

Atatonic CSS Framework

The Atatonic CSS Framework is a basic set-up of typography and grid tools. Atatonic is meant to make your web—life easier and is created to provide a stable grid and solid typography. View demo

InuitCSS

This framework does a lot of things, but we are looking at typography. inuit.css has some little typographical niceties built into it from the start. It also has a typographical scale and a (loose) baseline to get you well on your way.

Emastic

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. View typography demo & handy blog template.

BlueTrip CSS Framework

BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing. Download the package, include the images and stylesheets in your site structure, and get going!View demo