CSS: Is Helvetica the default 'sans-serif' font on Mac and Arial the default sans-serif font on Windows?

Question

I have a lot of CSS that does the following:

font-family: Helvetica, Arial, sans-serif;

It my understanding that Helvetica is the default sans-serif font on Mac and Arial is the default sans-serif font on Windows ... if that's the case, couldn't I just change the above code to be:

font-family: sans-serif;

Yes, no?

Answer 1

The default font really depends on the browser. For example, in Firefox on Mac, I have Lucida Grande as the default sans-serif font. I don't think I changed it, but I'm not entirely sure. You can't really depend on the defaults being specific fonts, as users can change them in the preferences. If you want a specific font, specify it.

Answer 2

Helvetica on Windows XP looks horrible due to its poor rendering. Luckily, only a few people have Helvetica installed on Windows XP (because if they care about Helvetica, they’ll probably be using a Mac).

This is safer:

"Helvetica Neue", Arial, sans-serif;

That way, pretty much only Mac OS X will pickup Helvetica Neue (standard on OS X) and Windows can ignore it and move straight into Arial.

Answer 3

With fonts, you want to be as specific as possible to prevent layout issues. Your page may look perfect on a machine with Arial as the default sans-serif font, but if someone has a very different font as their default, it can affect spacing of elements (if you use relative measures). Plus it makes any designer on the project angry when they see the wrong font, and you don't want that.