Type Fundamentals for Nondesigners
By Molly E. Holzschlag
You know all about the <font> tag. You've tried CSS on for style. And naturally, you can create a good-looking, well-optimized Web graphic. But how much do you know about the fundamentals of typography?
Good type design can breathe more life into your sites. Although many graphic artists understand the importance of type, and have studied it extensively, many technologists have never been exposed to typographic concepts.
Fully understanding typography requires careful study of terminology and techniques. This month, I'm tossing Web-specific issues out the window and focusing on the primary typographic concepts from a designer's perspective.
Type Categories, Families, and Faces
There are so many different kinds of type that they've been grouped into sensible containers so that we can keep track of them. The following are the three main typographic groupings:
Category. A type category is the master group or family. Think of this as a typeface's ethnic heritage. For example, I'm of Slavic descent, which genetically predisposes me to certain physical traits such as body type and skin color. Every typeface has a heritage, too. The master family from which a typeface descends influences its physical attributes—its shape, line, and form
| Category |
Families |
| Serif |
Times, Century Schoolbook, Garamond |
| Sans-Serif |
Helvetica, Arial, Verdana |
| Monospaced |
Courier, Courier New |
| Script |
Nuptial Script, Boulevard, Signature |
| Decorative |
Whimsy, Arriba!, Bergell |
Family. Within my ethnic group, I'm identified by a specific family identifier found in my last name, Holzschlag. The name of the family to which a typeface belongs is analogous to a human family name:
| Family |
Faces |
| Times |
Roman, Italic |
| Arial |
Regular, Bold Italic |
| Courier |
Regular, Oblique |
| Whimsy |
Regular, Bold |
Face. Carrying this metaphor into the personal realm: My face, although similar in feature to those of my ethnic background and certain members of my specific family, is also unique. A typeface is a unique font within a category and family group.
On the Web, the word 'font' is often used interchangeably with 'typeface,' but in fact, they represent different things. A font is the technical term used to describe the physical component of type design, while typeface refers to the visual features of the type. I have a tendency to use them interchangeably when discussing Web design, but it's an important distinction that I should make more effort to observe:
This list of familiar font categories and families gives you a look at some of the most commonly used type.
Type categories include the following:
Serif. This is a familiar standard group identified by smaller strokes or flourishes used to embellish individual letters.
Sans-Serif. A group common to Web design is the sans serif category. 'Sans' means 'without' in Latin, so these families tend to be rounded and have no flourishes.
Monospaced. Each letter in a face occupies the same amount of space as every other. This is often called a typewriter font, because it resembles the evenly spaced type of those old-fashioned contraptions.
Script. This category includes all families that resemble handwriting.
Decorative. Sometimes referred to as Fantasy, this group has special decorative features such as dots, strokes, and other designs that are applied to the families and faces.
There's another type category worth mentioning. It's known as Symbolic or Dingbats. This category contains fonts that are either pictographic or that have special character sets, such as those used for languages other than English.
Well-known families, and their available typefaces.
| Family |
Faces |
| Times |
Roman, Italic |
| Arial |
Regular, Bold Italic |
| Courier |
Regular, Oblique |
| Whimsy |
Regular, Bold |
Many designers spend their entire lives learning how to design with and create type, illustrating type's power as a design element. Choose the right type, and your work will have the impact you're after. Choose a clashing or inappropriate typeface, and your work will be unattractive, ineffective, or worse, boring.
Form
Very often, how light or heavy, wide or narrow, stooped or straight we are depends largely upon our heritage or the way we were raised. This finding is true of type, as well.
Typefaces have specific attributes. These attributes are referred to as form. Form specifically relates to the shape and direction in which a given typeface is presented, and includes weight, width, and posture.
Weight. Some typefaces are dark and heavy, others, light and slender. Still others are of 'average' build. Type weight influences the way faces appear. Numerous weight classes exist, including the general classes with which you may already be familiar: regular, bold, and light. Regular is the average weight class, simple and unadorned. Bold is heavier and slightly wider than regular typeface and is used to emphasize text. Light typeface is slender, and as its name implies, lighter than regular typeface. It also has a subtler impact than regular or bold forms and can help achieve a minimalistic look.
Width. Typefaces can have a variety of widths. The two most common type widths, which are somewhat self explanatory, are condensed and expanded. A condensed, or compressed, form has a tighter letterform width than the standard version, and an expanded, or extended, typeface is wider than the standard version.
Posture. My mother's voice saying, 'Stand up straight, honey' still echoes in my ears. She hated the way I slouched. Of course, I thought I looked cool. Posture conveys a great deal, making a word, phrase or heading seem active or static, serious or whimsical.
Type posture refers specifically to the angle at which the type is set. Italic type, as you know, slants to the right and, like bold, emphasizes text. Oblique is a similar, but slightly more rigid, electronic type form.
Type Size and Proportion
Another consideration when working with typefaces is their size and proportion to one another—and to other elements on a page.
Type is measured in a variety of ways, including points or pixels. Point measurement is based on print measurement, whereas pixel measurement uses a computer's 'picture element' standard.
Web based-type has limitations on size. The differences in screen resolutions, platforms, and browser rendering capabilities mean that there's a lot of variation in the way type is displayed on a screen. So while size always matters, Web designers have their work especially cut out for them when they try to use markup to work with type.
The proportions of any given typeface compared to another are important. Proportional relationships help indicate what role each typeface plays on a page. Larger type is used for headers, medium sizes for body text, small sizes for notes, mailto:, and less-emphasized information on Web pages such as copyright and related legal notices.
Orientation
The direction in which your typeface runs significantly impacts the way the type is perceived. Type direction is referred to as orientation. Standard type runs horizontally, but type can also be vertical, reversed, upside-down, or rendered in a shape. Type orientation can affect the tone of your message.
Example:
Horizontal type is more stable, involving little or no movement. That's why it's used as body text. When designing for impact, however, you should think about pursuing other orientation options. Type orientation can provide a sense of energy and intrigue.
Leading
Typography also concerns itself with the space between lines, called leading (pronounced ledd-ing). In style sheets, this is referred to as line height. How close or how far one line is from another influences readability tremendously.
18-point type with 18-point leading is natural and easy to read. 18-point type and 10-point leading make this type impossible to read.
I've set 18-point type with a leading of 18 points. You'll see that this appears to be a natural amount of space between the lines of text and is easy to read.
As a general rule, leading set close to the type's own point size is suitable for body text. In the middle. I've reduced the leading to 10 points, but kept the type size steady at 18 points. The text becomes impossible to read. If I set the leading at too great a distance, as in the bottom, readability is also affected. Using unusual leading for impact is effective in short sections of text such as headers or sidebars. However, in body text, avoid leading that's too far from the normal range.
Kerning and Spacing
Kerning is the horizontal space between individual letters within a font. In normal settings, you'll notice that letters touch one another and this can sometimes interfere with legibility. This occurs frequently with serif fonts, although it can affect any font.
Kerning lets a typesetter adjust this space. Doing so requires accessing information contained within the font. This information is stored in what is referred to as a kerning table. Kerning tables contain mathematical information related to the units of each letterform within the font. To access kerning tables you must use a software program with this feature, such as Adobe Illustrator.
Spacing is the horizontal distance between letters, outside the font. In other words, you don't have to access the kerning table to set a letter farther from or closer to another. Spacing affects the entire word or phrase you've selected, unlike kerning, which changes only the spacing between individual characters.
The problem for Web designers is that kerning and spacing cannot be specified with HTML. CSS2 does offer some letter spacing control, and of course you can always set type with an imaging program such as Adobe Illustrator or Photoshop, which have options for letter spacing.
Combining Weight for Contrast
In the not-too-distant future I promise a typographic follow-up in which I'll discuss more complex issues in type design such as combining color and typeface. But since you've got the fundamentals down now, here are some tricks that can enhance your pages right away.
Let's start with combining weight to add interest to headers. Open your favorite imaging program (as long as it has some typographic options) and follow along with me. I'll use Photoshop for this example.
Step 1. Create a new file, giving yourself plenty of room to work. I made my file 400 x 100 pixels, which could conceivably work as a graphic header for a Web page.
Step 2. Choose background and foreground colors.
Step 3. Select the type tool, and then choose a font. Be sure to choose something that has a normal and a bold option available. I picked Helvetica.
Step 4. Type and set the word 'combining' in a size appropriate to the canvas. Set to normal weight.
Step 5. Now, type and set the word 'weight,' this time using the same type size and font, but set the word to bold weight. Nudge it up alongside the first word.
Now check your results against mine. You'll notice that the weight contrast immediately adds interest to the type.
Combining Case
Another way to add interest to your type is to combine case. Let's say you're trying to achieve a little more impact with your header by using more than just lower, upper, or standard title case. This time, use your imaging program to set the type—all the same size, weight, and face—but place part of the title in uppercase, and part of the title in lowercase.
Shows how I did this with the words, 'Welcome to my Site.' Here, I've emphasized 'Welcome,' because it's the most important idea in that sentence. The resultant header is much more interesting than it would have been in standard case because it emphasizes the contrast in the importance of the words themselves as well as the contrast in visual impact.
Go On—Type It Up!
As you can see from these short exercises, when you begin to work with the fundamental concepts in typography, your skills can rapidly move from the simple to the more complex. This growing complexity adds sophistication to the look of your design work, and helps emphasize key points in your visual and verbal communications.
Until my next article on typography, I encourage you to play with type. Open up Photoshop, Illustrator, or your favorite graphics program and experiment. Try to identify categories, families, and faces. Apply a range of sizes, styles, weights, and directions. See what's available in your drawing program in terms of leading, kerning, and spacing. In general, get to know type a little better.
By: Molly E. Holzschlag author, instructor, and Web designer.
