This article is the 2nd one in the Web Design series. It was inspired and partially based on the results of the interviews conducted with 35 web designers by Smashing Magazine.

The first 6 bits of fonts on this list are considered “web-safe” – they’re supported by all major browsers on any platform. The fonts in the following 2 bits come pre-installed on most but not all systems. The fonts in the last 8 bits are mainly used for decorative purposes, and implemented on the Web as sIFR or saved as images.

  1. Helvetica, Helvetica Neue, Arial
    Helvetica was created by Swiss designers 50 years ago, Helvetica is one of the most widely used sans-serif typefaces. Many well-known companies like American Airlines, Lufthansa, Toyota chose this font in their branding. There were so many variations of Helvetica that in 1983 Linotype released Helvetica Neue by redrawing the entire Helvetica family in a more structurally organized fashion. Many consider Arial, designed almost 30 years after Helvetica, to be a cheap imitation of Helvetica. But it turns out that Arial has more similarities with Univers than Helvetica.
    helvetica
    arial
  2. Verdana was designed specifically for Microsoft in 1996 with a purpose of being readable at small sizes on a screen. The absence of serifs, wide proportions and loose letter-spacing make this font extremely legible for web sites.
    Verdana
  3. Georgia -another font that was ordered by Microsoft in 1993 which bears lots of similarities with Times New Roman, but substantially larger. It works really well at small and big sizes, and is often chosen by web designers as a substitute to the so overused Times New Roman.
    georgia
  4. Trebuchet MS – once again Microsoft steps in and orders another “good web design font” in 1996. It works really well when used for big headers (btw, I’m using this type on my blog).
    trebuchet
  5. Century Gothic – a so-called “geometric” sans-serif font designed in 1991, has many similarities with Avant Garde Gothic. It works well for the headers, but I wouldn’t recommend to use this font for the large chunks of body text.
    centurygothic
  6. Lucida Sans Unicode, Lucida Grande – Lucida Grande is the font that’s used throughout Mac OS, whereas Lucida Sans Unicode is a similar Windows font. Both fonts belong to the “humanist” sans-serif type which is the most calligraphic of all typefaces in the sans-serif family.
    Lucida
  7. Palatino – designed by Hermann Zapf in 1948 with an old style typeface look inspired by the Renaissance. Decades later Microsoft distributed a clear imitation of this font in a form of Book Antiqua originated by Monotype.
    palatino
  8. Garamond, Baskerville, Caslon – these are the oldest typefaces on this list.
    Garamond was commissioned for the French king in 1540 and was quickly adopted by many for printing. However, the modern version of this type was popularized by Apple. It was used in the hardcover editions of Harry Potter and the short history of the type is mentioned on the last page of the book:

    The text was set in 12-point Adobe Garamond, a typeface based on the sixteenth-century type designs of Claude Garamond, redrawn by Robert Slimbach in 1989

    garamond
    Baskerville – designed by John Baskerville in 1757 with an intention to improve the legibility of Caslon typeface designed by William Caslon.
    baskerville
    caslon

  9. Univers Condensed, Linotype Univers – Univers, often confused with Helvetica, was designed by Adrian Frutiger in 1956. Frutiger is famous for his unique typeface classification system. Univers is exceptionally legible at great distances, that is why it was chosen by new Swiss International Air Lines, Deutsche Bank and for the keycaps on many Apple keyboards.
    univers
  10. Myriad Pro – designed specifically for Adobe Systems in early nineties. Since 2002 Myriad has become Apple’s corporate font, replacing Apple Garamond. Myriad works well both for print and web typography.
    myriad
  11. Rockwell – falls under the slab serif classification, where “the serifs are unbracketed and similar in weight to the horizontal strokes of the letters”. It used primarily for the decorative purposes rather than for the lengthy body text.
    rockwell
  12. Warnock Pro – named after John Warnock, the co-founder of Adobe Systems Inc. It quickly became one of the most favorable typefaces designed in the XXI century. It’s included with Adobe CS (which is really nice).
    warnock
  13. FF DIN – “DIN” stands for “Deutsche Industrie Norm” translated as German Industry Standard, it was designed in 1995 by a Dutch designer in Hamburg – hence such a modern look.
    ffdin
  14. Gotham – another typeface designed in XXI century. Gotham’s geometric forms and a large x-height make it extremely readable at small sizes.
    gotham
  15. Frutiger – another typeface designed by Adrian Frutiger, this time he created it specifically for the newly built Charles De Gaulle International Airport in 1968. Surprisingly, it took 7 years for the designer to finally complete the work. Wikipedia states that “It is currently the best-selling typeface of the Linotype foundry”.
    Frutiger
  16. Dax Regular – one of the newest typefaces of the XXI century, but it already became very popular in advertising and marketing. It’s extensively used by UPS, it is also used in the branding of the New Democratic Party of Canada (wow, smart move, NDP :-))
    dax

