CSS Tip: Expand your font horizons

It is sometimes easy to get into the habit of always using the same font declaration in your style sheet for every website you do.

This one seems to be pretty common:

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

Even though the number of fonts that are common to both Mac and Windows systems is pretty small, there are a few variations worth trying. For example, Lucida Grande is a common Mac font and Lucida Sans Unicode is the closely similar Windows equivalent. Both fonts are very easy to read and provide a different alternative to the ubiquity of Arial or Verdana. The following declaration could be used:

body { font-family: "Lucida Grande", "Lucida Sans Unicode", 
Verdana, sans-serif; }

Headings

Alternatively, try using a serif font like Georgia for headings. It is common to Mac and Windows and gives a nice contrast to the sans-serif fonts you may be using for your main text. Another font that can look prett y good for headings, in my opinion, is Trebuchet. It's only available on Windows though so you're Mac viewers will see something else. You could try this:

h1, h2, h3, h4 { font-family: "Trebuchet MS", Arial, 
Helvetica, sans-serif; }

Try something different

For font declarations, the most common practice is to use browser-safe fonts that are available on Mac and Windows and for a corporate website it may be best to stick with this policy. However, for your personal websites, there's nothing to stop you using fonts that are not so 'safe'. Just don't use Comic Sans….please….!

Future developments: Web fonts may be the next big thing and could provide a much wider choice of fonts for common usage. Yay!

Technorati : css, fonts