User:ChristTrekker/choosing Mac fonts for the web

Choosing fonts for the web is a difficult task, if one expects to achieve a consistent cross-platform appearance. There are three basic considerations, which vary in order of importance depending on the circumstances:

1. Screens are a low-resolution medium (currently); is the text legible in the font I specify?
2. Visual aesthetics are important; which typeface gives my site an appropriate feel/character?
3. One can't know if a visitor has the specified font installed; can I supply similar alternate fonts for visitors that don't, so that I don't completely throw my design to chance?

My belief is that the first consideration is the most important, and when making aesthetic choices they should be weighted with that in mind. Once a typeface has been chosen to help give a visual identity to the site, the final consideration is trying to make it work across multiple platforms.

This is where many sources would recommend sticking with "web-safe" (i.e. boring) fonts when building your font stack, forcing you to sacrifice your unique identity. I think this is unwarranted. Of course you cannot guarantee that every visitor will see your pages just like you do, but there's nothing wrong with offering the suggestion. Best practices, such as always supplying a generic as the final alternative, should still be observed…but if you would prefer Book Antiqua for your serif font then by all means use it! Just be prepared that a larger share of your audience will not see it that way than if you had specified a more common/safe typeface like Times. You can specify ten uncommon fonts that strongly resemble your preferred design, then a more common one, and finally a generic. Or skip specifying the common font and just let the visitor's browser supply whatever matches the generic on his system and call it close enough.

All that said…you are a Macintosh-using web designer, familiar with the fonts that commonly appear on Macs. Which fonts should you list in your stylesheet's font stack as alternatives so that Windows and Unix visitors see your pages (at least somewhat) as you intended them? I'm glad you asked.

Typeface alternatives (by web family)

Below are listed various common (defined as appearing on at least 50% of systems, according to surveys) Windows and Unix alternatives for fonts common to Macintosh (and a few others used by Apple), as well as other less common options that bear a particularly strong resemblance worth mentioning. They are given in the order that they approximate (in this user's subjective opinion) the appearance of the Mac font. Any typeface without a particularly good match will at least match the general form of others in the same classification (e.g. transitional serif). Free downloads are linked—though for some the legality of the download seems a bit dubious.

Note that I've included most (if not all) of the original Mac "city" fonts. These are for fun only. Any serious typographer will recommend that you never, ever use these fonts (even the TrueType updates) for any professional printing because they were designed to look good at low resolution…i.e. they are screen fonts. But if you are trying to develop something with a vintage look for screen use (gee, who would do something like that?) then they are perfect. Other typefaces created by or specifically for Apple have also been included, as Mac users will likely be familiar with them.

If known, the x-height aspect has been noted so that if you choose this as the primary face for your web page, you can specify the font-size-adjust property to set the desired metrics of replacement typefaces. Of course, that only works in supporting browsers.

Serif

Sans-serif

Monospace

Cursive

In typography, this is more generally known as "script".

Fantasy

Fantasy typefaces are among the most difficult to find direct replacements for, because the styles range so widely. However, fantasy/display fonts are typically not used for large blocks of text such as body copy.

Dingbat

This really doesn't fit anywhere, but I can't help but mention I have found TrueType conversions of Cairo^[9][10] as well.

Do you know of typefaces that closely approximate the Mac fonts listed here? Let me know.

What next?

OK, so now you can (hopefully) get non-Mac users seeing something kind of similar to what you have in front of you on your Mac. But what if you want to take it to the next level? What if you want to try doing what real publishers do, in the vein of trying to evoke feeling through judicious use of type itself? That's difficult given the low-resolution nature of the computer screen where most web pages will be seen. But you can try.

External links

References