The Ten Commandments of Blog Typography
October 23, 2007 | By Randa Clay | Filed Under Blog Design, Features
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.
About the author: Randa is a blogger and designer specializing in WordPress and logo design. Besides contributing to The Blog Herald, she also manages WordPressThemes.com. Read more about design, marketing, blogging, branding and all things creative at RandaClay.com.
Comments
14 Responses to “The Ten Commandments of Blog Typography”
Leave a Reply
Sponsors
News
End of Minnebar coverage for 2008May 10, 2008 | By Matt Craven | Leave a Comment
That marks the end of the Minnebar coveage for 2008 - I’m off to the Metrodome to watch my beloved Boston Red Sox beat up on the Minnesota Twins.
Digg it
3 Reasons to Use Disqus
May 10, 2008 | By Matt Craven | Leave a Comment
The Disqus blog commenting service is catching on - with many popular blogs such as Scripting News signing on to use the service.
VC Fred Wilson talks about three reasons to use Disqus in a recent post:
2a) Email Replies - Disqus emails every comment to the blogger. If the blogger wants to reply to the comment, […]
Statbot takes a look at the all time TechMeme Leaderboard
May 10, 2008 | By Matt Craven | Leave a Comment
Statbot has taken a look at the all-time leaderboard for TechMeme.
Of course, no one should be surprised to find that TechCrunch is at the top of the list…. interesting data, however, nonetheless…
Digg it
Google Closes Hello (What’s That Anyway?)
May 9, 2008 | By Thord Daniel Hedengren | 2 Comments
I’m reading that Google is closing Hello, which apparently was (and is, as I’m writing this), a photo sharing service that came with Picasa. I guess they feel it doesn’t fill a purpose anymore.
This from Hello.com:
We originally embarked on a mission to make photo sharing easier and more fun with Hello. We plan to keep […]
Colleen Coplick Talks PR over at BloggerTalks
May 9, 2008 | By Thord Daniel Hedengren | 1 Comment
I recently interviewed Colleen Coplick about taking over Buzz Networker, and there I said that an interview with her focusing on PR was due on BloggerTalks. Well, it is up now, and Colleen shares her views on paid reviews, PR agencies sending out samples, getting famous in the social sphere, how to write a great […]
MyBlogLog Adds More Stuff
May 9, 2008 | By Thord Daniel Hedengren | Leave a Comment
MyBlogLog have added some new stuff, since the obviously get that we’re not monogamous when it comes to online apps and social networks.
Specifically, whenever you:
post a question to Yahoo Answers
share an item on Google Reader
post a video on Seesmic
MyBlogLog will post those events and make them part of your New with Me page.
All you […]
Patrons
Sponsored Links
Recent listings from Blogger Jobs
Five Blogging JobsThis quintet is courtesy of our sister site, Performancing.com: Tech Blogger — “You’ll have an eye for a interesting story and op [...]
Gawker Media Seeks Designer
Gawker Media is looking for “a highly creative, conceptual designer with experience and interest in advertising, branding, and web design to w [...]
Social Media Marketing Blogger Wanted
We got this email from Eric Thom: We are looking to hire a blogger that is fully immersed and experienced about the subject of Social Media Marketin [...]
Wanted: Media Blogger to Discuss Corporate Websites
We got this email from Corporate Eye: There are some very exciting things happening behind the scenes here at Corporate Eye. We’re soon going to [...]
Weekly Bloggers for Hire 36
Want your profile here? Read this earlier post for more info. Remember: please follow the instructions there. One-liners will be ignored and have be [...]
More at Blogger Jobs
Contributors
- Andrew G. Rosen
- Andy Merrett
- Anne Helmond
- Arvind Satyanarayan
- Chris Garrett
- Darnell Clayton
- David Krug
- David Peralty
- J. Angelo Racoma
- Jason Kaneshiro
- Jonathan Bailey
- Lorelle VanFossen
- Matt Craven
- Thord Hedengren
- Valeria Maltoni
Latest Reviews
Submitted News
- Comments or No Comments?
- BusinessWeek: Don’t Link to Us!
- Another Timeline Tool: Dipity TimeTube
- Practical Blogging Tips: Why Write Short Fiction?
- Dark Themes are Back
Our Blog Metrics
Good list, though
Let us not ignore other environments. Windows itself now has two different sets of web core fonts.
There is no way to ensure this unless you start using font size set in the reader’s browser.
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!
[…] Les 10 commandements de la typographie sur le web … combien j’en respecte ? 10 […]
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.
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.
[…] The Ten Commandments of Blog Typography […]
[…] (more…) […]
[…] The Ten Commandments of Blog Typography - Written by Randa Clay, this article discusses some of the “no-nos” of type in your blog design. How many are you guilty of? […]
@Anne Helmond Great to learn about Typetester.
Good advice. I have a secret. I like Comic Sans. OK I know not to use it.
[…] wondered: Are there any guidelines to make your blog more readable? Here is a list I liked - titled The Ten Commandments of Blog Typography by Randa […]
[…] The Ten Commandments of Blog TypographyTypography 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. … […]
[…] Comment on The Ten Commandments of Blog Typography by Comment on The […] Comment on The Ten Commandments of Blog Typography by Typography »… […] The Ten Commandments of Blog TypographyTypography can make or […]
[…] The Ten Commandments of Blog TypographyTypography 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. … […]