Wolf’s Little Store

Here’s a CSS rule I saw recently:

h2 { font-family: Arial, Helvetica, sans-serif; }

Please don’t write this. In order for a user to have Helvetica but not Arial, he or she would have to remove Arial from his or her system on purpose. This is improbable to say the least. Take care when selecting your font stacks. This is a better one:

h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

We are using Helvetica for a heading here - sometimes I see people using Helvetica for body text, which isn’t exactly a good idea. The small details in Helvetica that are mostly absent in Arial make Helvetica harder to read on-screen.

Also note that Helvetica Neue looks a lot different from Helvetica if your browser correctly renders the different font weights (like Firefox 3 does, sort of). So the rule above would only be perfect for bold headings. Compare Helvetica Neue on FF3 and Safari 3 (normal font weight):

Browser	Rendering (screenshot)
Safari 3
Firefox 3

That’s it for today. If there’s one thing you take away from reading this: select your font stacks carefully. Tomorrow I’m taking a look at some Webkit and Mozilla specific CSS properties.

• Category: webdesign
• Back to the overview