Renderance
7 Apr 2008, 11am
Safari: right face, bad kern
Here’s a seemingly insurmountable, earth-in-the-balance problem I could use some help with. Safari evidently has no trouble rendering a standard, Apple-installed font face like Helvetica Neue Light when it’s named in CSS by its PostScript handle ‘HelveticaNeue-Light’, but it ignores the font’s metrics and kerns letter pairs like David Carson on a bad day. I’d thought was a system-wide thing these days, but then I’ve been out of it for awhile.
Firefox: wrong face, decent kern
Firefox and other mozilla browsers, on the other hand, won’t render a standard, Apple-installed font like Helvetica Neue Light, cascading past it to the plain Roman, however the kerning seems to be respected.
I’ve tried using rules to refer to a TrueType file of the font, but then it just gets weirder: Safari loads it, but the metrics are even more wonky. Firefox (as of the 3.0b5 I’m using) won’t load the .ttf file at all.
As Fielding Goodney¹ ¹Martin Amis, Moneywould have it, ‘I hate it when I can’t figure things’. Any browser geeks out there who can shed some light on this, or suggest workarounds? (Other than doing pictures of words that is, not keen on that.) Dean at this domain. Thanks in advance.
UPDATE points out that Firefox 2, unlike Firefox 3 beta, will render any system font as long as you reference its screen name, e.g., “Helvetica Neue Light”, but FF2 still has Safari’s bad letterspacing problem. Here’s hoping the release version of Firefox 3 will solve both issues, and all will be good and right for the seventeen of us in the world who care about this sort of malarkey.
UPDATE 2 Evidently kerning in Safari has been an for some time (thx Daniele).
UPDATE THE LAST (and a few others I stupidly brushed off earlier for suggesting font-weight was the way to do it) says that FF3 beta does know what it’s doing when it comes to rendering different weights (and not simply shaving off pixels as older browsers have done):
What Gecko 1.9 (Firefox 3) does is correct by the logic of CSS.
You select a font ‘family’ (Helvetica Neue), and then a specific face (by font-weight in this case).
p {font-family: ‘Helvetica Neue’, sans-serif; font-weight: 300;}
This will work correctly in Gecko and, when it comes out, Safari 3.2 (full support for various font-weights was only checked in in Webkit last Friday, 2008.04.04).
Add ‘HelveticaNeue-Light’ for backwards compatibility with older browsers.
So Safari in the near future, and looky here. Firefox 3.0b5, you beautiful bastard you:
Still looks like complete pants on Windows, but no surprises there. Thanks to all for the tips.
This is a paid advertisement
Ads via