Front end web developers: we need to have a little chat, you and I.
Yes, I know Helvetica looks like crap on Windows. Yes, I know Arial looks “close enough”1. But your designer picked Helvetica for a reason.
Using the stack of font-family: Arial, Helvetica, sans-serif; offers preference to Arial, because the first font family takes precedence. See, only a tiny percentage of Windows users actually have Helvetica, but Arial is preinstalled on every Mac user’s system. Therefore, almost nobody will ever see Helvetica, unless they’re a Mac user and they’ve disabled Arial in Font Book.
We can debate the finer points of typeface selection another day, but the fact of the matter is that Helvetica has far better proportions than Arial. It simply looks better, while having nearly identical metrics. Therefore, you’re assuming that I’m going to ask you to please bend to your designer’s wishes and use the font stack font-family: Helvetica, Arial, sans-serif;. Nope.
See, Helvetica was designed for print, and had to be ported over for screen. It’s not bad. But a couple of decades ago, an improved version of Helvetica designed specifically for digital displays was created. It’s the beautiful Neue Helvetica, which OS X refers to as “Helvetica Neue” because then it sits near the older version in the font menu. It looks nearly identical, but just a hair better on digital displays. Every stroke is a little bit tighter, and every hint is better-tailored. And, handily, it ships with OS X.
I implore you to please use the following stack when dealing with these typefaces:
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
The vast majority of your Windows visitors will default to Arial, and Mac users will see Neue Helvetica, except those on older systems who will see Helvetica. Everyone will be happier. The web will be better designed. And I won’t have to write posts like this at 10:00 on a Monday night.
-
No, it doesn’t. ↥︎