Let’s face it: the core purpose of all web design is communication. Whether we’re talking about an online ecommerce store, a web presence for a Fortune 500 company, or a profile for a social networking site, typography is a vital component. For most people, typography is simply about arranging a familiar set of shapes to make words, sentences, and paragraphs. Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium.
There are numerous obstacles to the effective customization of typography for the Web — and we’ll address these in the coming pages, which have been extracted from my SitePoint book, The Principles of Beautiful Web Design — but the power of type should be motivation enough to push the proverbial envelope. Not convinced? Pick up a magazine, turn on a television set, or take a walk through a grocery store. You will undoubtedly see hundreds of creative and effective uses of type. It is the substance of branding, the key to unspoken communication, and an essential piece of the web design pie.
In order to unlock the potential of type, we must first understand it. Admittedly, this is no easy task. The minute details of letterforms and the spaces around them have been carefully calculated over centuries of investigation and practice. In the early days of print, every letter of every typeface had to be carved into wood or cast from lead, inked, and then pressed onto paper. This was a handcrafted profession requiring exacting attention to detail. Even though the practicality of this practice has long been surpassed by modern printing methods, many colleges and universities offer classes in letterpress so that future graphic designers can both appreciate the benefits of working with type on a computer, and see the potential for typographic exploration.
My personal love of typography is twofold. As a designer, I enjoy working with type for the artistic aspects of it. I like the voice that different fonts provide, and the expressiveness of typographic collages like the one in Figure 4.1. After all, the root words that make up typography are typos, meaning impression or mark, and grapheia, meaning writing; typography literally means making impressions with writing. As a programmer, I also appreciate the puzzle-like problem-solving tasks that are involved in working with type. The choices of font and color are only the tip of the type iceberg. In fact, the majority of the decisions that need to be made in our work with type involve the space around the letterforms and text blocks rather than the actual type itself. Nevertheless, choosing an appropriate typeface is a crucial step as well.
Warning: This Topic May Be Addictive!
After studying typography for some time, you’ll never look at a billboard, brochure, or book the same way again. You might start snapping pictures of ride signage at theme parks, rather than your kids. Pondering whether the entrees in a restaurant menu are set in Cantoria or Meyer 2 may become more interesting than choosing between the entrees themselves. The study of typography is one that draws many people in and never lets them go! Consider yourself warned.
The history and implementation of type is a topic that has already filled hundreds of books. In this chapter, though, I intend to provide a brief introduction to the world of typography. First, I’ll cover some of the issues with — and solutions for — taking type to the Web. Then, we’ll get into basic typeface terminology, explore some usage guidelines, and investigate the characteristics of different fonts. From our discussion of legibility concerns, to the question of using dynamic headings online, I hope you’ll find this chapter to be practical and inspirational.
If you like what you see here, and would like to go down the rabbit hole a little deeper, there are plenty of online communities for learning about and discussing typography. One of the most highly regarded is typophile.com. The name “typophile” speaks volumes about the nature of this community, and if you have any questions about type or typefaces, there’s likely to be somebody in those forums that can help.
Taking Type to the Web
When it comes to the Web and choosing fonts for text that will be displayed in a browser, it doesn’t matter if you have five, or 5,000, fonts installed; you have to think in terms of the lowest common denominator. In the ’90s, a brief trend saw many web site designers set the text of their web sites to whatever obscure font they wanted, and include on the site a statement like, “This web site looks best in some font, click here to download it,” as well as posting the actual font file on their web site for download. Not only is this approach most likely to represent a violation of copyright law, but we shouldn’t expect site visitors to go to such lengths just to view our sites.
The number of font families that are supported, by default, across both major operating systems is very small. This list of nine font families in Figure 4.2 is commonly known as the safe list. The downside to the safe list is that it doesn’t provide for much variety within each font category. If you need a standard sans-serif font, you have to choose between Arial, Trebuchet MS, and Verdana. For someone who hasn’t been exposed to many fonts, that may seem like a reasonable variety, but for those of us who know the nuances of other sans-serif fonts like Helvetica Neue, Futura, and Univers, using one of the safe fonts can be like using a screwdriver to drive in a nail.