CSS has brought us many capabilities in terms of typography and the web, but we always seem to be limited to the same 4-5 typefaces over and over again. There is an inherant problem, if the font you specify isn’t on the viewers computer it won’t render in that font. So as designers and developers we end up selecting the ones that we can safely assume is available on most computers today. So most pages use Arial, Helvetica, or Georgia as their typefaces… and the world of the web remains slightly more bland.
But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.
1. Palatino Linotype / Palatino
WINDOWS 97.09% / MAC 78.86%
This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.
2. Tahoma
WINDOWS 96.09% / MAC 72.02%
I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.
3. Impact
WINDOWS 95.85% / MAC 88.08%
Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.
4. Century Gothic
WINDOWS 85.44% / MAC 42.50%
This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).
5. Arial Black
WINDOWS 97.73% / MAC 96.18%
Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.
6. Arial Narrow
WINDOWS 87.08% / MAC 91.01%
Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.
7. Copperplate / Copperplate Gothic Light
WINDOWS 58.13% / MAC 85.85%
I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.
8. Gill Sans / Gill Sans MT
WINDOWS 43.09% / MAC 90.82%
No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.
Pingback: bluelectric.org » Buchstabensuppe
Pingback: Los límites de la tipografía en el diseño web » Dubo.cl
Pingback: Ugens links på del.icio.us (03.05.08 - 09.05.08) | Morten Gade
Pingback: perryboy.com » Blog Archive » links for 2008-05-10
Pingback: CSS links | JasonBagley.com
Pingback: links for 2008-05-10 | Moewes.com
Pingback: 8 fonts you probably don’t use in css, but should | White Sands Digital
Pingback: More Fonts Choices for Your CSS | Play Work Play Studio
Pingback: CSSでの指定にオススメな8つの欧文フォント | デジタルマガジン
Pingback: ) design collected ( :: links for 2008-05-11
Pingback: Intenta » Blog Archive » Links 11-05-2008
Pingback: 8 fonts you probably don’t use in css, but should | Sideblog | Smashing Magazine
Pingback: des84 - Internet level 2 » Blog Archive » 8 Fontes que você provavelmente não usa em CSS, mas poderia.
Pingback: Skylog » Blog Archive » links for 2008-05-12
Pingback: links for 2008-05-12 | KevinDonahue.com
Pingback: Recursos tipográficos | Isopixel
Pingback: Diseño » Blog Archive » Tipografias que deberiamos usar
Pingback: 7 fuentes tipográficas que seguro no usas en CSS, aunque deberías
Pingback: 8 tipografías que probablemente no utilizas pero que deberías utilizar
Pingback: » 8 fonts you probably don’t use in css, but should Webcreatives
Pingback: saucybeige blog » Blog Archive » links for 2008-05-13
Pingback: lillbra » Blog Archive » links for 2008-05-13
Pingback: Algunos tipos de letras que posiblemente no emplees con CSS » Cosas sencillas
Pingback: 8 fuentes muy poco utilizadas en diseño web -- los chicos de la playa
Pingback: Great Resources Elsewhere: May 08 to May 15 - CSSnewbie
Pingback: 8 fonts you probably don’t use in css, but should | Anidan Design : eco-friendly web development & graphic design
Pingback: Arvutiga kaasa tulevad fondid | Espressojutud
Pingback: blands to go
Pingback: 8 nouvelles polices à utiliser en CSS | bbxdesign
Pingback: Maske » Blog Archive » Cambiamo carattere
Pingback: 8 fonts you probably don’t use in css, but should
Pingback: This Month’s Best: May 2008 - Six Revisions
Pingback: This Month’s Best: May 2008 - Six Revisions
Pingback: Nonimage.co.uk » Blog Archive » » 8 fonts you probably don’t use in css, but should - Web Design Marketing Podcast & Blog
Pingback: links for 2008-06-02 « Brad Davis Seal
Pingback: links for 2008-06-04 :: User First Web
Pingback: New Portfolio! - Graphic Design Forum and Web Design Forum
Pingback: thegimmick » Daily Links
Pingback: Fuentes que deberias usar en tus diseños CSS at Blog Borchani Studios
Pingback: NETTUTS - Web development tutorials and links - Best of the Web - May
Pingback: Mobimeet - 8 fonts you probably don’t use in css, but should
Pingback: Playground » Blog Archive » More fonts to use on the web!
Pingback: Technikwürze » Technikwürze 111 - Volles Programm
Pingback: anthro.pophago.us snippets of media, anthropology, design, culture and politics.
Pingback: CSS Dev Kit » » Best of the Web - May
Pingback: Interesting Links From June 10 » Nonimage Blog
Pingback: CSS fixin’: toward a vertical grid (Jarrett House North)
Pingback: links for 2008-06-11 (Jarrett House North)
Pingback: The Link List… come get your inspiration!
Pingback: Daro - Graphic / Web Designer » Blog Archive » 8 tipografías que deberías usar en tus diseños CSS
Pingback: Interesting Articles #5 » DivitoDesign - Webdesign Blog
Pingback: Linklist: Fontography, SEO, and a Couple of Guest Posts | Joshua Clanton - Design for the WEB
Pingback: Paper Bits – links for 2008-06-03
Pingback: 8 fonte man kunne bruge at CreunaBlog
Pingback: probably
Pingback: My Links via Diigo (weekly) | Anabubula.com *
Pingback: 8 Great Fonts to use in CSS my.bookmarks
Pingback: 8vo Post Beta 2.1-ACIDminds | Ideas corrosivas
Pingback: arial
Pingback: Enlaces de diseño : Sonao | Negocios + Diseño + SEO
Pingback: links for 2008-07-22 | the sweetview blog
Pingback: Browser Safe Fonts für Webseiten
Pingback: Mis fondid on arvutiga kaasas? | Espressojutud
Pingback: 8 fonts you probably don’t use in css, but should » - Web Design Marketing Podcast & Blog
Pingback: Fuentes para web
Pingback: Redesigning our Redesigns
Pingback: Higherweb ::: Le BLOG » Blog Archive » A la recherche des polices perdues
Pingback: All the Tools You Need for Rich Web Typography » - Web Design Marketing Podcast & Blog
Pingback: inDesign » Blog Archive » 8 tipografías que deberías usar en tus diseños CSS
Pingback: Fontomanija | Kroativ
Pingback: 2008年最佳Web设计文章、教程及资源 - 刀客征途
Pingback: 2008 tasarımları, en iyi tasarımlar, kartvizit, css, tema, wordpress, blog, ikon, desen | Orçun KILIÇ | Web and Graphic |Web, grafik, css, html, asp, php, 3d, 3dmax, maya, photoshop, freehand, corel
Pingback: Pieter van Boheemen | 2008 Wrap up: CSS & XHTML
Pingback: webastica » Blog Archive » 8 tipografías que deberías usar en tus diseños CSS
Pingback: 2008 Most Popular Design posts, Tutorials and Resources | Web Hosting and Domains
Pingback: 2008 Most Popular Design posts, Tutorials and Resources | SulVision
Pingback: Have to say » Blog Archive » 50个Web开发设计文章、教程及资源
Pingback: AMB Album » 2008 Most Popular Design posts, Tutorials and Resources
Pingback: Tips & tools to improve your conceptual web design » Assault Blog
Pingback: Introducing the Web Safe Font Cheat Sheet | Devon Web Design and Development - MightyMeta
Pingback: Revised Font Stack | A Way Back