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

19
votes

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?

6
htmlcss

6 Answers

22
votes

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.

15
votes

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.

3
votes

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.

2
votes

What do you want to happen on platforms that have

  • Helvetica or Arial installed and
  • a default sans-serif font that is neither of those?

Or asked differently: do you always prefer Helvetica or Arial over the default, if they are installed? If you prefer the default sans-serif font in all cases, why mention those two at all?

1
votes

Helvetica is sometimes the default sans on Mac, but to be honest it's not a great screen font.

Geneva, Lucida Sans, and Trebuchet MS are good alternatives.

0
votes

You can be pretty certain that Helvetica is installed on machines running Mac OS X, because that font is used in a number of official applications designed by Apple. Arial is also available on any machine, provided that the user hasn't deleted the font file.

But as Tom points out, it's better to be as specific as possible when defining font styles. When I want a sans-serif family displayed I usually have the following in my stylesheets:

Helvetica, Geneva, Arial, sans-serif;