CSS tip: beware Helvetica
It’s a fairly common practice to specify a site’s primary font as { font-family: Helvetica, Arial, sans-serif; } That way, people with Helvetica installed (primarily Mac users) get the real thing you intend instead of Microsoft’s half-baked rip-off. Other people get Arial, and are none the wiser.
However, I got burned recently by some unintended side effects. Basically, Helvetica on the Mac has a much smaller line-height than Arial (which is identical cross-platform). On 11px sized text, the difference is 2px, more for larger text. This has ugly consequences wherever pixel amounts matter, which is most places except body text, for example navigation menus or when you’re trying to vertically align an icon with a text label.
Even worse, it’s impossible to work around without JavaScript-based platform detection. Since I draw the line at that, I have dumped Helvetica in most cases except headline sizes. To this typographical purist at least, the differences are invisible under ~18px.
Comments
As there is no way of knowing what size font the user is using and also what font they have specified, it would be good to make sure a site works regardless of font size and line height. This does take a little effort but is well worth it if possible.
Posted by: Tim Parkin | September 4, 2007 04:40 PM
Tim: certainly. My first priority is making sure a site *works* in all circumstances -- by which I mean all information and functionality remains accessible. (Even if many clients don't care about this.)
At the same time, I have to do my best to make the site resemble the agreed design exactly in the most common circumstances. (*All* clients care about this.)
Posted by: Francois Jordaan | September 4, 2007 05:01 PM