16 Best-Loved Font Bits In Web Design
by Vivien
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.
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.
- 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.
- 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
Baskerville - designed by John Baskerville in 1757 with an intention to improve the legibility of Caslon typeface designed by William Caslon.
- 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.
- 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.
- 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.
- 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).
- 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.
- Gotham - another typeface designed in XXI century. Gotham’s geometric forms and a large x-height make it extremely readable at small sizes.
- 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”.
- 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 :-))
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?
This entry was posted on Thursday, May 3rd, 2007 at 9:09 am and is filed under typography. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
May 3rd, 2007 at 10:08 am
Great review. Enjoyed reading it. Thanks. Didn’t know Verdana was so recent!
May 3rd, 2007 at 2:01 pm
Verdana has been my favorite for some time on the web. When using a word processor for non digital means I like Tahoma.
May 3rd, 2007 at 3:18 pm
I’m a Verdana kind of guy.
I also enjoy Arial.
May 4th, 2007 at 9:13 am
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?
May 4th, 2007 at 9:26 am
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?
May 4th, 2007 at 10:15 am
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.
May 4th, 2007 at 9:30 pm
Well, my favourites are Trebuchet, Georgia and Lucida. I dunno why
, but Trebuchet gives some kind of a Web 2.0 feel
May 4th, 2007 at 10:28 pm
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.
May 4th, 2007 at 10:33 pm
Well, I am sorry if I’ve sounded sarcastic, just expressed my views there
May 4th, 2007 at 10:45 pm
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.
May 5th, 2007 at 5:26 am
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.
July 7th, 2007 at 4:44 am
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?
July 7th, 2007 at 10:31 am
You’re welcome, Andrei. You can download Universe from http://www.linotype.com/1560/univers-family.html
Each font costs $24 though
July 8th, 2007 at 3:36 am
I LOVE HELVETICA.
July 8th, 2007 at 8:42 am
People like Arial? Arial’s just a crappy ripoff of Helvetica.
July 8th, 2007 at 12:35 pm
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.
July 8th, 2007 at 1:04 pm
Warnock was included with Adobe’s Creative Suite, but certainly not ever included with OS X.
July 8th, 2007 at 1:25 pm
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.
July 8th, 2007 at 2:26 pm
So you are saying my company isn’t using a popular font when they use Comic Sans on their website? I hate my job…
July 8th, 2007 at 2:33 pm
Hey, DIN does not stand for what you say: http://en.wikipedia.org/wiki/D.....Cr_Normung
July 8th, 2007 at 4:58 pm
Julian, check out this link: http://www.faces.co.uk/topfonts/din.cfm
I guess there are different sources for what DIN stands for.
July 8th, 2007 at 7:57 pm
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?
July 8th, 2007 at 9:05 pm
No, no problems with the ampersand, but using Trebuchet MS for body text ie. here in the comments section is just… odd.
July 9th, 2007 at 12:50 am
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.
July 9th, 2007 at 9:39 am
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.
July 10th, 2007 at 2:30 am
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.
July 11th, 2007 at 9:37 am
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.
July 14th, 2007 at 7:52 am
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.
July 16th, 2007 at 10:37 am
Thank you very much, Ashlyn. Your comment made my day
July 16th, 2007 at 12:35 pm
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”.
July 16th, 2007 at 12:48 pm
Thanks for your feedback, outsdr. I’m working on a re-design of this site, taking all your comments into consideration.
July 16th, 2007 at 6:40 pm
Im excited with your article. I will recomend it to my blog for further more…thanks
July 18th, 2007 at 3:40 am
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
July 18th, 2007 at 8:11 am
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.
July 18th, 2007 at 8:41 am
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
July 18th, 2007 at 8:54 am
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.
July 18th, 2007 at 1:22 pm
My best is Gotham I love to use small text letter and it’s best for this purpose
July 18th, 2007 at 1:54 pm
Dekoracje, I can see you love small font-size when looking at your site. Nice home decorations, btw.
July 18th, 2007 at 5:49 pm
Hi Vivien,
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?
I think I agree with Shankar. You can see Trebuchet domination in Verlee’s Blog
Thank you..
July 18th, 2007 at 8:18 pm
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.
July 19th, 2007 at 5:13 am
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!
July 20th, 2007 at 7:50 am
Thank you, Richard. I’m glad you specified your name, I didn’t know which one from Peacock, Carter & Associates was commenting here
July 24th, 2007 at 1:30 am
great! simply great. I would go for georgia, btw
July 24th, 2007 at 3:53 pm
Helvetica is pure font perfection…
This is a great article, thanks.
July 24th, 2007 at 5:54 pm
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.
July 25th, 2007 at 6:53 am
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
July 30th, 2007 at 3:08 am
I am a Verdana, Arial, Georgia fan, in that order.
August 23rd, 2007 at 3:38 am
There is even a documentary about the font Helvetica now - see clips here http://www.helveticafilm.com/clips.html
August 23rd, 2007 at 12:24 pm
Thanks, Karin. I’ve seen those clips - liked them a lot. Have you seen the entire movie?
August 26th, 2007 at 8:35 pm
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.
September 9th, 2007 at 9:14 am
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.
September 17th, 2007 at 7:40 am
Thx for share ^_^
September 20th, 2007 at 2:46 am
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….
September 20th, 2007 at 9:32 pm
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
September 22nd, 2007 at 10:16 am
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!
September 22nd, 2007 at 11:25 pm
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.
January 9th, 2008 at 7:15 am
I love this
January 12th, 2008 at 5:01 pm
Great one! Glad to know which are web-safe too. I never remember these things!
January 12th, 2008 at 6:03 pm
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.
March 5th, 2008 at 10:27 pm
LUCIDA GRANDE!
April 2nd, 2008 at 2:57 pm
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.
April 2nd, 2008 at 3:09 pm
Thanks, Briongloid. Welcome to Inspiration Bit. It’s nice to see that this post still attracts readers
May 12th, 2008 at 5:40 am
Ran into your article while looking for a websafe font for my blog.
I went with Helvetica.
May 21st, 2008 at 3:11 pm
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.
May 22nd, 2008 at 1:15 am
Georgia is a beautiful typeface indeed, plus it comes with a nicely designed numbers.
June 11th, 2008 at 6:04 am
my favori is Trebuchet MS. i things it is very easy and sweet.
June 16th, 2008 at 4:08 am
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…
July 7th, 2008 at 10:33 am
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.
July 7th, 2008 at 11:31 am
Diseño Web, I do agree with you about those typefaces. And I also really liked your portfolio site
July 11th, 2008 at 8:04 pm
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.
July 18th, 2008 at 2:53 pm
Great fonts, but I’m sort of surprised Calibri didn’t make it on this list.
July 18th, 2008 at 5:22 pm
@Mr. McGeek I guess because not many designers work with Vista