The Principles of Beautiful Typography

Finding Fonts

I've mentioned that you can find fonts on the Web a few times now, but I haven't given you any resources! Now that I've explained all six of the basic font categories, I guess it's about time to tell you where you might find some new ones to add to your typographic tool belt.

Free and Shareware Font Galleries

These web sites list and categorize thousands of free and shareware fonts from many different designers. Some of the designers listed on these galleries have their own web sites, through which they sell other fonts that they've designed. If you enjoy the fonts created by particular designers, be sure to track down the rest of their work. Many web sites claim to offer free fonts, but in my opinion these are three of the best resources:

• 1001 Fonts, at http://www.1001fonts.com/
• DaFont, at http://www.dafont.com/
• Wanted Fonts, at http://www.wantedfonts.com/

Fonts for Sale

Like the free and shareware galleries mentioned above, these web sites promote fonts from many different designers and foundries. But unlike those galleries, none of these sites offer fonts for free. The benefit of paying for a font family from one of these companies is that you'll not only have a complete set of characters, but the purchased fonts often include bold, italic, oblique, and other variants.

• FontShop, at http://www.fontshop.com/
• AGFA Monotype, at http://www.fonts.com/
• Veer, at http://www.veer.com/products/type/
• MyFonts, at http://www.myfonts.com/
• International Typeface Corporation, at http://www.itcfonts.com/

Individual Artists and Foundries

Many of my favorite contemporary fonts come from a handful of individual artists and companies. Most of these web sites have a few free fonts, as well as offering a few for sale:

AEnigma Fonts by Brian Kent, at http://www.aenigmafonts.com/
Brian has developed hundreds of great free fonts. I wish his web site were easier to navigate, but it's still a great resource.

The Astigmatic One Eye Typographic Institute by Prof. Brian J. Bonislawsky, at http://www.astigmatic.com/
Professor Bonislawsky has created many terrific font faces in every imaginable category.

Blue Vinyl Fonts by Jess Latham, at http://www.bvfonts.com/
Like many font designers, Jess started designing fonts as a hobby. His freeware and paid fonts are unique and very well done.

Fountain by Peter Bruhn, at http://www.fountain.nu/
Fountain features some of the best fonts from about 20 different designers around the world. The site also provides very nice freeware fonts.

Larabie Fonts by Ray Larabie, at http://www.larabiefonts.com/
Ray is a rock star in the realm of free fonts. His work is known for having large character sets and being of very high quality.

Misprinted Type by Eduardo Recife, at http://www.misprintedtype.com/
Eduardo is the man when it comes to weathered, worn, and eclectic font faces. His work is unmistakably unique and somewhat twisted.

Pizzadude by Jakob Fischer, at http://www.pizzadude.dk/
Jacob has an admittedly goofy and laid-back style, but has cranked out over 500 handmade fonts since 1998.

Choosing the Right Fonts

Even if you understand all the technical aspects of letterforms and typeface categories, and have access to all the fonts in the world, you can still have difficulty choosing the right ones. That's because font selection is based just as heavily on artistic license and emotional association as it is on technical issues. So, where do we begin?

In order to start your quest for the perfect font, you should first define the feelings you're trying to evoke in the members of your target audience. Are you trying to show that the company the web site represents is hip and young, or would you rather portray an aura of steadfast wisdom? Do you want to create something themey, like a Luau or a Mexican fiesta, or are you trying to convey a more formal identity? By asking yourself these kinds of questions, and thinking about fonts on an emotional level, you should be able to decide reasonably easily whether a given font is appropriate for your application. If you don't think you could answer those questions about a particular font, make up your own questions. The fact is that you've probably seen billions of letters and millions of words in your lifetime -- you just feel some emotional connections on which you can base your font choices. Think back to the logos, the album covers, the textbooks, and the signage you've seen. How have those typographic elements affected your perception of the entities they represent?

Now, let's take that idea and work backwards, using a generic entity like Joe's Restaurant. The font that you choose for this design will play a crucial role in the way potential diners perceive the attitude and identity of the restaurant. Take a look at Figure 4.25, and try to choose some fonts that make you think of a casual Italian bistro. Okay, now pick fonts that suggest a metropolitan restaurant serving five-star cuisine. How about a tacky dockside bar? There's no right answer for any of these scenarios, but there are definitely some fonts that just don't work in each case. First, try to narrow the field down to a few good candidates, then try to refine your choices again, until you find one that works well.

Remember that there are no bad fonts -- just inappropriate ones. While a particular font may not work for one purpose, that doesn't mean it can't be used for another. Just try to keep an open mind, and if you can narrow the field to a few possibilities, try asking a friend or coworker the question "Which one makes you feel more adjective?" replacing adjective with the feeling you're aiming to elicit.

Finally, when you're choosing fonts, it's important not to choose too many. As a rule of thumb, try not to use more than four different fonts in a web site design. Also, try to avoid combining two different serif fonts or two different sans serif fonts in the same project.

Setting Text Size

The size of text is, and always has been, a confusing topic. Over 300 years elapsed in the history of printed type before the French typefounder Pere Sebastien Truchet introduced the point. Although points have been the standard units of measurement for typography ever since, the exact size of this "standard" unit has changed several times throughout history due to differences between the English and French units of measurement. It wasn't until the rise of digital typography that the official size of the point was set to 1/72 inch.

While the size of type in the print world is measured by this absolute value, the size of type on the Web must be relative to the resolution of the viewer's monitor. In CSS, the pixel (px) is the smallest?and best?relative unit for setting the size of text. Monitor resolution is set in pixels, as are the dimensions of all display graphics, so it makes sense to control text size with pixels, as well. So, why doesn't everyone set web text sizes in pixels? Well, mainly because of Internet Explorer 6. Most browsers, including Internet Explorer, have an option that allows users to change the overall display size of the type on a web site, as Figure 4.26 shows.

This control adds a major boost to the usability of the Web for people with visual impairments and users of low-resolution displays. In most browsers, the text size control works flawlessly, but in Internet Explorer 6, the settings in the Text Size menu will not affect a web page whose text is set in pixels. Why not? Because the developers of IE believe that the pixel is an absolute unit that should not be resized. Version 7 of Internet Explorer has continued the tradition of refusing to resize text set in pixels, though it does offer a page zoom feature that may constitute a good alternative for some users. Even so, setting font size in pixels cannot be recommended.

Note: What's an em Again?
I gave a brief definition of ems in our discussion of alignment earlier in this chapter. An em is a relative unit of measurement; one em equals to the vertical size of an element's text.