Blog Post Formatting: Make Reading For Visitors Better Experience

Posted in Blogging, Inspiration, Typography, Web Design • Posted on 12 Comments

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.

MIN · Examine the foundations of any site design..jpg

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.

Awesome Fontstacks-1.jpg

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!

Type-a-file.jpg

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.

Font Squirrel | Download Hundreds of Free @font-face Fonts.jpg

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

Typography.jpg

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

The Golden Grid (typography).jpg

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.

PXtoEM.com_ PX to EM conversion made simple..jpg

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

Blueprint HTML Elements Tests.jpg

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

Baseline - Typography.jpg

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

Atatonic CSS framework — Demo.jpg

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.

inuit.css—cooler than a polar bear’s toenails….jpg

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 demohandy blog template.

Emastic - CSS Grid Framework (typography).jpg

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

BlueTrip CSS Typography - A Fusion of Blueprint and Tripoli.jpg

193 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

12 Comments Best Comments First
  • Abhimanyu

    Saturday, April 30th, 2011 12:55

    1

    Nice tips there. I strongly believe that the visual appeal of a website does count a lot when it comes to loyal visitors.
    I didn’t really thought about the “Golden Grid’. But I think I am gonna give it a read too. Well, thanks for that. :D

    0
  • Shaun

    Saturday, May 7th, 2011 08:45

    5

    The section about images is really helpful, I will start to use this on my site :)

    0
  • Jacques

    Wednesday, May 4th, 2011 10:24

    4

    Christ there are a lot of things wrong with this article.

    Don’t use serifs for body content? Seriously?
    Don’t use h5 and h6 because the author doesn’t know how to use them?

    The fact that you don’t know what a pull quote is is also quite amusing.

    This article is so very wrong on so many levels, next time, try to actually know what you’re writing about before wasting people’s time.

    0
    • Dainis Graveris

      Wednesday, July 27th, 2011 14:25

      9

      Sorry to hear that, only thing I am often amused with, how wrong your own blog looks like. How you don’t use carefully whitespace to separate heading and actual text, font you picked for paragraphs and show me where you use h5, h6 daily in your blog posts.

      Well, with design there is often no right/wrong – because it’s art. All I said previously is based on my experience with this blog. I don’t say my opinion is only one which is right – that’s just what has worked for me and I believe blog is pretty successful.

      Thanks for your feedback – I would love to hear your objections to your questions with good answers why you disagreee :) Could turn out as great and valuable conversation in the end, don’t you think?

      0
      • Jacques

        Tuesday, August 2nd, 2011 15:33

        10

        I’m not entirely sure about your digs towards my own personal website, but I’ll let those slide, because, as you mention, with design there is often no right or wrong answer.

        You mention that using a sans serif font for body text is a better idea than serif, actually, you flat-out say that sans is better than serif.
        You don’t have to search far and wide to see why that’s a bad thing to be saying. Plenty of people chime in with a very different opinion, and you simply can’t ignore the combined experience of the numerous print designers who all swear by a serif font for body copy. You can also just see how some sites look absolutely beautiful, simply because they choose to steer away from Arial/Helvetica/Sans Serif.
        You could have, of course, mentioned a little more about sans fonts as well, talked about the differences between a grotesque and a humanist font, and how some of the elements of the latter are better suited to body copy.
        As a last point, how many books have you read that had a sans serif font for the body copy?

        I won’t argue about h5 and h6, other than that they do have their place within a pages mark-up, and to claim otherwise seems rather foolish. Of course, you won’t use them all the time, but they’re an important part of a web designers toolkit, and shouldn’t be ignored.

        I apologise for the offhand pull quote comment which came across rather rudely, but it does surprise me that someone who writes about design on a daily basis doesn’t know the word for something quite so fundamental to design. I definitely recommend adding the correct word into your post, if only to help in search rankings. As an example, Wired often make particularly good use of pull quotes, both in their magazines and on their website.

        There really are a few areas to the article that I’d seriously consider re-writing or at least taking another look at.

        PS: you should add an email subscription option so that people like me can be made aware of new comments on a post :)

        0
  • Alex

    Monday, May 2nd, 2011 07:15

    3

    I agree typography is a huge part of web design. I use typekit for fonts. IT is great!

    0
  • Schon

    Saturday, April 30th, 2011 19:48

    2

    In my opinion lists with bulletpoints are very important, because they enhance the usability of a website. Mosttly I scan the list of a website and after that i read the rest of a website when it seems interesting.

    0
  • Brummie

    Sunday, May 15th, 2011 14:56

    6

    Thanks for these tips. The whole package is valuable, informative. I did not miss anything in this blog, I read the whole details it gives me idea what are do’s and don’ts. It shows the very important interlink.

    0
  • Margaret Paddock

    Tuesday, July 12th, 2011 07:02

    7

    I was looking for information on blogging and keywords and I found so much more useful information.
    Thanks for all the reference sites. That helps a lot.
    It is very late, but I plan to return to read some of the other articles as well.

    My website is a disaster. I wish I had seen all this before hand. I may just build another site.

    0
    • Dainis Graveris

      Wednesday, July 27th, 2011 14:21

      8

      Glad to hear your kind words.. :) Blogging is not easy to do, but very rewarding if you do it right :) Good luck to make your own website better!

      0
  • Devraj Ram

    Tuesday, August 9th, 2011 07:37

    12

    I agree typography is a huge part of web design. I use typekit for fonts. IT is great!

    0
  • Cody

    Saturday, August 6th, 2011 06:39

    11

    hi again, thank you so much, like, really thank you. your site is truly, truly informative. Yes, some stuff is over my ahead at the moment, but i can see i already understand better about some factors that play big in reader friendly usage. Now, the rest i will get to later.

    I do appreciate you explaining about the set up and the layouts and now i must try to make new blogs with proper use of articles. basically i need to go and learn and write some articles and try the image factor to improve my whole blogging experience. You have covered a lot, but at least for us newbies some of it makes sense already.

    so thank you and more prosperity to you. c.

    0
  • Devraj Ram

    Tuesday, August 9th, 2011 07:37

    12

    I agree typography is a huge part of web design. I use typekit for fonts. IT is great!

    0
  • Cody

    Saturday, August 6th, 2011 06:39

    11

    hi again, thank you so much, like, really thank you. your site is truly, truly informative. Yes, some stuff is over my ahead at the moment, but i can see i already understand better about some factors that play big in reader friendly usage. Now, the rest i will get to later.

    I do appreciate you explaining about the set up and the layouts and now i must try to make new blogs with proper use of articles. basically i need to go and learn and write some articles and try the image factor to improve my whole blogging experience. You have covered a lot, but at least for us newbies some of it makes sense already.

    so thank you and more prosperity to you. c.

    0
  • Margaret Paddock

    Tuesday, July 12th, 2011 07:02

    7

    I was looking for information on blogging and keywords and I found so much more useful information.
    Thanks for all the reference sites. That helps a lot.
    It is very late, but I plan to return to read some of the other articles as well.

    My website is a disaster. I wish I had seen all this before hand. I may just build another site.

    0
    • Dainis Graveris

      Wednesday, July 27th, 2011 14:21

      8

      Glad to hear your kind words.. :) Blogging is not easy to do, but very rewarding if you do it right :) Good luck to make your own website better!

      0
  • Brummie

    Sunday, May 15th, 2011 14:56

    6

    Thanks for these tips. The whole package is valuable, informative. I did not miss anything in this blog, I read the whole details it gives me idea what are do’s and don’ts. It shows the very important interlink.

    0
  • Shaun

    Saturday, May 7th, 2011 08:45

    5

    The section about images is really helpful, I will start to use this on my site :)

    0
  • Jacques

    Wednesday, May 4th, 2011 10:24

    4

    Christ there are a lot of things wrong with this article.

    Don’t use serifs for body content? Seriously?
    Don’t use h5 and h6 because the author doesn’t know how to use them?

    The fact that you don’t know what a pull quote is is also quite amusing.

    This article is so very wrong on so many levels, next time, try to actually know what you’re writing about before wasting people’s time.

    0
    • Dainis Graveris

      Wednesday, July 27th, 2011 14:25

      9

      Sorry to hear that, only thing I am often amused with, how wrong your own blog looks like. How you don’t use carefully whitespace to separate heading and actual text, font you picked for paragraphs and show me where you use h5, h6 daily in your blog posts.

      Well, with design there is often no right/wrong – because it’s art. All I said previously is based on my experience with this blog. I don’t say my opinion is only one which is right – that’s just what has worked for me and I believe blog is pretty successful.

      Thanks for your feedback – I would love to hear your objections to your questions with good answers why you disagreee :) Could turn out as great and valuable conversation in the end, don’t you think?

      0
      • Jacques

        Tuesday, August 2nd, 2011 15:33

        10

        I’m not entirely sure about your digs towards my own personal website, but I’ll let those slide, because, as you mention, with design there is often no right or wrong answer.

        You mention that using a sans serif font for body text is a better idea than serif, actually, you flat-out say that sans is better than serif.
        You don’t have to search far and wide to see why that’s a bad thing to be saying. Plenty of people chime in with a very different opinion, and you simply can’t ignore the combined experience of the numerous print designers who all swear by a serif font for body copy. You can also just see how some sites look absolutely beautiful, simply because they choose to steer away from Arial/Helvetica/Sans Serif.
        You could have, of course, mentioned a little more about sans fonts as well, talked about the differences between a grotesque and a humanist font, and how some of the elements of the latter are better suited to body copy.
        As a last point, how many books have you read that had a sans serif font for the body copy?

        I won’t argue about h5 and h6, other than that they do have their place within a pages mark-up, and to claim otherwise seems rather foolish. Of course, you won’t use them all the time, but they’re an important part of a web designers toolkit, and shouldn’t be ignored.

        I apologise for the offhand pull quote comment which came across rather rudely, but it does surprise me that someone who writes about design on a daily basis doesn’t know the word for something quite so fundamental to design. I definitely recommend adding the correct word into your post, if only to help in search rankings. As an example, Wired often make particularly good use of pull quotes, both in their magazines and on their website.

        There really are a few areas to the article that I’d seriously consider re-writing or at least taking another look at.

        PS: you should add an email subscription option so that people like me can be made aware of new comments on a post :)

        0
  • Alex

    Monday, May 2nd, 2011 07:15

    3

    I agree typography is a huge part of web design. I use typekit for fonts. IT is great!

    0
  • Schon

    Saturday, April 30th, 2011 19:48

    2

    In my opinion lists with bulletpoints are very important, because they enhance the usability of a website. Mosttly I scan the list of a website and after that i read the rest of a website when it seems interesting.

    0
  • Abhimanyu

    Saturday, April 30th, 2011 12:55

    1

    Nice tips there. I strongly believe that the visual appeal of a website does count a lot when it comes to loyal visitors.
    I didn’t really thought about the “Golden Grid’. But I think I am gonna give it a read too. Well, thanks for that. :D

    0

Comments are closed.

54.161.202.234 - unknown - unknown - US