As you probably know, there aren’t a lot of options for working with type just straight out of the box. There are at most about two dozen more or less “universal” fonts, and there’s really not a lot of differentiation among them. For example, Times New Roman and Georgia are pretty common on both Mac and PC, and they’re different enough that to many people they’re fairly different, but that makes up about 90% of serif fonts actually in use on the web.

There are a variety of ways to use non-standard fonts on the web: images in place of text, SIFR, Flash, Cufon, and my favorite: @font-face in conjunction with a font hosting service or hosting a web-licensed font yourself.

(I gave a presentation at PodCamp 2010 about web typography. Slides included.)

I won’t get into the how of the different technologies and techniques right now, but I will get into the why of good web typography. The principles are really the same as they are in print: stick with two or three typefaces that work well in a variety of applications and sizes. Pick a headline font and stick with it. Choose a body font that is legible: it should be spaced properly with a good measure (line length).

In general it’s a good idea to stick with the standard font stack for body type and use something unique for the headlines and subheadlines since the standard fonts are already optimized for the screen and have been refined and tweaked and perfected over the years. It depends on the technique you’re using, but using a “fancy” font on the body could really slow the page down. In other words, use the fancy fonts sparingly!

(I know, I break this rule here on this site as nearly everything is set in Theano Didot. It’s optimized [and licensed! and free!] for the web so I think it works just fine. Legibility is a concern when it’s pretty small, so it may not be around forever.)

Finally, make sure you establish a hierarchy (yeah, I talk about that a lot) by making smart use of your fonts with their size, color, and case. It’s also a good idea to work with a scale so everything harmonizes.

Leave a Reply

Your email address will not be published. Required fields are marked *