Selecting and Using Typefaces and Fonts For Print Work and Websites
by Joelle Steele
Many years ago I worked as an illustrator for an advertising agency. This was back in the days when cut and paste actually involved the use of scissors and glue! This was also back in the days when using a typeface (now commonly referred to as a font) meant going through enormous books of typefaces (some books were almost 3 feet wide), selecting a typeface that fit the job, carefully tracing the letters you wanted onto a piece of tracing paper spaced exactly as you wanted them to appear, having the font house prepare a velox (your letters on photographic paper), and then pasting that velox into place on the mechanical board for the ad or brochure or whatever you were working on at the time. What a lot of work!
That was then and this is now. Things have really changed. Want a font? There are thousands of them that you can purchase and have available at your fingertips, literally. I have more than 8,000 of them! Just a few keystrokes and you’ve mastered font selection. Well, not really. Being able to select from numerous fonts is great, but selecting the right font is another story entirely. Most people tend to go font crazy and select way too many fonts for their documents, books, brochures, and websites, and all too often at least one of those fonts is almost unreadable. They may additionally select fonts that do not really fit with the style of their business or the products and services they sell.
Let’s get a better understanding of what fonts are, and how to select and use them for both print work and Web sites.
Font vs. Typeface
While the words “font” and “typeface” are used interchangeably these days, there is actually a difference. The typeface is the design itself, such as Arial, Times Roman, Galleria, Helvetica, Imago, etc. The font is the collection of variations within each typeface design, such as bold, italic, bold italic, and normal. But there can be many more. For example, the font collection for the Garamond typeface might include such variations as Garamond Bold, Garamond Narrow, Garamond Light, Garamond Small Caps, Garamond Italic, Garamond Wide, Garamond Extended, Garamond Bold Italic, etc.
Serif and Sans-Serif. Fonts are further defined by whether they have small horizontal or curved lines at the tops or bottoms of the vertical lines in a letter. The ones with the lines are called “serif,” and the ones without the lines are called “sans-serif” (“sans” is French meaning “without”). Arial and Helvetica are sans-serif, while Times Roman and Garamond are serif typefaces.
Bitmap Fonts. Each character in a bitmap typeface is composed of a dot pattern and comes in a particular type size (10 pt, 12 pt, etc.). Bitmap typefaces that are created in this way are always the finest quality and appearance, but to have a full range of bitmap type sizes for each would take up an enormous amount of room on your hard drive. As a result, font generators are used to allow the creation of the bitmap typeface in different sizes as you need them.
Scalable Fonts. Scalable fonts are typefaces that are processed by a font scaler that automatically creates the typeface in the size you want it as you need it for either displaying onscreen or printing out. This eliminates the need to store all of the different sizes on your hard drive. There are two main scalable fonts: PostScript and True Type.
PostScript Fonts. These are Adobe’s font technology. They come in Type 1 and Type 3 format. The fonts that are most commonly used are the Type 1 format which come in two files, outline and metric (which dictates the font characteristics of width, height, etc.). If you are on a PC, Windows distinguishes the two files with the extensions PFB (printer font binary) and PFM (printer font metric). The Type 3 format is not as common, and it is used to create more complex designs and can also take the form of a bitmap font.
True Type Fonts. These fonts are a result of Apple and Microsoft font technologies, and these fonts were originally included with earlier version of Windows and Mac OS. There is really no discernable difference between True Type and PostScript, however the True Type font has greater flexibility in its design potential. Today, True Type is the most common font format on both Mac and Windows, although both Apple and Windows allow for the usage of Adobe’s Type 1 font format.
Typeface Sizes
Typefaces are measured in “points” starting from the top of the tallest capital letter in a typeface to the bottom point of the longest descending letter in that typeface, such as the end of the “tail” of a “g” or a “y.” A font that is 10 pt is smaller than 12 pt, and a 26 pt is smaller than a 56 pt, etc.
This system of point measurement was first standardized around 1737 by French typesetter and engraver Pierre Simon Fournier, who based his point size on the French Royal Inch or “pouce” (a pouce being 2.707 cm or 1.066 inches and different in size from the Imperial Inch, an Anglo Saxon typesetting system). In Fournier’s system, there were 72 points to the pouce. Fournier died in 1768, and twelve years later, his system was further refined and standardized by Frenchman François-Ambroise Didot (a printer from the Didot family of printers, typesetters, and engravers), after which the system became known as the Didot Point System. In Didot’s system, 12 points was equal to one “Cicéro” (a type size named after the ancient orator Cicéro and equivalent to 0.1648 in). Ergo, a Didot point was 1/12 of a Cicéro or 0.013733 in.
During the latter part of the 19th century, American printer Nelson C. Hawks proposed the use of his point system which he called the “American System of Interchangeable Bodies.” It was based on the “pica” which is also 12 points (4.233 mm), a point being approximately 0.3514 mm or 0.01383486 in. However, Hawk’s 12-point pica was slightly smaller than the 12-point Didot, which caused the Didot to be nicknamed the “fat point.” In 1892, about five years after its introduction in the United States, Hawk’s point system had become the national standard in the United States and Great Britain. It is this system that has since been developed and refined by Adobe Systems into the point system that is most commonly used today in computer fonting. In this system, there are 72 PostScript points to the inch, which makes 1 PostScript point equal to 0.013888888888 inches or 0.352777777777 mm.
However, today there is some talk of changes with regard to using the point measurement system at all. Some countries, notably Japan and Germany, have been abandoning the point system altogether in favor of a metric-based font measurement system. If this metric system is implemented by the United States, Great Britain, and other countries, it would eventually eliminate entirely some of the size discrepancies that occur when using European and American fonts, in which a 10 pt font in one system is much smaller than a 10 pt font in the other, making such a measurement system inconsistent, and therefore unreliable.
Font Names
Fonts were originally named after the people who designed them, and that is often the case with fonts that are designed today. But many of the most commonly used fonts today are named for typesetters of many years ago. For example, the Garamond font is named after 16th century typesetter Claude Garamond; Adobe Jenson is named for 15th century typographer Nicolaus Jenson; Caslon is named for early 18th century British engraver William Caslon; and Bodoni is named for 18th century typographer, Giambattista Bodoni. Some modern designers whose fonts bear their names include Frutiger, Lubalin, Zapf, and Gill.
Other font names are related to the origin of the font style, such as Trajan, which was developed by Adobe and based on the 1st century AD engraving on Trajan’s column in the Roman Forum. The ornate fonts with names such as Blackletter, Cloister, and Fraktur are old medievel European fonts that were once everyday typefaces but are now grouped in with “fancy fonts.” Sans-serif fonts Helvetica and Swiss are very similar, and rightfully so since Helvetica is just an old name for Switzerland.
Font Similarities
You may have noticed that there are fonts that look like each other but have slightly different names. For example, there is Times Roman and Times New Roman or Courier and Courier New. Then there are fonts like Galleria and Gallery. Galleria is a Corel font and Gallery is a Bay Animation font. It is hard to tell many such fonts apart because the differences in appearance may be very subtle, or the differences may only become apparent when you try to apply an attribute to the font, such as boldfacing or italicizing, or when you try to use the small caps function.
Font Attributes
A font attribute is a characteristic of the font that you change or add in order to make your fonts look the way you want them to appear. To do this, you may want to italicize and/or boldface a font, adjust its kerning, put a drop shadow behind it, or give it some color — or some combination of those attributes. You may also want to use a small caps function or underline a word here or there. In most cases, adding these font attributes should not cause you any problems, but with some fonts the changed attributes may not look as good or as readable as you would like them to be. In that case, you may have to change to another similar font and test these attributes on that font to see if the result is improved.
Fancy Fonts
Fancy fonts are so-called because they are ornate or unusual in some way and deviate from standard letter forms with which we are most familiar. In short, they can be extremely beautiful and unique and may make wonderful logos or book cover titles, etc., but they would be extremely difficult to read if they were used for the text in a magazine, book, or on a Web page. As a result, fancy fonts should be used with the greatest discretion, because when you are typesetting anything, your first priority is always to make it readable — no matter what.
It is not unusual to have to adjust the kerning — the spacing between the letters — with many fancy fonts. In addition, it may be necessary to make the initial letters much larger in order to make them appear more like upper case (capital) letters. You may even have to adjust a letter here or there down or up a point or two in order to satisfy your personal aesthetic tastes.
Fonts on the Web
It may be tempting to want to use some beautiful old fonts or some fancy fonts on your Web site. While many computer users have lots of fonts loaded on their computers these days, there are still many others who do not. In order for your font choices to show up on your Web site visitors’ computers, they have to have your fonts on their systems. Since this might not always be possible, and since the results can be disastrous and completely unreadable if they do not, it is best to stick with some fonts that are on almost every computer, such as Times Roman, Verdana, Trebuchet, or Arial. If you want to use some fancy fonts in banners or headlines, make the banner or headlines in a program such as Illustrator or Photoshop and then import them into your Web design software as graphic images in .GIF format. That is how you get around the problem of a visitor not having your chosen fonts on their machine.
Fonts that Fit
With so many fonts available, how do you decide which ones to use? Narrow your choices to one fancy font for a logo or headline, and no more than two other plain fonts for contact info and descriptive text. Make sure that the text fonts are easy to read and that all of the fonts you select match the type of products or services you sell or the subject matter of the book or CD you are designing. For example, a lovely script may sell something like antique clothing, but it would look completely out of place in an ad for automotive parts. Also, when you are designing things like business cards, make sure that the fonts you select will look as good on the tiny business card as they will look when enlarged on something bigger like a brochure or even bigger as on a sign for a storefront or a vehicle.
In general, and whenever in doubt, keep it simple to ensure that the fonts you use in your design will be both attractive and easy to read.
This article last updated: 01/12/2014.
