5 Easy Tips for Web Typography
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:
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.
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
5 Steps to a Not-Ugly Web Site
Apple, Unwrapped: What We Can Learn from the New Apple Home Page
Ian Lurie is CEO and founder of Portent Inc. He's recorded training for Lynda.com, writes regularly for the Portent Blog and has been published on AllThingsD, Forbes.com and TechCrunch. Ian speaks at conferences around the world, including SearchLove, MozCon, SIC and ad:Tech. Follow him on Twitter at portentint.He also just published a book about strategy for services businesses: One Trick Ponies Get Shot, available on Kindle. Read More
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques
- Server response survey results: Now, with more pepper spray!
- 10 tips for minimal-mayhem agency site redesign
- New SEO tool: Server response code tester
- Why all web developers should learn SEO
- I’m not crazy: 10 great, content-friendly web designs