Helvetica is easily my favorite font, but it has one downside: it looks like crap on Windows. The way Windows handles the rendering of Helvetica makes a great font almost unreadable at small sizes.
The problem is halfway solved by using the following CSS font stack:
font-family: Helvetica, Arial, sans-serif;
The problem is a fairly large percentage of PC users (including those who have installed any Adobe Creative Suite product) will still see Helvetica rendered horribly. I’m all for serving up a design that uses advanced CSS3 and leaving IE in the dust, but the main font being unreadable on the world’s largest operating system is unacceptable.
My Solution
I experimented with JavaScript that targets Windows computers and applies a certain class to the body of the page so I can target certain CSS styles and font stacks to a PC. I ended up with a mess of duplicated CSS code, and I don’t like to repeat myself. The best solution I came up with was the simplest one.
Use this font stack:
font-family: "Helvetica Neue", Arial, sans-serif;
Here’s what font will be displayed on each operating system:
Font percentages thanks to Codestyle.org
Macs will display an improved version of Helvetica and the small percentage that doesn’t have that will see Arial, which looks almost the same when rendered on an Apple.
A small percentage of Windows users will see Helvetica Neue and the rest will see Arial, which is good enough in my book. I like Helvetica better, but Arial isn’t the end of the world.
By narrowing down the font stack to target a specific variant of Helvetica font mostly on Macs, I am able to use Helvetica in my designs without worrying about how the font renders (or doesn’t render) on a PC.