Typography 101
Written by Kevin Cagno
©2010 Cagno Design Group
Typography is a fancy name for dealing with fonts correctly and using then in an appropriate way. You may be asking yourself why do I need to understand anything about fonts? You just pick the one that you want and use it. Right? It would be nice if it was that simple, but not all fonts are created equal or made for the same purpose. Many programs also allow you to do things to fonts that will make them look bad when you print, or they may not print at all. At the last minute the printer will substitute a new font in place of the one you used. I will go over the basics so you can understand how to get your fonts to behave and do what they are told. This is by no means is an in depth look at fonts. I want to keep you awake.
To begin I need to explain some basic terms. The only reason you need to know these is so you won’t be lost when I use them.
- Type Face = The font itself (Arial, Times, Bookman)
- Font Style = How a font looks, Bold, Italic, Underline, Bold Italic
- Font Family = A Type Face and all of its styles.
Not all fonts have the same styles in the font family. Some programs may allow you to bold a font when it doesn’t exist as part of the family. This can cause a problem when the file is printed on some printers or other output devices. If you use a font such as Impact and then italicize it (impact), it will not print properly and will be substituted with another typeface. The impact consists of one style, normal. When you impose a style on it, it won’t work properly. So how do you know what styles exist in a font family? The only real way to know is to go into the fonts folder and check. If you sort the list by font it will list each style.
Font size is another thing that can be fun to deal with and understand. Fonts are measured in points in a way that can cause some fonts to look bigger than others even if they are the same point size. (See diagram below)
A font is measured from the top of the ascender to the bottom of the descender. Typically a Serif font (Times) has longer ascenders and descenders than a San Serif font (Arial) and the main part of a character is smaller. This makes the type appear smaller when another font of the same size may appear to be bigger. (see examples above) I bring this whole thing up so that you understand that once you have set some type and then you change the font to a different face, you may need to adjust the size. In case you were wondering how points compare to inches, 72 points equals 1 inch. This can be helpful in deciding what sized to use.
As you set type there are some terms that you may want to know. Leading, Kerning, and Tracking all refer to certain aspects of text. Not all programs will allow you to adjust these. I will compare the capabilities of different programs in the desktop publishing section. Leading, pronounced like the metal, refers to the space that each line uses.
It is typically 20% more than the font size. For example if you used a 10 pt font, you would use 012 pt leading. This can be changed in most programs to give your text a different look. Some fonts look better with more space given to each line.
Kerning refers to the amount of space between two letters. It is handled automatically by many programs but can be adjusted by some. As you use larger font sizes, it may need to be adjusted if the font does automatically adjust enough.
The text on the left was automatically kerned so that it looks good. The space between the “T” and “a” was reduced so that it is visually appealing. The text on the right was not kerned and it appears that there is more space between the “T” and “a” than the rest of the letters. However if you draw vertical lines between each letter in the word the spacing is actually the same. This happens with letter pairs such as “Pa”, “Te”, “Va”, and so on. The larger the characters the more noticeable the spacing will be.
Tracking refers to overall spacing of the text. The best way to understand this is to look at the examples below.
The type above was all set using 10 pt Arial. The look of each, often referred to as “type color”, is different due to the different tracking used on each. You can create a nice “airy” look or even a tight dense look depending on the feeling that you want to convey. Type is an important part of most layouts and can set the tone as much as an image.
The last thing that I will bore you with about fonts is more of a caution. You will be tempted at some point to use a bunch of different fonts on the same piece. I strongly recommend against giving into this temptation. It seems like most people have tons of fonts on their computers. When you are designing something you don’t need to use them all at once. (Most should probably never be used) I try to follow a simple rule. It is not profound or very imaginative, but it works. Do not use more than three different fonts or styles unless you have a really, really, really, really, good reason. So you ask, what is a good reason? If you come across one you will know. If you don’t know if it is good enough, then it isn’t.