Difference between revisions of "User:ChristTrekker/Choosing Mac fonts for the web"
(removed Gertina - discovered it is the product of disreputable copycat Arc Media)
|Line 266:||Line 266:|
|<span style="font-family:Genoa;">[http://www.searchfreefonts.com/fonts/g7.htm Genoa
|<span style="font-family:Genoa;">[http://www.searchfreefonts.com/fonts/g7.htm Genoa]</span>, <span style="font-family:'New Venice';">[http://www.masterstech-home.com/The_Library/Font_Samples/Font_Indices/Image_Pages/N/NewVenice.html New Venice]</span>, <span style="font-family:Valencia;">[http://www.kreativekorp.com/software/fonts/urbanrenewal.shtml Valencia]</span>, <span style="font-family:'Venice Classic';">[http://www.soixantedeux.us/content/typography/VeniceClassic.zip Venice Classic]</span><ref name="classic" />
Revision as of 09:41, 1 July 2013
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:
- Screens are a low-resolution medium (currently); is the text legible in the font I specify?
- Visual aesthetics are important; which typeface gives my site an appropriate feel/character?
- 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.
|Name (x-height aspect)||Free?||Windows||Unix||Other||Comments|
|Apple Garamond (.443)|
|Hoefler Text (.44)|
|Georgia (.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)||✓? ✓?|
|Times (.448)||✓?||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 (.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.|
|American Typewriter (.51)||Courier Ragged, Messenger, URW Typewriter||Not monospaced, but style evokes a typewritten feel.|
|Athens (.45)||✓?||Alexandria, Athene, Athens Classic, Berthold City|
|Toronto (.778)||Brampton, Torrance|
|Motter Tektura||Cupertino, Mottek|
|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.|
|Charcoal (.585)||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)||✓? ✓?||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 (.52)||✓|
|Verdana (.58)||✓||Verdana||Verdana, Bitstream Vera Sans|
|Arial (.52)||✓||Arial||Arial, Liberation Sans, Helvetica||Helvetica differs on some letter forms, but is nearly identical in weight, width, and spacing.|
|Arial Black (.517)||✓|
|Geneva (.535)||✓? ✓?||Arial||Helvetica||Hedley, Nina|
|Shaston||Shaston 320, Shaston 640, ShastonPS||Shaston was used in 8 point in the UI of GS/OS.|
|?||Apple2Forever, A2like, PR Number 3, Print Char 21||Anyone know what the fixed pitch screen font of the Apple ][ was called?|
|Courier (.45)||✓?||Courier New||Courier, Nimbus Mono, FreeMono, Courier New||Courier Prime, Dark Courier, Monospace, Standard Typewriter, Steno Stout|
|Courier New (.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)||✓? ✓? ✓? ✓? ✓?||EF Lucida Mono||V2 is usable as a fixed font in PuTTy on Windows, but v5 has a larger character repertoire.|
In typography, this is more generally known as "script".
|Venice (.415)||✓?||Genoa, New Venice, Valencia, Venice Classic|
|Brush Script MT (.37)|
|Chalkboard (.53)||Comic Sans MS|
|Comic Sans MS (.55)||✓||Comic Sans MS||Chalkboard, Comic Relief|
|Los Angeles (.505)||✓?||City of Angels (File Info), Los Altos, LA Crayon, LA Marker|
|Lucida Handwriting (.532)|
|Apple Chancery (.468)||✓?||Poetica Chancery III, Monotype Corsiva, Lucida Calligraphy, ITC Zapf Chancery|
|London||✓?||Old English Text MT||London (File Info), LaserLondon (File Info), Liverpool, Old English Text, Old English, Cloister Black|
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.
|Herculanum (.61)||Rusticana, Lithos|
|Impact (.647)||✓||Billboard, Compacta, Haettenschweiler, Techno|
|Marker Felt (.62)||Felt, FeltMark, FeltTip, Marker Felt|
|Papyrus (.424)||AncientScript, Parchment MF|
|San Francisco||Alta California, Fernando, Saint Francis (File Info), Sanfrisco|
|Textile (.68)||Flavour, Tasty|
|Your input appreciated!|
|Do you know of typefaces that closely approximate the Mac fonts listed here?|
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.
- Desperado's Fonts Gallery
- Typefaces with a characteristic international flavour
- Themed fonts
- Font categories at the Font Factory
- 1001 free fonts organized by theme
- Fontcraft Scriptorium has original themed categories
- typOasis fontennium, designers, and themes
- Identifont Fonts by Similarity
- Harold's Fonts
- Google Font Directory
- FontGirl.com organized by theme
Information and resources
- Font code sampler for CSS font-family properties and Web fonts
- Reliability of “Web–safe” fonts
- Fonts for web design: further comparison of cross-platform dependability
- Common fonts to all versions of Windows & Mac equivalents
- Mac OS 7.x, 8.x 9.x: Fonts Included With Major System Releases
- Understanding web typography - an introduction
- Fonts for the Web
- Web Typography Tutorial - Day One
- Web Typography Tutorial - Day 2
- x-height, font aspect value, font-size-adjust
- Aspect values, x-widths for fonts
- Browser News:Resources - Fonts
- Fonts for web design: a primer
- find the right stack
- Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows
comparison & style builders
- Microsoft web core font.
- The Zone38.net collection is a direct conversion to OpenType, retaining pixelation and multiple sizes.
- Based on metrics of Alexandria.
- The "Classic" version is a TrueType rendering of the original bitmap version…pixelation and all.
- Based on metrics of Virtue.
- This is a TrueType/OpenType rendering of the original, retaining pixelation.
- Based on metrics of Genoa.
- Based on metrics of City of Angels.
- Cairo Font by Clark Riley
- We Heart Cairo by Haley Fiege