Web typography is an art that I’ve never totally grasped – I have to be honest. But I have learned some basic rules worth remembering:

1: Line Spacing

Always use at least 1 full line between lines of text, like this:

On my blog, I use 1.5em.
Reading online text is a pain – wider line spacing makes it less so.

2: Headings Should Be Closer to the Following Paragraph

Headings indicate what the next paragraph(s) will say. So put the heading closer to the paragraph below than above:


I tend to create twice as much space above the heading as below it. Sometimes I do even more.
This makes it easier for the reader to follow along.

3: Use Larger Type

My creative director/COO and I fight constantly over this. He likes tiny fonts. I like big ones.
It’s creative versus marketing: Smaller fonts look cool and allow for neater grid layouts, because they’re easier to manipulate.
But bigger fonts are easier to read on a monitor, mean fewer words on a line (also good) and are easier to cut-and-paste if you’re not that great with a mouse.
I go with larger fonts whenever Tracy isn’t looking.

4: Pick Your Typeface Carefully

There was a time when Comic Sans spread across the internet like a plague.
It’s a hideous font. It’s hard to read onscreen, poorly rendered and unevenly supported across different operating systems. In my professional opinion, it sucks.
It’s fun to pick unusual fonts and put ’em on your site. But remember, Arial, Helvetica, Times family, San Serif, Verdana and a few others are the only fonts you can count on for consistent support across Internet Explorer 6 and 7, Firefox, Safari, Opera and the many different flavors of Windows and other operating systems out there.
You can find a list of universally supported fonts on Dustin Brewer’s site, here.
Stick with the ones that work, for now. Experiment a little if you want, but for paragraph text, go with the mainstays: Arial, Verdana, Helvetica or other san-serif fonts. They were designed for online readability. Yes, they’re used a lot. But there’s a reason.

5: Use Flush Left Paragraph Text

Justified text is pretty – it creates nice, neat blocks. But it also creates ridiculous word spacing and makes online text far harder to read.
Use flush left (left justified) text for paragraphs.

Other Resources

This article barely touches the tip of the iceberg. Web typography is a deep topic. It’s fun. And good typography can make any web site beautiful. Lousy typography can make even the best design look sloppy.
Have a look at these sites for great typographical advice:
Web Typography is a great primer.
Smashing Magazine has a monthly free fonts list.
A List Apart is a gorgeous site that’s a great example of good typography, and has some great articles on the subject to boot.
The PC Is Not a Typewriter is another great primer. I read it way back in 1995, and reread it every year:
PC is Not A Typewriter
Related Posts
5 Steps to a Not-Ugly Web Site
Apple, Unwrapped: What We Can Learn from the New Apple Home Page