Webreakstuff's blog on design, development and strategy. Click here to subscribe.

5 steps to a better blog - Part 1

Fred Oliveira on June 22, 2005

Show and tell There’s a whole lot of blogs out there that provide valuable content to readers but don’t get enough attention. Is yours one of them? Sometimes, a few changes in the user experience is all it takes to get people to actually read what you have to say. These usability tips specifically for bloggers will help you make your current readers happier and most likely get you a few more in the process.

Why care? Isn’t usability boring?

Blogging is about getting your word out. You may be talking about cats, you may be talking thai about food, you may even be talking about quantum theory. What you really need more than anything if you’re a blogger is to get people reading what you have to say - because you believe they’ll benefit from it in some way.

Daily, I visit a lot of blogs with great content, but many times I end up never visiting them again. Why? Because most bloggers don’t seem to care about how enjoyable the experience of reading their material is. And that’s a huge turn-down for any reader.

If you look at a webpage and readability is low, or content is poorly organized, you won’t even try to read it - you’ll leave. Like you, everybody else does. So what I’ll be talking here is about getting the most out of your weblog, and getting people to stay and read what you have to tell them.

Anyway, thats enough intro talk, lets get our hands dirty with

Part 1 - Use typography correctly

Text is the most important thing on your blog and because of that, this first part of the series focuses on typography and text blocks. Remember that it is text people are reading, so if the text isn’t properly arranged, you’ll have nothing.

Font-size and line height:

Have a look at this screenshot from an existing weblog (I don’t mean to give out bad publicity, so I wont link to it):

Screenshot

You’ll most likely be able to tell me whats wrong here with just a look. The font size is lousy, as well as line spacing. You focus on the image as a block of “black letters” instead of individual lines. Readability is extremely poor, which will end up making users give up on reading the content. Here’s the same text after changing line-height and font-size:

Screenshot

Notice the difference? Content is much easier to read now because the eyes can clearly distinguish each line and word due to the increased amount of white space (resulting in better contrast). Also, the bigger font size decreases the strain on the readers eyes, which is extremely important.

Stop the caps madness:

Screenshot Have a look at the text on the left. This is actually a category list on the same blog mentioned above. What seems to be wrong here?

Well, there’s two things wrong, actually: It uses all-caps, and there’s no real organizational structure. The latter will be covered in a future blog post on this series, but the first, we’ll talk about now.

The problem with using all-caps is that your eyes will make triple the effort reading the text than they would normally. This obviously means people won’t read the text at all - rendering the the category list (in this case) useless.

Use the right fonts:

While some fonts exist specifically to be easily read on screen, others are notoriously better for print and/or headlines. Distinction of font types is extremely important, because it is the typeface that’s recognized and assimilated by your brain.

Ideally you should be using sans-serif fonts for texts and serif fonts for headlines, but sometimes it ends up being a matter of taste from the designer if other aspects are considered (again, the font size and line spacing). The bottom line is: aim for the best combination of looks and readability.

Part 1 wrap-up:

So, if you’ve read this far you will have realized three things:

  • A correct balance between font-size and line-height is extremely important in order to make the text stand-out from the background, and lines from each other.
  • Use all-caps selectively. Remember it decreases readability of your text, so don’t even think about using it for lists or paragraphs. Avoid the confusion that all-caps calls the attention to something. It does, but in a bad way.
  • Use the correct typefaces. A good sans-serif font like Verdana makes it easy to read content, while Georgia and other serif fonts are extremely good for headlines. Be wise on your selections.

If you’re interested in getting more information about typography, here are some books you may like:

Hope this one was interesting. Part 2 will be up soon. Now start improving your blog, and feel free to drop your comments on this article. Take care!


Comments on this post

Michael Arrington

I am a regular reader of your blog. Imagine my surprise when I noticed that both screen shots were from my very own blog! :-) I take your comments in the manner given and thank you for the feedback.

J. Michael Arrington

[...] ot” to do stuff, were from here. Funny, and I appreciate the feedback. Check it out: Link Fred, I am going to do my best to follow your advice and fix this stu [...]

fred

Michael, I was about to email you about this. I didn’t know you were a regular around here ;-)

