User:ChristTrekker/Choosing Mac fonts for the web

From 68kMLA Wiki

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, 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 specify as alternatives so that Windows and Unix visitors see your pages (at least somewhat) as you intended them? I'm glad you asked.

Contents 1 Typeface alternatives (by web family) 1.1 Serif 1.2 Sans-serif 1.3 Monospace 1.4 Cursive 1.5 Fantasy 1.5.1 Dingbat 2 What next? 3 External links 3.1 Downloads 3.2 Information 4 References

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 common Macintosh fonts, 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

Name (x-height aspect)	Free?	Windows	Unix	Other	Comments
American Typewriter (.51)				URW Typewriter
Capitals (.667)
Old-style
Apple Garamond (.443)
Hoefler Text (.44)
Transitional
Baskerville (.45)
Georgia[1] (.5)	✓	Georgia, Times New Roman	Georgia, Times New Roman		It is larger than Times New Roman of the same point size, but is otherwise very similar.
New York (.55)	✓? ✓?[2]
Times (.448)	✓?[2]	Times New Roman	Times, Nimbus Roman No9 L, Times New Roman		T/TR, TNR, and NR are essentially versions of the same font by different foundries.
Times New Roman[1] (.46)	✓	Times New Roman	Times New Roman, Times, Nimbus Roman No9 L		T/TR, TNR, and NR are essentially versions of the same font by different foundries.
Modern
Slab
Athens (.45[3])	✓?[2]			Alexandria Athens Classic[4]
Toronto (.778)

Sans-serif

	Free?	Windows	Unix	Other	Comments
Geometric
Grotesque
Arial[1] (.52)	✓	Arial	Arial, Helvetica		Helvetica differs on some letter forms, but is nearly identical in weight, width, and spacing.
Arial Black[1] (.517)	✓
Geneva (.535)	✓? ✓?[2]			Nina, Hedley
Helvetica (.52)		Arial	Helvetica, Arial	Nimbus Sans L, Helvetica Neue, Swiss 721	Nimbus Sans is virtually identical. Arial differs on some letter forms, but is nearly identical in weight, width, and spacing.
Shaston				ShastonPS[5]	Shaston was used in 8 point in the UI of GS/OS.
Humanist
Charcoal (.585[6])				Truth, Virtue, Zemestro, Monem	Truth is Charcoal released by the type designer, with additional weights. Also see options for Chicago, which is similar.
Chicago (.585)	✓? ✓?[2]			Krungthep, Silom, Chicane, MacEnvy DB, Calvin, MacType, Beijing SSi	Also see options for Charcoal, which is similar. Krungthep and Silom are Thai fonts shipped with OS X 10.4.
Gadget (.547)				FF Typeface Six
Skia (.505)				CC Skia, Asakire	CC Skia is Skia released by the type designer.
Trebuchet MS[1] (.52)	✓
Verdana[1] (.58)	✓	Verdana	Verdana, Bitstream Vera Sans

Monospace

	Free?	Windows	Unix	Other	Comments
?				Apple2Forever	Anyone know what the fixed pitch screen font of the Apple ][ was called?
Courier (.45)	✓?[2]	Courier New	Courier, Courier New	Nimbus Mono
Courier New[1] (.422)	✓	Courier New	Courier New, Courier	Nimbus Mono
Lucida Sans Typewriter (.53)
Monaco (.545)	✓? ✓?[2] ✓?			EF Lucida Mono

Cursive

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

	Free?	Windows	Unix	Other	Comments
Venice (.415[7])	✓?[2]			Genoa, Gertina, Venice Classic[4]
Casual (Handwriting)
Apple Casual
Brush Script MT (.37)
Chalkboard (.53)		Comic Sans MS
Comic Sans MS[1] (.55)	✓	Comic Sans MS		Chalkboard
Los Angeles (.505[8])	✓?[2]			City of Angels (File Info)
Lucida Handwriting (.532)
Formal (Calligraphy)
Apple Chancery (.468)	✓?			Poetica Chancery III, Monotype Corsiva, Lucida Calligraphy
Zapfino (.55)
Formal (Blackletter)
London	✓?[2]			Old English Text MT

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.

	Free?	Windows	Unix	Other	Comments
Copperplate (.44)
Herculanum (.61)				Rusticana, Lithos
Impact[1] (.647)	✓			Billboard, Haettenschweiler, Techno
Marker Felt (.62)				Felt, FeltMark, FeltTip
Papyrus (.424)				AncientScript, Parchment MF
San Francisco				Saint Francis (File Info), Fernando
Sand (.69)
Techno (.632)		Impact		Haettenschweiler
Textile (.68)

Dingbat

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

	Your input appreciated!
	Do you know of typefaces that closely approximate the Mac fonts listed here?
	No Yes

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

1. ↑ ^{1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8} Microsoft web core font.
2. ↑ ^{2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9} The Zone38.net collection is a direct conversion to OpenType, retaining pixelation and multiple sizes.
3. ↑ Based on metrics of Alexandria.
4. ↑ ^{4.0 4.1} The "Classic" version is a TrueType rendering of the original bitmap version…pixelation and all.
5. ↑ This is a TrueType/OpenType rendering of the original, retaining pixelation.
6. ↑ Based on metrics of Virtue.
7. ↑ Based on metrics of Genoa.
8. ↑ Based on metrics of City of Angels.
9. ↑ Cairo Font by Clark Riley