5 Easy Tips for Web Typography

linespacing Design & Development

Ian Lurie Feb 20 2008

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:
line spacing
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:

heading spacing
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

tags : conversation marketing

related articles

5 Comments

  1. 5 Easy Tips for Web Typography

    [Source: Conversation Marketing: Internet Marketing with a Twist of Lemon] quoted: 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:

  2. At the risk of exposing my secret weapon: When I do my own designs at home for fun, I’m a huge fan of using Century Gothic.
    For starters, it looks great in larger sizes and for bolder headings. And secondly – it’ll set your site apart from the rest of the “web 2.0″ crowd, who seem to think good typography can only be achieved through Helvetica and Georgia.

  3. Chris Furniss

    @michael
    Century Gothic is a nice font to use for image-based headlines, but as it is a non-standard web font it is inadvisable to use it as defined in your stylesheet.

  4. @Chris
    Century Gothic is too a web-safe font! Standard to every OS, also.
    The web-safe font link Ian provided above will vindicate me. =P

  5. Chris Furniss

    @mike
    I sit corrected! Use away.

Comments are closed.