I’m just finishing a project, and as part of it, I’m up to my digital elbows in style sheets. And it occurred to me – what ARE safe fonts on the Internet?

For example, we’re taught that a font-family property should have a list of fonts, in case the first choice isn’t available on the visitor’s computer/browser:

font-family: georgia,"times new roman",serif;

So in this case, Georgia comes first, then Times; and if both are missing, the all-encompassing serif.

There’s two problems with this, however:

• What if no one has the serif font on their computer?
• Making a long list like this can be a performance hit on some browsers – is there a ’short list’ I can use instead?

To answer the first, serif is a keyword in style sheets, and every browser has a fallback font to fit this. The advantage is that this is ALWAYS present by definition; but if you leave it out, then you’re at the mercy of what browser.

Serif isn’t the only default font – there’s also sans-serif (NOT sansserif or sanserif as it commonly appears), cursive, monospace, and fantasy (you can see examples of each on the W3C.org’s website). Use these, and your designs will always work – approximately!

Now, for the issue of a shorter font list – here’s a web page that shows common fonts for Mac and Windows, and gives you the names to pick. It also offers screen shots from other computers, allowing you to see how the same pages look on other systems. And for a quick reference, this page has a handy graphic comparing fonts.

Looking these lists over, you see why most sites use the same fonts – you can’t guarantee people will get the same visuals across computers if you use an unusual font. By staying with the ‘web-safe’ core, you stay with the most predictable. After all, the goal is to maximize impact with your fonts, and you can’t do that if you’re not sure exactly what your visitor is seeing!

So, on the subject of fonts and impact, it’s perhaps ironic that there is one font that looks the same and is spelled the same across both Macs and Windows: Impact!