I took your weblog as an example because the even though content is really good (oh and i love techcrunch!), the way it is presented makes me (and probably others) stay away from reading it much.

I also realize that it’s not your fault (the theme you’re using for wordpress is the culprit), but these little changes (and the ones to follow) will make it a whole lot better. Or so I hope.

Michael Arrington

Fred, I tried to email you at the address on your website but it bounced. When you have a moment please email me at editor@techcrunch with a good email for you. Thanks

fred

Something has gone wrong with that specific mailbox settings. It should be fixed in about one hour. However, i’ve emailed you my private email address that you can use to get in touch.

Thanks for the warning about the bounce!

Weblogs Work » Five steps to a better blog

[...]
“We Break Stuff” offers a series on how to make a better blog. Check out Part I and Part II. [via We Break Stuff]
Entry Filed under: Corpora [...]

bob

Dont know what browser you are using but in Mozilla the font size on this site is tiny and just as terrible as the example you provided

fred

Bob, actually, I never test on one browser or one machine alone, and every setup rendered the fonts just fine. There’s no single place in this website where the font is smaller than 10px, and the default is 11px. Re-check your browser settings.

If you don’t want to take my word for it, check browsershots.org and search for webreakstuff.com. You’ll see screenshots of this website in all current browsers and OSs. None of them displays fonts incorrectly.

Jeff Wheeler

I just stumbled upon this website (subscribed now, amazing content), and couldn’t agree with you more.

Everything you say about typography is correct, and you’ve shown your ability with the beautiful typography on this website. You make me jealous.

fred

Thanks a bunch for the opinion, Jeff. I do my best.

PS: I just noticed you’re the author of Fresh Bananas for wordpress. Hot stuff, if I may say so. Congratulations.

Jeff Croft

Hello. I also like this blog a lot — very well done. So, bear that in mind as I say that this statement:

“Ideally you should be using sans-serif fonts for texts and serif fonts for headlines…”

Seems a bit backwards to me. Almost all traditional typography knowledge suggests exactly the opposite — serfis for body text and sans for headlines.

As you say, though, it definitely comes down to personal preference and both serifs and sans can be used well for both body and headlines if done properly.

Certainly not trying to say you’re wrong — just found it interesting that you were promoting the opposite of traditional thinking.

Chris Peters

Yes, I am becoming a regular here as well. I do agree that you have great typography skills, and I am glad to see that your site demonstrates those skills that you preach in this article. I’m jealous as well! But in all fairness, I built my Web site to get a new job (and it did well for that purpose) and it is mainly the result of throwing something together as fast as I could. I’m hoping I can use some of the advice you just presented here to improve my blog. Gonna read part 2 now…

fred

True, Jeff. What you’re talking about though (what is covered as traditional typography) is print. Serif fonts are easier to read on print because of the serif itself - it helps the eye distinct each character. On a screen, though, I find it much easier the other way around, particularly when there’s all sorts of anti-aliasing options that blur shapes a little bit.

If you think about it, given that, you’ll realize that body text on screen medium is much easier to comprehend if on a sans-serif font because there’s less distracting nuances on each glyph. This is my opinion, at least, and shared by quite a lot of the people I’ve talked about before and since I wrote this article.

However, I do cope with the print theory that serif fonts increase character distinction - it does. Its a matter of taste, ultimately.

Jeff Croft

Fred-

The “sans looks better on screen” argument certainly was true at the time it got popular (six or seven years ago, probably), but I’m starting to wonder if it still holds water. With the constantly-increasing resolution of displays these days, the clarity of LCDs, and the much-improved anti-aliasing built into Mac OS X and Windows XP, I think we’re getting to a point where type is rendered nearly as well on screen as it is on paper — in which case it’d stand to reason that serfis would once again be more readable than sans.

Of course, I’m saying all this, and still using sans-serif text on my blog, so who knows. :)

davids brain blog » 5 steps to a better blog

[...] Part 1 Part 2 Part 3 [...]

NORMALNORMAL » » Pareizums

[...] 5 steps to a better blog - Part 1 [...]

Sorry, the comment form is closed at this time.