Web Substance Meets Style

The other day I read a great tongue-in-cheek post on font choices over at Top Ten Blog Tips and it got me thinking. As a web designer, I don’t even think twice about the fact that I have approximately 10 fonts to choose from for my sites. This is just a fact I accept. Which is odd, when you think about it. With all of the advancements and enhancements to the internet and design since the 90s, why are we still stuck with the same old fonts?

CSS is over 10 years old, and back in 1998 CSS2 described a way to link to fonts from style sheets. The problem at the time, however, was that neither Microsoft nor Netscape chose to use the accepted TrueType format. Instead, they each picked their own format and the idea of using web fonts died.

That’s not to say there aren’t ways to change the fonts in your design. You can carefully select a font and go to the trouble of ensuring it is pixel-perfect then rendering it as a background. Or you can embed your font, to be downloaded by the reader’s browser. Or you can use a third party tool to convert your fonts to SWF or to some other web technology. There are problems with these solutions, (printing, load times, browsers, etc.) which is what keeps most designers from using them.

There are, however, ways you can spice up your fonts and your limited font choices.

Below is a list of five things you can do to make typography work for your site:

1. Get inspired. Check out CSS Zen Garden. Select from the different design choices and see how these brilliant designers use fonts to their maximum potential.
2. Consider using overlooked fonts. The article 8 fonts you probably don’t use in CSS but should will point you in the right direction.
3. Mix it up. Using a combination of fonts and their styles in your design for different elements will help break up the monotony. Web-Betty Design uses 3 different fonts, in a variety of ways, to keep things interesting. (Mixing it up, however, is NOT a license to use every font you can on one site. 3 is a good number.)
4. Understand fonts. While Ben’s article was tongue-in-cheek, he brings up very valid points regarding font choices. Go back and read them.
5. Go ahead and use an image. Using a small .gif or .jpg image for banner or headers is not a bad idea to get that funky font. Just be careful of size and overuse.

(If you are looking for even more, check out my Delicious ‘Font’ Tags.)

At the end of the day, I actually wonder if it’s really so bad that we don’t have more font choices. Given the explosion of blogs and websites in the past few years, do I really want non-designers to have the ability to create sites using any crappy font they stumbled across? I think not.

Trackback URI | Comments RSS