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.
Tags: arial, font stack, helvetica, windows
This makes tons of sense, and I am glad that I don’t have Helvetica or Helvetica Neue on the Windows computers I use at work and home.
Windows for the most part just renders all fonts horribly, unless it was specifically created for Windows and then they might get it right.
Awesome Kevin. I tweeted it and it had pretty good response.
Did you see this tweet?
http://twitter.com/jzy/status/10190934159
Unfortunately, on my machine, I have both Helvetica and Helvetica Neue installed, so that’s why I prefer Arial. If only PC rendered everything as beautiful as Macs.
How do you deal with the differences in line height that comes with Helvetica Neue on Macs? I’ve noticed that what you end up with is in some instances less consistent than just using Arial or Helvetica across the board.
Anyone have feedback on that?
Hm. Helvetica Neue renders horrible on Windows too, and I think those who have Helvetica Neue are those most bothered by the horrible rendering.
My solution was to install GDI++ on my Windows systems. Unfortunately that only improves text rendering on my system, so it’s not really useful for webdesign, but at least it’s something. What GDI++ does is render text similar to how OSX renders text (just with more options, some of which IMHO look better than OSX).
As an alternative: Segoe UI/Frutiger? Both are very good looking and quite similar. Segoe UI is somewhat wide spread on Windows side (Vista, 7, Office 2007 have it), so that could be used with fall back to Arial. Segoe UI looks pretty good on Windows too.
Oh, keep in mind one potential problem: Helvetica Neue has much smaller number of glyphs, hardly anything international. Helvetica, however, supports many languages. If you are not going to write in any foreign languages, then Neue is ok. But don’t do this for, let’s say, theme designs: people will use it in many languages, and missing glyphs will look bad.