So here you go – hopefully you’ve enjoyed reading a bit of history on some of the most popular typefaces favoured by many modern web designers. What is your favourite font on this list? What other fonts you enjoy working with and why?

Recent Bits
Related Bits
Blog Authority
Best Inspiration Bits in 2007
Digg vs. Reddit vs. StumbleUpon vs. del.icio.us
Web Design Dissected Into 8 Bits
How Comfortable Are You With Guests?
What Can Digg do with your website?
7 Astonishing Minutes to Get Inspired
Seasons Greetings From Inspiration Bit
Comment Bits

101 Insightful Bits in response to “16 Best-Loved Font Bits In Web Design”

  1. Great review. Enjoyed reading it. Thanks. Didn’t know Verdana was so recent!

  2. Verdana has been my favorite for some time on the web. When using a word processor for non digital means I like Tahoma.

  3. I’m a Verdana kind of guy. :) I also enjoy Arial.

  4. A useful post their Vivien, I didn’t realise Trebuchet was considered web safe. I like it, and may well use it a bit more now. Verdana is one of my favourites too, although Arial seems to be the one I use most.

    Dax is a great font, it’s one font I’ve actually bought the complete family. Imagine that, someone buying a font. I wonder how many readers here actually buy the fonts they use?

  5. Vivien

    Wow, didn’t know that there are so many Verdana lovers here :-)
    Well, it is understandable since it’s a very web-friendly font indeed.

    Garry, did you buy Dax for your personal or client projects? I’ve never bought a font before, but I must admit – I’m a font addict, and I’ve been collecting fonts ever since I got hooked on the internet.

    I remember how I was begging my boss to get me a bigger hard drive for my brand new HP Vectra PC in 1997. I was trying to explain him that 500 Mb (can you believe that?!) of the existing hard disk space wasn’t enough for me. He couldn’t understand why would I need more than that, if he’s used only 200 Mb of space on his computer. How could I’ve told him then that I’ve already used 100Mb for my font collection only? :-)

  6. Wow Viv, its funny when you look back at things like trying to bump up from 500mb or doubling your RAM to 64.

    Huh, now it reminds me of when I was 20 and just wanted to make $2,000 a month. I thought that amount would really set me free.

    My how times change.

  7. Well, my favourites are Trebuchet, Georgia and Lucida. I dunno why ;) , but Trebuchet gives some kind of a Web 2.0 feel

  8. Vivien

    Do I sense a bit of sarcasm in your comment about Trebuchet, Shankar? :-)

    Yes, times have changed indeed, Joey, and we too mature as we grow, and our perception of the world and well being changes as well.

  9. Well, I am sorry if I’ve sounded sarcastic, just expressed my views there :)

  10. Vivien

    oh, there’s nothing to be sorry about, Shankar. I was just kidding :-) I welcome any kind of sarcasm, criticism and humour on this blog.

  11. The dax font I bought was for a client project, but I’ve used it on several other projects since. I must admit to being a bit of a font hoarder though, trouble is it takes so long to decide on a good font to use as there’s just so many to choose from.

    I’m only on 375mb for my font folder at the moment, but that’s just on my laptop. I think I have a few more on my desktop.

  12. Just the other day I was googling around to find the font of my MacBook Pro keyboard. Thanks for the “hint”. Any idea where I can find the Universe font?

  13. Vivien

    You’re welcome, Andrei. You can download Universe from http://www.linotype.com/1560/univers-family.html
    Each font costs $24 though

  14. I LOVE HELVETICA.

  15. ke

    People like Arial? Arial’s just a crappy ripoff of Helvetica.

  16. Well, at least Microsoft made something good. I love both Verdana and Trebuchet, my blog uses the latter while my documents are written in the former.

  17. J

    Warnock was included with Adobe’s Creative Suite, but certainly not ever included with OS X.

  18. Vivien

    Thanks for the correction, J. I do have Warnock in my Mac Font book, didn’t realize it’s because of Adobe CS. I’ve corrected my article.

  19. Matt

    So you are saying my company isn’t using a popular font when they use Comic Sans on their website? I hate my job…

  20. Julian

    Hey, DIN does not stand for what you say: http://en.wikipedia.org/wiki/D.....Cr_Normung

  21. Vivien

    Julian, check out this link: http://www.faces.co.uk/topfonts/din.cfm
    I guess there are different sources for what DIN stands for.

  22. Paul

    they’re all great fonts, (except for rockwell & arial, yech!), but my favourite would have to be helvetica (neue), with gotham coming a close second.

    EDIT: anyone else think the ampersand (&) is weird & ugly here in Trebuchet MS?

  23. typo

    No, no problems with the ampersand, but using Trebuchet MS for body text ie. here in the comments section is just… odd.

  24. this article will definitely help web designer, like me, to help use the fonts so that it is viewed the web page is viewed same globally.

    good article.

  25. I used to be verdana fan, until I discovered Bookman Old Style. However it is not mentioned here. Is that because it is not as significant as the others?

    Great article! It is so nice to know the history of these fonts. Thanks for the time and effort.

  26. Michael

    Vivien, there is of course only one source for what DIN does stand for and that is the DIN itself: http://www.din.de ;-)

    Deutsches Institut für Normung (German Institute for Standardization) is correct.

  27. Vivien

    Thanks for the link to the original source, Michael. Now I know where to look for the truth :-)

    Frankly, I didn’t expect such a big interest in this article after two months of its published time. After being featured on reddit, it got over 25 000 views in just a couple of days.

  28. Ashlyn

    Wow, this article must have taken a lot of research. Thank you for bothering to do that research, because it was a really interesting topic. I didn’t even pause to consider that fonts had histories before. Once again, thank you and fantastic article.

  29. Vivien

    Thank you very much, Ashlyn. Your comment made my day :-)

  30. outsdr

    Good content, but the font/background color combination, as well as the extremely tight tracking, gave me a severe headache and I had to stop reading around “Georgia”.

  31. Vivien

    Thanks for your feedback, outsdr. I’m working on a re-design of this site, taking all your comments into consideration.

  32. Im excited with your article. I will recomend it to my blog for further more…thanks ;)

  33. Hi,
    Thank you for sharing this information. Do you have a problem when I translate your information into Dutch and put it on my website. (with a link to your page)?

    Thanks
    viv

  34. Vivien

    Hi Viviane (almost my namesake :-))
    Of course, I have no problems with you translating this article to Dutch, I’m actually quite honoured and grateful to you for doing this. Thank you.

  35. Hi,

    In that case, I would like to translate it into Chinese if you are ok with it. I’ll host it at my website (because blogger is blocked in China). You can host the content if you prefer.

    Cheers
    Shane

  36. Vivien

    Hi Shane, I’m so sorry for not responding to your previous comment, somehow got sidetracked. Thanks for the kind words. As for you question about the significance of Bookman Old Style. I wouldn’t say that it’s an insignificant typeface, it’s actually quite pretty and very legible. However this particular article I based on 16 typefaces that were the favourites among the 35 designers interviewed by Smashing Magazine.

    Of course, you are more than welcome to translate it to Chinese. Thanks for your kind offer and efforts.

  37. My best is Gotham I love to use small text letter and it’s best for this purpose

  38. Vivien

    Dekoracje, I can see you love small font-size when looking at your site. Nice home decorations, btw. :-)

  39. Hi Vivien,
    I think I agree with Shankar. You can see Trebuchet domination in Verlee’s Blog :) I wonder to myself why didn’t I change my blog font to trebuchet already. Are you agree that favourite on font is corelate alot with gender? Perhaps you would like to write a post about that topic next time :p
    :) One more time I would like to translate this article to Indonesian. Is that ok?
    Thank you..

  40. Vivien

    Kukuh, that’s a very interesting question – does the choice of a typeface correlate with a gender? I never thought about it. I’m quite intrigued and ready for a research. If I find something interesting I’ll definitely post about it and credit you for bringing it up :-)

    Of course, you can translate this article to Indonesian. Thank you very much.

  41. I love Baskerville – it’s understated and very elegant in my eyes – the University of Durham uses Baskerville Gothic in their new branding as ‘Durham University’.

    Very interesting article!

  42. Vivien

    Thank you, Richard. I’m glad you specified your name, I didn’t know which one from Peacock, Carter & Associates was commenting here :-)

  43. cyberbuff

    great! simply great. I would go for georgia, btw

  44. Helvetica is pure font perfection…

    This is a great article, thanks.

  45. Agreed Correro – classic fonts for a diverse range of uses. Most of the above (if not all other than Verdana) were originally designed for print media but have seamlessly bridged print and web. Yet typography was long overlooked on the web due to technical limitations – the obvious ones being adhering to ‘web safe’ fonts – however one majour limitation I feel has always been the lack of anti aliasing of html text in Windows even for the crude range of ‘web safe’ fonts available. IE7 and Vista have clumsily tried to achieve this (it does seem there is a greenish hue to any black or gray text, which may just my screen).

    I’m thankful for my geeky yet overpriced Mac.

    But css really has brought he beauty of typography into web pages.

  46. Vivien

    Thanks for you input, Ben.
    What would we do without CSS – it completely changed the way Websites look nowadays.
    Yes, Macs are overpriced, but I too enjoy working on my macbook – iHappy, but iBroke indeed :-)

  47. I am a Verdana, Arial, Georgia fan, in that order.

  48. There is even a documentary about the font Helvetica now – see clips here http://www.helveticafilm.com/clips.html

  49. Vivien

    Thanks, Karin. I’ve seen those clips – liked them a lot. Have you seen the entire movie?

  50. Anon

    Hey Paul, regarding the ampersand in Trebuchet, take a closer look and you will notice that the ampersand forms the letters ‘Et’, which means ‘and’ in French. I am guessing that is why it looks strange to you.

  51. Trebuchet is definitely my favourite :) I’ve never tried out Frutiger though, I think I’d do that ASAP.

    And yeah, Trebuchet does make me feel all Web 2.0-ish.

  52. Thx for share ^_^

  53. Really nice list. Especially nice since you included some tit-bits along with each font making it a nice read.

    Btw, I’m also using Trebuchet MS for my blog….

  54. Vivien

    So, Naser, is it good or bad that Trebuschet makes you “feel all Web 2.0-ish”? :-)

    you’re welcome, Nisan

    Thanks, Goobimama. You do use Trebuschet, in a very small size, which surprisingly is still quite readable :-)

  55. Sighter

    Superb list! I personally like verdana. Wondering what type of font and paper is best for printing for reading on a inkjet printer? Any input would be greatly appreciated!

  56. Vivien

    Sighter, for printing on an inkjet printer, I find it’s better to use at least a 24lbs paper, with Times New Roman in 12pt.
    Any other suggestions are welcome.

  57. jim

    I love this

  58. Great one! Glad to know which are web-safe too. I never remember these things!

  59. Glad you found the article useful, Kristarella. Unfortunately, there are very few web-safe fonts, but there are ways of integrating more “unsafe” fonts in Web sites… I’m planning on writing about that as well in a near future.

  60. Laurice

    LUCIDA GRANDE! :D

  61. I use Georgia and Tahoma a lot myself both for web designs and for documents and graphics. And Arial, of course.

    Great read by the way.

  62. Thanks, Briongloid. Welcome to Inspiration Bit. It’s nice to see that this post still attracts readers ;-)

  63. Ran into your article while looking for a websafe font for my blog.

    I went with Helvetica.

  64. kq76

    I always find it so bizarre that so many people love Verdana while I can’t stand it. I do love Georgia, though, which was apparently made by the same guy. Garamond and Tahoma are other favourites of mine.

  65. Georgia is a beautiful typeface indeed, plus it comes with a nicely designed numbers.

  66. kirpix

    my favori is Trebuchet MS. i things it is very easy and sweet.

  67. I got fired as a senior art director of a large cosmetics comoany for suggesting (how could I have been so foolish???) that 200mb was not enough for a server.

    Still the “settlement” at the tribunal of fair trading ensured that my new business had adequate storage and the company that said 200mb for a beauty company image library storage server was adequate lost the contract long ago. Silly me…

  68. I love trebuchet, lucida and myriad. They look fresh. At some particular sizes they look well defined, and the default spacing between letters is also nice.

  69. Diseño Web, I do agree with you about those typefaces. And I also really liked your portfolio site ;)

  70. Gotham is used for Obama’s CHANGE ad. :)
    I use Avant Garde, Myriad Pro, Trebuchet, and a lot of custom fonts I do using the font’s shape and I play with the font a bit in vector.

  71. Mr. McGeek

    Great fonts, but I’m sort of surprised Calibri didn’t make it on this list.

  72. @Mr. McGeek I guess because not many designers work with Vista ;)

  73. Dey

    Hi Vivien!

    Wonderful post! I’m in the Web Design program at the Art Institute On-line and I searched google with the keywords, “web design font types” and found a link to your blog -above the fold-. I hope you don’t mind but I linked this blog to my E-Classroom as a reference to a Font topic thread.

    You have a way with words, keep up the great work and thank you for educating me on fonts.

    Namaste,
    Dey

  74. Dey

    Oh and I’m a fan of Georgia but I think I’ll take a stroll down Lucida lane after a short stay at Verdana plaza. Trebuchet looks enticing as well. Ohhh too many choices! :D

    Namaste,
    Dey

  75. Dey

    Hi Vivien,

    Just wanted to share this Firefox Add-On… not sure if you already know about it. A classmate of mine, Mary Hagan, posted it in our Lounge Thread.

    It basically tracks the traffic on web-sites via a little status bar at the bottom of your Firefox Browser. I haven’t used the toolbar much yet, but I see potential!

    Namaste,
    Dey

  76. Hi Dey, thanks for your comments here. No, I don’t mind you linking to this post. Good luck with your studies!

  77. I used to be a font addict a long time ago….
    what ever happened to KRIZU + apostrophe.. and the rest of the posse???? :D

  78. Verdana is my Favorite. I use it in all my offline Documentation. I think Its time to relook at the blog now.

  79. Hello, I did a brief translation (spanish) of some parts of your article in this link: http://www.intergraphicdesigns.....o-web.html. I added several links to your site. I also add some info from FontTester.com, BrowserNews.com, etc.

    Si desea ver una traducción de un pequeño segmento de este artículo, visite http://www.intergraphicdesigns.....o-web.html, donde además agregué información de FontTester.com y BrowserNews.com sobre tipografìas para diseño web.

  80. Thanks for the translation and links, Ricardo. You did a great job putting that article together.

  81. Thats a nice article, and a nice site!! Always more likely to trust an article about design, when the website itself is well designed!

  82. Thanks for the kind words, Ali. It took me awhile to find time for designing a new theme for my blog, but I’m very relieved that it’s up now.

  83. My favorite for web are: helvetica, arial, verdana, lucida grande
    and for print: dax, myriad, trebuchet, rockwell.
    i want to have dax and frutiger for free. is there any similar for them?

  84. I’m writing a rather lengthy article on font stacks for SitePoint, and found your article useful and interesting. I will link back to your work in my article. Now that I’ve read this one, I look forward to going through some of your other typographical musings. (And I’ll agree with the earlier poster–lovely redesign.) Nice job all around!

  85. @Syam-Arief You can go to MyFonts, search for Dax and Frutiger, and look for similar fonts, you may find some free alternatives.

    Hi Michael. Welcome to Inspiration Bit. Glad you found my typography-related posts here interesting. Thanks so much for linking to this post from your article for SitePoint. And thanks for the compliments on my blog’s design. Look forward to reading more of your thoughts on iBit.

  86. Hi Vivien. The article’s not live yet. Good thing, because I’ve already tweaked it several times based on info from various pages in your site.

  87. I appreciate the detailed, yet brief, histories on the fonts – thanks! I’ve always liked Trebuchet – it feels modern to me, even if it is over 10 years old now. I think it’s amazing how font choice can alter any piece’s mood – from brochures to posters to Web sites, the font choice sets the stage for how readers will perceive the content.

  88. What I enjoy the most about you Viv is the attention to detail.

  89. Thanks so much, Liesa ;)

  1. Carrero

    Algunas de los mejores tipos de letra…

    Aunque seguro que hay muchas opiniones a este respecto, aquí os resumo las que posiblemente son las mejores 16 tipografías para todo tipo de usos, desde al escritura de documentos hasta el diseño web más avanzado.

    Helvética (también conocida com…

  2. GrabBagg » Blog Archive » Best-Loved Typefaces in Web Design

    [...] is a nice post about some of the best-loved typefaces in web design. Pretty solid list. I didn’t realize that Verdana was such a recently created font (1996). [...]

  3. Most Used Typogrophies In Web Design « venue (ven-yoo): a place for large gatherings

    [...] Source: Inspiration Bit [...]

  4. Links fundet p internettet den 2007-07-09 | Webmercial.dk

    [...] 16 Best-Loved Font Bits In Web Design (tags: webdesign fonts) [...]

  5. novolocus.com » Nice list of fonts

    [...] Nice fonts here. Now if there were some way to push them onto the client… [...]

  6. It's the little things that matter | PureBlogging

    [...] weird gothic calligraphy you’re using. But there’s more to the choice than that. This great post on Inspiration Bit documents the best-loved fonts in web design. And the comments on this Problogger post gave me a [...]

  7. Javorové lístky » Archív » Skripta k webové typografii

    [...] Vista fonty, pořiďte si je. Kochat se můžete údajně nejlepšími fonty roku 2006 nebo 16 nejoblíbeněj­ších v poslední době. Láká-li vás rez a saze, neopomeňte pět grunge skvostů. Inspiraci hledejte na příkladech [...]

  8. klauskomenda.com » Font-families a Web Developer can trust

    [...] VisiBone is another provider of a font survey, conducted amongst 800 systems. Their results can be viewed on one big page on their site. WebSiteWorks combines these two surveys and provides conclusions regarding those findings. In a different article, the are talking in more detail about what they consider the 31 of the most commonly encountered fonts from all operating systems. Vivien also provides a nice summary of fonts which are popular with web designers these days. [...]

  9. Algunos tipos de letras que posiblemente no emplees con CSS » Cosas sencillas

    [...] El CSS nos ha traído muchas capacidades a la Web en términos tipográficos, pero parece ser que siempre esta limitada los mismos tipos de letra, unos 4-5 como mucho. Hay un problema detrás de todo esto, si el tipo de letra que has seleccionado para diseñar una página Web no la tiene el usuario en su ordenador, es sustituida por otra de manera automática, que tiene predeterminada el navegador. Los diseñadores y desarrolladores, se curan en salud y terminan colocando una tipografía que pueda ser visualizada por la mayoría de los sistemas. Por eso la mayoría de las páginas utilizan Arial, Helvetica, o Georgia como sus tipos de letra estándar para hacer más llevadero el tema (dale un vistazo al siguiente artículo 16 Best-Loved Font Bits In Web Design). [...]

  10. Top 10 Graphic Design Blogs

    [...] articles on design are usually very discussion worthy and one article of interest (of many) is her 16 best loved fonts in web design [...]

  11. Websafe Custom fonts in HTML

    [...] 16 Best-Loved Font Bits In Web Design – Inspiration Bit [...]

  12. 50 Typography Resources you must look at! | WebScienceMan

    [...] White. – The Anatomy of Web Fonts: Andy Hume’s article. – Top Ten Web Typography Sins – 16 Best-Loved Font Bits In Web Design – Create a font Part I and Part II : an outstanding article from I love [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on