updated: March 4th, 2010 / Ross Johnson / 177 Comments

8 fonts you probably don’t use in css, but should

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.

177 thoughts 8 fonts you probably don’t use in css, but should

  1. Pingback: bluelectric.org » Buchstabensuppe

  2. Pingback: Los límites de la tipografía en el diseño web &raquo Dubo.cl

  3. Pingback: Ugens links på del.icio.us (03.05.08 - 09.05.08) | Morten Gade

  4. Pingback: perryboy.com » Blog Archive » links for 2008-05-10

  5. Pingback: CSS links | JasonBagley.com

  6. Pingback: links for 2008-05-10 | Moewes.com

  7. Pingback: 8 fonts you probably don’t use in css, but should | White Sands Digital

  8. Pingback: More Fonts Choices for Your CSS | Play Work Play Studio

  9. Pingback: CSSでの指定にオススメな8つの欧文フォント | デジタルマガジン

  10. Pingback: ) design collected ( :: links for 2008-05-11

  11. Pingback: Intenta » Blog Archive » Links 11-05-2008

  12. Pingback: 8 fonts you probably don’t use in css, but should | Sideblog | Smashing Magazine

  13. Pingback: des84 - Internet level 2 » Blog Archive » 8 Fontes que você provavelmente não usa em CSS, mas poderia.

  14. Pingback: Skylog » Blog Archive » links for 2008-05-12

  15. Pingback: links for 2008-05-12 | KevinDonahue.com

  16. Pingback: Recursos tipográficos  | Isopixel

  17. Pingback: Diseño » Blog Archive » Tipografias que deberiamos usar

  18. Pingback: 7 fuentes tipográficas que seguro no usas en CSS, aunque deberías

  19. Pingback: 8 tipografías que probablemente no utilizas pero que deberías utilizar

  20. Pingback: » 8 fonts you probably don’t use in css, but should Webcreatives

  21. Pingback: saucybeige blog » Blog Archive » links for 2008-05-13

  22. Pingback: lillbra » Blog Archive » links for 2008-05-13

  23. Pingback: Algunos tipos de letras que posiblemente no emplees con CSS » Cosas sencillas

  24. Pingback: 8 fuentes muy poco utilizadas en diseño web -- los chicos de la playa

  25. Pingback: Great Resources Elsewhere: May 08 to May 15 - CSSnewbie

  26. Pingback: 8 fonts you probably don’t use in css, but should | Anidan Design : eco-friendly web development & graphic design

  27. Pingback: Arvutiga kaasa tulevad fondid | Espressojutud

  28. Pingback: blands to go

  29. Pingback: 8 nouvelles polices à utiliser en CSS | bbxdesign

  30. Pingback: Maske » Blog Archive » Cambiamo carattere

  31. Pingback: 8 fonts you probably don’t use in css, but should

  32. Pingback: This Month’s Best: May 2008 - Six Revisions

  33. Pingback: This Month’s Best: May 2008 - Six Revisions

  34. Pingback: Nonimage.co.uk » Blog Archive » » 8 fonts you probably don’t use in css, but should - Web Design Marketing Podcast & Blog

  35. Pingback: links for 2008-06-02 « Brad Davis Seal

  36. Pingback: links for 2008-06-04 :: User First Web

  37. Pingback: New Portfolio! - Graphic Design Forum and Web Design Forum

  38. Pingback: thegimmick » Daily Links

  39. Pingback: Fuentes que deberias usar en tus diseños CSS at Blog Borchani Studios

  40. Pingback: NETTUTS - Web development tutorials and links - Best of the Web - May

  41. Pingback: Mobimeet - 8 fonts you probably don’t use in css, but should

  42. Pingback: Playground » Blog Archive » More fonts to use on the web!

  43. Pingback: Technikwürze » Technikwürze 111 - Volles Programm

  44. Pingback: anthro.pophago.us snippets of media, anthropology, design, culture and politics.

  45. Pingback: CSS Dev Kit » » Best of the Web - May

  46. Pingback: Interesting Links From June 10 » Nonimage Blog

  47. Pingback: CSS fixin’: toward a vertical grid (Jarrett House North)

  48. Pingback: links for 2008-06-11 (Jarrett House North)

  49. Pingback: The Link List… come get your inspiration!

  50. Pingback: Daro - Graphic / Web Designer » Blog Archive » 8 tipografías que deberías usar en tus diseños CSS

  51. Pingback: Interesting Articles #5 » DivitoDesign - Webdesign Blog

  52. Pingback: Linklist: Fontography, SEO, and a Couple of Guest Posts | Joshua Clanton - Design for the WEB

  53. Pingback: Paper Bits – links for 2008-06-03

  54. Pingback: 8 fonte man kunne bruge at CreunaBlog

  55. Pingback: probably

  56. Pingback: My Links via Diigo (weekly) | Anabubula.com *

  57. Pingback: 8 Great Fonts to use in CSS my.bookmarks

  58. Pingback: 8vo Post Beta 2.1-ACIDminds | Ideas corrosivas

  59. Pingback: arial

  60. Pingback: Enlaces de diseño : Sonao | Negocios + Diseño + SEO

  61. Pingback: links for 2008-07-22 | the sweetview blog

  62. Pingback: Browser Safe Fonts für Webseiten

  63. Pingback: Mis fondid on arvutiga kaasas? | Espressojutud

  64. Pingback: 8 fonts you probably don’t use in css, but should » - Web Design Marketing Podcast & Blog

  65. Pingback: Fuentes para web

  66. Pingback: Redesigning our Redesigns

  67. Pingback: Higherweb ::: Le BLOG » Blog Archive » A la recherche des polices perdues

  68. Pingback: All the Tools You Need for Rich Web Typography » - Web Design Marketing Podcast & Blog

  69. Pingback: inDesign » Blog Archive » 8 tipografías que deberías usar en tus diseños CSS

  70. Pingback: Fontomanija | Kroativ

  71. Pingback: 2008年最佳Web设计文章、教程及资源 - 刀客征途

  72. 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

  73. Pingback: Pieter van Boheemen | 2008 Wrap up: CSS & XHTML

  74. Pingback: webastica » Blog Archive » 8 tipografías que deberías usar en tus diseños CSS

  75. Pingback: 2008 Most Popular Design posts, Tutorials and Resources | Web Hosting and Domains

  76. Pingback: 2008 Most Popular Design posts, Tutorials and Resources | SulVision

  77. Pingback: Have to say » Blog Archive » 50个Web开发设计文章、教程及资源

  78. Pingback: AMB Album » 2008 Most Popular Design posts, Tutorials and Resources

  79. Pingback: Tips & tools to improve your conceptual web design » Assault Blog

  80. Pingback: Introducing the Web Safe Font Cheat Sheet | Devon Web Design and Development - MightyMeta

  81. Pingback: Revised Font Stack | A Way Back

Comments are closed.