18

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?

Teddi
  • 253
  • 1
  • 3
  • 6

6 Answers6

21

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.

Samir Talwar
  • 14,220
  • 3
  • 41
  • 65
14

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.

Ry-
  • 218,210
  • 55
  • 464
  • 476
Thomas Edwards
  • 141
  • 1
  • 2
  • 1
    +1 Helvetica on Windows XP does indeed look horrible! This is when font smoothing is set to "Standard" (the default setting). Thanks for the "Helvetica Neue" tip. – MrWhite Aug 24 '12 at 15:12
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.

Tom
  • 22,301
  • 5
  • 63
  • 96
2

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?

Joachim Sauer
  • 302,674
  • 57
  • 556
  • 614
  • 1
    I prefer Helvetica if available, if not Helvetica, than Arial, last resort if neither Helvetica or Arial is available, display using whatever is the default sans-serif typeface. – Teddi Oct 27 '09 at 14:48
  • 2
    @Teddi: in that case, what does the default font matter? If you want Helvetica if available, even if it's not the default then your original CSS is the correct one. – Joachim Sauer Oct 27 '09 at 14:57
1

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.

Foo Bar
  • 328
  • 3
  • 20
0

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;
mensch
  • 4,411
  • 3
  • 28
  • 49
  • This doesn't make sense. Geneva is a different typeface. Arial is designed to be a cheap Helvetica so for consistency you'd want them to be the same. Your more specific options are "Geneva, Verdana, sans-serif" or "Helvetica, Arial, sans-serif" -- pick the font family you like better. – Eric_B Dec 14 '17 at 13:55