Difference between revisions of "User:ChristTrekker/Choosing Mac fonts for the web"

From 68kMLA Wiki
Jump to: navigation, search
(removed Gertina - discovered it is the product of disreputable copycat Arc Media)
(Sans-serif)
 
Line 126: Line 126:
 
|
 
|
 
|<span style="font-family:Cupertino;">Cupertino</span>, <span style="font-family:Mottek;">Mottek</span>
 
|<span style="font-family:Cupertino;">Cupertino</span>, <span style="font-family:Mottek;">Mottek</span>
|
+
|An authorized digital version of the "true" Motter Tektura has never been released.
 
|-
 
|-
 
![[wikipedia:Grotesque sans-serif|Grotesque]]
 
![[wikipedia:Grotesque sans-serif|Grotesque]]

Latest revision as of 16:47, 19 January 2016

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

Name (x-height aspect) Free? Windows Unix Other Comments
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 Bitstream Cyberbit, Dutch 801, Thames Serial, Times Eighteen, Times Ten These 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 Bitstream Cyberbit, Dutch 801, Thames Serial, Times Eighteen, Times Ten These are essentially versions of the same font by different foundries.
Modern
Slab
American Typewriter (.51) Courier Ragged, Messenger, URW Typewriter Not monospaced, but style evokes a typewritten feel.
Athens (.45[3]) ?[2] Alexandria, Athene, Athens Classic[4], Berthold City
Toronto (.778) Brampton, Torrance

Sans-serif

Free? Windows Unix Other Comments
Geometric
Motter Tektura Cupertino, Mottek An authorized digital version of the "true" Motter Tektura has never been released.
Grotesque
Helvetica (.52) Arial Helvetica, Arial Helvetica Neue, Nimbus Sans L, Pragmatica, Swiss 721, CG Triumvirate Nimbus Sans is virtually identical. Arial differs on some letter forms, but is nearly identical in weight, width, and spacing.
Humanist
Charcoal (.585[5]) 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
Realist
Arial[1] (.52) Arial Arial, Liberation Sans, Helvetica Helvetica differs on some letter forms, but is nearly identical in weight, width, and spacing.
Arial Black[1] (.517)
Geneva (.535) ? ?[2] Arial Helvetica Hedley, Nina
Shaston Shaston 320[6], Shaston 640[6], ShastonPS[6] Shaston was used in 8 point in the UI of GS/OS.

Monospace

Free? Windows Unix Other Comments
? Apple2Forever[6], A2like, PR Number 3[6], Print Char 21[6] Anyone know what the fixed pitch screen font of the Apple ][ was called?
Courier (.45) ?[2] Courier New Courier, Nimbus Mono, FreeMono, Courier New Courier Prime, Dark Courier, Monospace, Standard Typewriter, Steno Stout
Courier New[1] (.422) Courier New Courier New, FreeMono, Nimbus Mono, Courier Dark Courier, Courier Prime, Monospace Yes, there's actually a font called "Monospace". It doesn't work too well on the web, due to the CSS generic family name.
Lucida Sans Typewriter (.53)
Monaco (.545) ? ?[2] ? ? ? EF Lucida Mono V2 is usable as a fixed font in PuTTy on Windows, but v5 has a larger character repertoire.

Cursive

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

Free? Windows Unix Other Comments
Venice (.415[7]) ?[2] Genoa, New Venice, Valencia, 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, Comic Relief
Los Angeles (.505[8]) ?[2] Fileicon-archive-small.png City of Angels (File Info), Los Altos, LA Crayon, LA Marker
Lucida Handwriting (.532)
Formal (Calligraphy)
Apple Chancery (.468) ? Poetica Chancery III, Monotype Corsiva, Lucida Calligraphy, ITC Zapf Chancery
Zapfino (.55)
Formal (Blackletter)
London ?[2] Old English Text MT Fileicon-archive-small.png London (File Info), Fileicon-archive-small.png LaserLondon (File Info), Liverpool, Old English Text, Old English, Cloister Black

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, Compacta, Haettenschweiler, Techno
Marker Felt (.62) Felt, FeltMark, FeltTip, Marker Felt
Papyrus (.424) AncientScript, Parchment MF
San Francisco Alta California, Fernando, Fileicon-archive-small.png Saint Francis (File Info), Sanfrisco
Sand (.69)
Techno (.632) Impact Haettenschweiler
Textile (.68) Flavour, Tasty

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.

Question icon color.png 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

Downloads

Information and resources

comparison & style builders

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. Based on metrics of Virtue.
  6. 6.0 6.1 6.2 6.3 6.4 6.5 This is a TrueType/OpenType rendering of the original, retaining pixelation.
  7. Based on metrics of Genoa.
  8. Based on metrics of City of Angels.
  9. Cairo Font by Clark Riley
  10. We Heart Cairo by Haley Fiege