Typography On the Web

Hey folks,
This is The Design Tzar with the first installment of "Wake-up and Smell the White-space" a weekly design post.

First I should mention that this post is going to have a tinge of irony since it is about typography on the web and yet I am using bloggers' default type settings. Luckily someone over at blogger has a good eye so it looks pretty decent anyways. I should also mention that the goal of this post is to give quick, practical methods to enhance your type rather than a dissertation on the proper use and execution of the subject.

Why should you care about your type? Simply put, because people won't read it otherwise. There are loads of studies that show people retain more information and are able to read quicker and more relaxed if the type is "set" well.

So what are some good rules for type? This is a little bit of a longer conversation but in the spirit of having you finish this post I will take a stab at brevity.

First, give your type room to breathe.
Type on your web page should have generous margins, padding and most importantly a good line-height. A good rule of thumb is to make sure you have 140% line-height compared to your font size, and as far as margins and padding go, use your eye, but be generous.

example:
.bodyText { font-size: 12px; line-height: 17px; }

Second, watch your character count.
This is very important and yet very few web designers knowingly employ this rule. In general your character count should be in the range of 45-70. Getting outside of those numbers on either extreme is a baaaaad thing. Ever wonder why you get exhausted while trying to read or edit an essay or paper written in word with a small font. It's because those lines are way too long. And remember character count includes spaces and punctuation.

Third, maintain high-contrast in your text.
That is to say don't put light text on a light background because obviously it is really, really annoying.Type is meant to be read, so make sure it is readable...please. Also an important side note: black on white is preferable to white on black (of course we all break this one sometimes).

Okay now we are getting into the duh rules, and if these seem novel to you, well... (be nice Jarod) well then keep reading!

Fourth, keep your fonts to a minimum, and be consistent.
Part one. Don't have more than three fonts on a page and keep an eye out for contrasting styles (serif vs. sans-serif). The other half of this rule is try and be consistent with what fonts you are using and to what purpose on the site, an easy way to make sure you are doing this is by defining your font or font-family in the body style.

Lastly, colors, sizes, weights, italics, blah blah blah.
This rule is very simple. If you are feeling inclined to add any of the above to a line of type...ask yourself what purpose is it serving. Always try and balance simplicity with information-heirarchy. That is to say, if you are going to use italics for a subheading, than don't worry about making your sub-heading 34px. Likewise if your headings are going to be large, they probably don't need to be bright-blue as well.

And if ever you are inclined to break any of these rules, ask yourself what you are gaining from it. And then sign up at your local art institute and see if you can't channel all the creativity into some DADAesque montage that criticizes the role of greed in a modern capitalist society, with the use of christmas lights.

The Design Tzar