Hi,
What fonts could be considere the must have fonts for web design?
What are the most common fonts?
Thanks a lot!
Yes, I agree, you must have fonts for web design. 
All you can really hope for is that the end users have fonts on their computers—any fonts! And you need to plan for situations where they might not have the font you’d really like them to have. It’s no good using some fancy-pantz font you may have on your computer to design a site if the end user doesn’t have it.
Of course, that’s where @font-face can come in, as you can now provide fonts that users download when they download your site. However, it’s a bit buggy and unreliable, so the best solution is to find a good [URL=“http://articles.sitepoint.com/article/eight-definitive-font-stacks”]font stack of fonts that look acceptable with your design and specify those fonts in your CSS, hoping that most of the site users will have at least one of those fonts.
The thing about web design, unlike print design, is that it largely relies on the fonts that your visitors have installed on their computers.
(Yes, you can use @font-face, sIFR or various other technologies to apply other fonts, but these all make more work for you, limit you in terms of what fonts you are allowed to do this with, have the potential to make your website run slowly, and aren’t guaranteed to work for everyone anyway)
The fonts that pretty much every Windows user will have installed are: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS and Verdana. There are plenty more fonts that are very common, but not quite at 100% coverage.
(Generally Macs have different fonts.)
That doesn’t mean you have to limit yourself to those fonts, though. As long as you don’t mind your website using different fonts for different people, you can specify others. For example, you might have
body {font-family:Calibri, Arial, sans-serif;}
which means that anyone who has Calibri installed will see it in that font, anyone without Calibri but with Arial will see it in that font, and anyone with neither will see it in their default sans-serif font. You can put as many fonts as you want in that list, although you’re unlikely to ever need more than 3 or 4.
Out of all the fonts listed there, the ones that I would suggest never using on a website are: Times New Roman, because it’s ugly, not great to read, and makes it look as though your site was last developed in 1997; Comic Sans, unless it is principally aimed at children under the age of 10; Tahoma, because it just isn’t quite as elegant as Verdana, and it doesn’t have an italic face, so if you use italics at all, you end up with something that looks quite scrappy.
The only fonts in that list not installed on Mac OS X are Arial Black and Lucida Sans Unicode (the OS X system font Lucida Grande is close-ish). Though that’s not to say fonts of the same name will display identically across platforms.
See: http://en.wikipedia.org/wiki/List_of_typefaces_included_with_Mac_OS_X
Not correcting, Stevie, just expanding. 
Thank you all very much for your comments!
Now, is there a set of fonts that a designer should have as part of its tools?
Do you limit yourself with the default fonts that come as part of the operating system and your editor program or do you try to buy new ones when possible? If yes, which ones do you recommend that fit in most of your projects?
I’m talking about fonts that can be part of your design as graphics if used for the web, I’m planning on buying some fonts for my daily projects.
Thanks a lot!
I really like Colaborate and Gothic Pro, as well as Helvetica sometimes.
Arial, Comic Sans MS, Courier New, Georgia, Impact, Tahoma, Times New Roman, Trebuchet MS and Verdana are the must have fonts as those are the nine fonts that just about everyone is guaranteed to have. You pretty much must use one of those nine as your fall back font for when your visitors do not have whatever other font that you decide you prefer to use.
That you have no control over what fonts your visitors have available beyond those nine is the reason why you need to set up a font stack for your web page specifying different fonts in decreasing order of preference where you hope at least most of your visitors will have one of the better alternatives.
I have a ton-lot of fonts on my machine that I select from for headings and such using Cufon (@font-face is, as Ralph says, still too buggy in some browsers for me to rely upon), but that’s about it. Basically, I use the Windows fonts Stephen listed, plus the Vista fonts, plus salting in a few Linux and Mac fonts for those audiences. It’s not a great solution, but unless you want to rely on as-yet buggy @font-face replacement techniques, it’s a good solid baseline solution.
(Edit: The Lucida family of fonts is also a good one to add to your stacks, as they have pretty fair market penetration, but you have to provide more ubiquitous fallback fonts for the 10-20% of users who lack them.)
(Edit again: Ralph, thanks for the link. )
As a user of Mac OS X, I definitely warm to sites that use Lucida Grande. It’s reasonably close to Verdana in width, with taller ascenders, and may be a good choice for preceding Verdana in a stack if you wish to seduce Mac users. I’ve not liked the rendering of Lucida Sans/Lucida Sans Unicode in Windows though, so have avoided these.
For anyone designing on a Mac, forget Helvetica Neue. The BBC put this top of the stack in their 2010 redesign and then removed it due to rendering problems where the font has been present in Windows. They switched to Arial.
Thank you for that link indeed, Ralph! It’s one of the things I’m always struggling with somehow to get the right Font Stack! :tup:
suggest everything that comes to the OS by default.
Thank you all very much! Very good info!
There’s a font I love, and have used it now and then when I Gimp stuff: it’s called Good Dog and so far the biggest drawback with it is the lack of euro symbol. Well that and like comic sans, it’s not very readable at small sizes, but I only use it at large sizes like 24+.
When looking at fonts to buy, check that it has ALL the characters you will be using, because many of the free fonts only cover some basic ascii. If you’re paying for a font, it had better have a wide range of characters. Greek, math, everything. I except FREE fonts to be a bit retarded. If I’m paying for it, I expect professional-level.
Ahhhh web fonts… What a great way to give yourself a headache 
For the body, I like to keep it simple and use a clean sans-serif (Arial, Helvetica or Lucida Sans).
Calibri is a fantastic font but can’t be depended on to be available on anything (the OS) that wasn’t produced before MS Vista. I suppose you could put the Calibri font on your site and then use @font-face to ensure that it works. I haven’t tried that yet.
Here’s a nice font stack resource to refer to: [link]
I’m really excited about the latest resurgence of web fonts via various sources like Google and other forges because although I think Arial/Helvetica makes a great body font, it’s nice to use a font with a little pizazz for your headlines and call outs. I’m looking forward to the day when we can use a decent font (licensed or not) like Gill Sans or Frutiger or even a decent serif font if it reads well and works with the design.
One of my major beef’s with the typical font-family: bla, bla, bla; declaration is that as the fonts get bigger (for headlines and sub heads) they tend to distort however and get ugly however, I’ve found that with sIFR or [URL=“http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/”]@font-face the fonts actually don’t seem to distort when I use them at a larger size.
Until we get some decent fonts for free of licensed, I’ve been using sIFR to render decent fonts but because sIFR relies on JavaScript and Flash you’re not going to get 100% coverage so you have to make sure that your fallback fonts are similar.
- Personally, I don’t like Verdana… I think it’s a poorly proportioned.
BTW: Don’t kill yourself trying to get absolute consistency between fonts using the typical font stack declarations (font-family:Helvetica, Arial, sans-serif;). You’ll get close but if your a designer with any sort of traditional typographical background you’ll be disappointed and it’s because of something nobody talks about; the differences in the way the OS renders the font. Windows uses subtractive rendering and Mac uses additive rendering which means that fonts will be skinny or thinner on PC’s and a little chubbier on the Mac.
Wow! a lot of good information, I now have a better understanding about all of the options available.
Very good article ralph.m.
Thank you all very much!
Some personal favorites of mine are Helvetica, Europa and Klavika (Facebook logo font)!
Cox, it’s a good list, but none of them are free, and only one, Helvetica, has any real market penetration. I’d use any of them in an appropriate design, but they have to be backed by more ubiquitous fonts. (I imagine you already know that, just making the point for the reader who might need it. )
No, they’re not free. Not a great deal of use for Klavika, I often just use it at the bottom of emailers ‘Join us on Facebook’ sort of thing. Europa is a good one, I believe Marks and Spencer use it. You absolutely right, Helvetica certainly has impact!
Arial,courier news,century Gothic are best by my point of view for the web design fonts
these are universal accepted fonts
i do quite like Helvetica but i find it a tad overused.