A Small Trick(?) for Expanding Your Cross-Platform Web Font Palette
In creating our little website we encountered a challenge anyone who wants to make their website look nice AND have it work across multiple OSes runs into – that is, picking a font that isn’t Helvetica (or Arial) and is pre-loaded on any machine running MacOSX or Windows XP and later. Alberto Perez over at ampsoft.net has done an excellent job documenting which fonts you can count on existing on both operating systems. Yes, it’s true that you can embed fonts for download with your page, but that isn’t a cross-platform solution (and the workarounds are somewhat unsimple). What to do?
I’m sure this is apparent to most folks who’ve been doing web design for awhile but this was new for us. It’s true that there is only a small set of fonts that will reliably be present on Mac and Windows. But there are also fonts that will reliably be found on Mac OR Windows. And if you can pair up fonts that look relatively close to each other then you can have at least fraternal (if not identical) twins for your web design.
For jacksonfish.com we paired up Sylfaen (a font that’s been around forever on Windows), and Baskerville on the Mac. Here are the results (Sylfaen/Windows on the left and Baskerville/Mac on the right):
I know they’re not a perfect match (and clearly I have spacing inconsistencies to fix), but as far as the typefaces they’re in the same vein. And most importantly they’re not Georgia or Times New Roman. Looking even a little bit different than 99.99% of the websites out there is already an accomplishment in my opinion.
You can suggest your own pairings in the comments section. Here are the fonts included on the Mac as of 10.4 (and 10.3 if you’re interested). It took awhile to find it but the friendly folks at Microsoft Typography have provided this database for Windows and other Microsoft products. For Windows there’s also this page which is very good, but unfortunately stops before IE6. That said, as comprehensive as it seems, it doesn’t include Sylfaen anywhere which clearly is included with XP and Vista (even before I installed Office.)
Join the discussion 5 Comments
Walter
December 5, 2006 at 12:37 pm
There’s an interesting story behind Sylfaen. At least, it’s interesting if you find type design interesting. :)
http://www.tiro.com/Articles/sylfaen_article.pdf
Hillel
December 5, 2006 at 1:47 pm
Very cool backstory.
Hillel
December 5, 2006 at 6:02 pm
And I found a bunch more resources since posting… including:
http://www.informationarchitects.jp/the-web-is-all-about-typography-period
Incredibly helpful with a great list of resources.
One of the best and most apropos to this post is:
http://typetester.maratz.com/
(Notice, it doesn’t have Sylfaen. Would be cool if they updated it to contain the fonts in the lists above. Then we could really find good pairings.)
Dave Cortright
October 31, 2007 at 1:43 pm
Thanks for the tip, Hillel. I’m definitely using this CSS in my web sites from now on:
font-family: Sylfaen,Baskerville,Georgia,”Times New Roman”,Times,serif;
A tip for you. For doing brief bits of unique text, check out sIFR, which uses Flash to display the text, but fails gracefully if Flash isn’t installed:
http://www.mikeindustries.com/sifr
Hillel
October 31, 2007 at 7:43 pm
Yep. Know all about sIFR. Thanks for the heads up. It’s definitely cool.