Web Fonts: The Good and the Bad
There are a lot of fonts out there… A LOT. Relatively few of them, however, are considered “web safe”, because users have to have the font installed on their machine to have it display right. Many fonts come bundled with operating systems, and sometimes, web browsers. They all have their pros and cons, but there are some that, in my opinion, should be avoided in favor of other alternatives.
Serif Fonts
Serif fonts get their name from the little “extras” on the letters; the tails and the other decorations ending the letters’ strokes.
The typical default font you see around is Times New Roman. Now, there’s nothing wrong with this font, or any of them for that matter. The biggest problem I have with this font is its overuse. If you open up a new document in Microsoft Word, Times New Roman is the font you start typing with. Many people don’t change this, so most printed items you see have Times New Roman. Usually if you see things repeatedly, you will get sick of them, no matter how good they look. So to me, nothing says “I put almost no thought into this design” than sticking with the default serif font in most web browsers.
As an alternative, I would suggest using one of the following serif fonts:
Georgia still has the “classy” look of Times New Roman, but is different enough to tell that it’s not.
The next font isn’t considered a “web-safe” font, but I love to use it for image design, where you don’t have to worry about whether or not your viewers have the font you want to use: Adobe Garamond.
Sans-Serif Fonts
If serif fonts have the decorations on their letters, then sans-serif fonts are without them. These are usually known as the “plain” fonts, but that doesn’t to suggest that they are any less useful.
Another default font, Arial is seen everywhere and can be easily spotted. I recommend this article on How to Spot Arial to help pick it out of the pack, they do a great job breaking down fonts explaining how to look for the differences. Arial is a nice font, but is overused, as it’s most browsers’ default sans-serif font.
For alternatives, I’d recommend one of the following:
Helvetica is becoming more widely used with the “Web 2.0″ design “revolution”, but still seems “fresh enough” to stand out a bit.
There are several other sans-serif fonts to pick from, so here’s a look at the basic ones:
And finally:
Trebuchet MS is one of those fonts that seems to be a sans-serif font that has some serif qualities: take a look at the little tail on the lowercase “L” or the tail on the lowercase “G”. But, it’s a great font if you want a serif font with a little “class”.
Headline Fonts
These are the big guys, and there’s really only one “web safe” and that’s Arial Black. (I won’t even talk about Impact, just please avoid it).
I can’t begin to tell you how much I don’t like seeing Arial Black used as a headline. Sure, it’s big and bold, but it just seems a bit to “blocky” for me. Not too much I can say on the subject, but I would recommend adding some extra weight to whatever font you are using to use it as a headline, before resorting to Arial Black.
Oh, and if you’re looking for a big font to use for some image design, one of the many I recommend is Futura:
And finally, the other fonts:
Other Fonts
You’ve seen it everywhere, and you’ve probably used it too. I have to ask you… please stop.
This is the typical “fun font”. I don’t really enjoy Arial Black, but I loathe Comic Sans. It just looks awful on the web and stands out like a sore thumb. If you are going to use Comic Sans as a body font, you may as well say, “don’t take me seriously”.
There really aren’t any alternatives to Comic Sans for the web, but if you want a “fun” font for any other design, I recommend checking out 1001fonts.com and picking out a good one there. And if you hate Comic Sans as much as I do, give ban comic sans a visit.
That’s all from me and my thoughts on web fonts. Basic lesson, just don’t use default fonts. Mix it up a bit.
Cheers.