The Ten Commandments of Blog Typography

Filed as Features on October 23, 2007 4:59 am

Typography can make or break a blog. You presumably are writing your blog so people will read it, so it is important to pay close attention to the typography so that your content is as legible and comfortable to follow as possible. Blog readers expect to be able to scan articles easily, and if you make it too difficult for them to read your content, they will become frustrated, and may move on to read a site that is easier to digest.

Here are some basic guidelines to remember as you consider your site’s typography:


1. Thou shalt not have long lines of content that make the reader work too hard to read. Lines should have a maximum of 15-20 words. Any more and the reader cannot scan it quickly. Fluid width sites often guilty of this, as the body content inevitably gets stretched out to ridiculous lengths depending on the screen resolution readers are using.

2. Thou shalt not squish the letters together using negative letter spacing. Spare use of this in large headings is passable, but in most cases, it makes the words difficult to read.

3. Thou also shalt not squish the lines together too closely. Give the lines room to breathe. This will help the readers’ eyes track the text better. Set the line height using a percentage, rather than pixels, as readers may have their font sizes increased in the browser settings. A line height of 140% is a good rule of thumb for body copy.

4. Thou shalt rarely style your fonts using the bold font weight. It rarely looks nice on the screen. Instead, increase the size of the font.

5. Thou shalt never use more than 3 fonts in a blog design, and should probably stick to just two. Try styling the fonts you’re using differently rather than using multiple fonts. For example, use Georgia in various ways, such as the font-variant: small-caps for headings and italics for the post meta data (category, date, author, etc.).

6. Thou shalt use colors that provide plenty of contrast on the screen and consider very carefully before putting light text on a dark background. The latter can be done effectively, but in general it is easier to read dark text on a light background.

7. Thou shalt only use fonts that are widely available across both Windows and Mac OS. This one is a no-brainer it would seem, but you’d be surprised how often it is broken.

8. Thou shalt allow plenty of space between items on the page. There should be at least a 50 pixel gap between the end of one post and the start of another, or a divider of some sort, so it is very clear where the next post begins.

9. Thou shalt not make the text teeny-weeny so that readers must strain to read it. This also seems like a no-brainer, but people persist in making their readers strain to read their tiny text.

10. Thou shalt never, never use Comic Sans font unless thou wouldst like to be labeled an idiot.

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.


Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By Abhijit Nadgouda posted on October 23, 2007 at 6:51 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good list, though

    7. Thou shalt only use fonts that are widely available across both Windows and Mac OS.

    Let us not ignore other environments. Windows itself now has two different sets of web core fonts.

    9. Thou shalt not make the text teeny-weeny so that readers must strain to read it.

    There is no way to ensure this unless you start using font size set in the reader’s browser.

    Reply

  2. By Anne Helmond posted on October 23, 2007 at 7:48 am
    Want an avatar? Get a gravatar! • You can link to this comment

    A great list. I definitely agree with a maximum of three different fonts, preferably only two. I also prefer using a serif (or non-serif) for post titles and a (or non-serif) for post content to distinguish the two even better.

    My favorite online typography tool is Typetester which lets you compare (cross-platform) fonts in all different sizes and linings on the spot!

    Reply

  3. Teriiehina.net » Blog Archive » Air Esse EsseOctober 23, 2007 at 8:06 am
  4. By Jo posted on October 23, 2007 at 10:12 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Love it!!! A lot of them are pet peeves of mine and I have even stopped reading some blogs because of things on the list.

    Reply

  5. By Jessi posted on October 23, 2007 at 6:34 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great list! I think every new blogger probably makes at least one of these mistakes in the beginning, but it’s a nice set of guidelines for everyone to refer back to.

    Reply

  6. Cool Links - 10-25-07October 26, 2007 at 3:50 am
  7. The Ten Commandments of Blog Typography | Blogger TrailNovember 7, 2007 at 12:06 pm
  8. BlogsWeLuv - Blog Reviews » Blog Archive » Blog Herald - A blog we luvNovember 24, 2007 at 9:05 am
  9. By DefogMyBlog posted on November 26, 2007 at 10:06 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Anne Helmond Great to learn about Typetester.

    Reply

  10. By DefogMyBlog posted on November 26, 2007 at 10:08 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good advice. I have a secret. I like Comic Sans. OK I know not to use it.

    Reply

  11. Blog Typography « People at Work & PlayNovember 28, 2007 at 3:24 am
  12. Typography » Blog Archive » Pentagram 2008 Typography Calendar Now AvailableDecember 26, 2007 at 11:36 am
  13. Typography » Blog Archive » what is typography? movieDecember 28, 2007 at 12:11 pm
  14. 5 Quick Ways to Improve Your BlogJuly 31, 2009 at 3:02 am
  15. By Fran Civile posted on July 31, 2009 at 7:54 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thank you … I can use some of the suggestions in this post but tell me why are these comments dated October and November 2007?

    Thank you Anne Helmond for the Typetester resource and I’m with you
    DefogMyBlog… I really like Comic Sans but I know not to use it – I did though
    when I had a Gift Basket website… I thought it looked more friendly!

    Fran :)

    Reply

  16. 100 Terrific Tips & Tools for Blogging Librarians | Online College Tips - Online CollegesAugust 13, 2009 at 11:25 am
  17. By Francis posted on October 5, 2009 at 10:04 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thank you for your information, now i know how to work with my blog and make it look more readable.

    Reply

  18. By Alison Shuman posted on July 13, 2010 at 1:39 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for this list. I’ve been actively updating the styling of the three websites (blogs) that I run and it does make a heck of a difference. We saw a dramatic improvement in the amount of time visitors stay on each site and how many pages they read after I changed the fonts, headers sizes and colors. *We* want to look at these sites now, simply because they are more beautiful – imagine a website on real estate appraisal actually attracting and keeping visitors!

    Reply

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.

    Current ye@r *