Chapter 12. Type Contrasts

This chapter focuses on the topic of combining typefaces. The following pages describe the various ways type can be contrasted. Each page shows specific examples, and at the end of this section are examples using these principles of contrasting type on your pages. Type contrast is not only for the aesthetic appeal, but also to enhance the communication.

A reader should not have to try to figure out what is happening on the page—the focus, the organization of material, the purpose, the flow of information, all should be recognized instantly with a single glance. And along the way, it doesn’t hurt to make it beautiful!

These are the contrasts I discuss:

A contrast of size is fairly obvious: big type versus little type. To make a contrast of size work effectively, though, don’t be a wimp. You cannot contrast 12-point type with 14-point type; most of the time they will simply conflict. You cannot contrast 65-point type with 72-point type. If you’re going to contrast two typographic elements through their size, then do it. Make it obvious—don’t let people think it’s a mistake.

A contrast of size does not always mean you must make the type large—it just means there should be a contrast. For instance, when you see a small line of type alone on a large newspaper page, you are compelled to read it, right? An important part of what compels you is the contrast of very small type on that large page.

Over and over again I have recommended not to use all caps. You probably use all caps sometimes to make the type larger, yes? Ironically, when type is set in all caps, it takes up a lot more space than the lowercase, so you have to make the point size smaller. If you make the text lowercase, you can actually set it in a much larger point size, plus it’s more readable.

Use a contrast of size in unusual and provocative ways. Many of our typographic symbols, such as numbers, ampersands, or quotation marks, are very beautiful when set extremely large. Use them as decorative elements in a headline or a pull quote, or as repetitive elements throughout a publication.

The weight of a typeface refers to the thickness of the strokes. Most type families are designed in a variety of weights: regular, bold, perhaps extra bold, semibold, or light. When combining weights, remember the rule: Don’t be a wimp. Don’t contrast the regular weight with a semibold—go for the stronger bold. If you are combining type from two different families, one face will usually be bolder than the other—so emphasize it.

Most of the typefaces that come standard with your personal computer are missing a very strong bold in the family. I heartily encourage you to invest in at least one very strong, black face. Look through online type catalogs to find one. A contrast of weight is one of the easiest and most effective ways to add visual interest to a page without redesigning a thing, but you will never be able to get that beautiful, strong contrast unless you have a typeface with big, solid strokes.

Not only does a contrast of weight make a page more attractive to your eyes, it is one of the most effective ways of organizing information. You do this already when you make your newsletter headlines and subheads bolder. So take that idea and push it a little harder. Take a look at the table of contents below; notice how you instantly understand the hierarchy of information when key heads or phrases are very bold. This technique is also useful in an index; it enables the reader to tell at a glance whether an index entry is a first-level or a second-level entry, thus eliminating the confusion that often arises when you’re trying to look up something alphabetically. Look at the index in this book (or in any of my books).

If you have a very gray page and no room to add images or to pull out quotes and set them as graphics, try setting key phrases in a strong bold. They will pull the reader into the page. (If you use a bold sans serif within serif body copy, you will probably have to make the bold sans serif a point size smaller to make it appear to be the same size as the serif body copy.)

The structure of a typeface refers to how it is built. Imagine that you were to build a typeface out of material you have in your garage. Some faces are built very monoweight, with almost no discernible weight shift in the strokes, as if you had built them out of tubing (like most sans serifs). Others are built with great emphasis on the thick/thin transitions, like picket fences (the moderns). And others are built in-between. If you want to combine two different type families, choose them from different structures.

Remember wading through all that stuff earlier in this section about the different categories of type? Well, this is where it comes in handy. Each of the categories is founded on similar structures. So you are well on your way to a type solution if you choose two or more faces from two or more categories.

Structure refers to how a letter is built, and as you can see in these examples, the structure within each category is quite distinctive.

Robin’s Rule: Do not put two typefaces from the same category on the same page. There’s no way you can get around their similarities. And besides, you have so many other choices—why make life difficult?

The guiding principle of typographic contrast is that you must pull two faces from two different categories of type.

That is, you can use two serifs as long as one is an oldstyle and the other is a modern or a slab serif. Even then you must be careful and you must emphasize the contrasts, as explained in the rest of this chapter.

Along the same line, avoid setting two oldstyles on the same page—they have too many similarities and are guaranteed to conflict no matter what you do. Avoid setting two moderns, or two slabs, for the same reason. Avoid using two scripts on the same page.

Setting two sans serifs on one page is always difficult because there is only one structure—monoweight. If you are extraordinarily clever, you might be able to pull off setting two sans serifs if you use one of the rare ones with a thick/thin transition in its strokes, but I don’t recommend even trying it. Rather than try to combine two sans serifs, build contrast in other ways using different members of the same sans serif family. The sans serif families usually have nice collections of light weights to very heavy weights, and often include a compressed or extended version (see pages 204–207 about contrast of direction).

The form of a letter refers to its shape. Characters may have the same structure, but different “forms.” For instance, a capital letter “G” has the same structure as a lowercase letter “g” in the same family. But their actual forms, or shapes, are very different from each other. An easy way to think of a contrast of form is to think of caps versus lowercase.

You’re probably tired of hearing me recommend not using all caps. I don’t mean never use all caps. All caps are not impossible to read, obviously. Just be conscious of their reduced legibility and readability. Sometimes you can argue that the design “look” of your piece justifies the use of all caps, and that’s okay! You must also accept, however, that the words are not as easy to read. If you can consciously state that the lower readability is worth the design look, then go ahead and use all caps.

Since all scripts and italics have a slanted and/or flowing form, it is important to avoid a combination of two different italic fonts, or two different scripts, or an italic with a script. Doing so will invariably create a conflict—there are too many similarities. Fortunately, it’s not difficult to find great fonts to combine with scripts or italics.

Yes—one face has to change to some sort of roman. While we’re changing it, we might as well make the structure of the new typeface very different also, instead of one with a thick/thin contrast. And we can make it heavier as well.

An obvious interpretation of type “direction” is type on a slant. Since this is so obvious, the only thing I want to say is don’t do it. Well, you might want to do it sometimes, but only do it if you can state in words why this type must be on a slant, why it enhances the aesthetics or communication of the piece. For instance, perhaps you can say, “This notice about the boat race really should go at an angle up to the right because that particular angle creates a positive, forward energy on the page.” Or, “The repetition of this angled type creates a staccato effect which emphasizes the energy of the Bartok composition we are announcing.” But please, never fill the corners with type on angles.

But there is another form of “direction.” Every element of type has a direction, even though it may run straight across the page. A line of type has a horizontal direction. A tall, thin column of type has a vertical direction. It is these more sophisticated directional movements of type that are fun and interesting to contrast. For instance, a double-page spread with a bold headline running across the two pages and the body copy in a series of tall, thin columns creates an interesting contrast of direction.

You can involve other parts of your layout in the contrast of type direction, such as graphics or lines, to emphasize or contrast the direction.

In the example below, there is a nice, strong contrast of direction. But what other contrasts have also been employed to strengthen the piece? There are three different typefaces in that arrangement—why do they work together?

Also notice the texture that is created from the structures of the various typefaces, their linespacing, their letterspacing, their weight, their size, their form. If the letters were all raised and you could run your fingers over them, each contrast of type would also give you a contrast of texture—you can “feel” this texture visually. This is a subtle, yet important, part of type. Various textures will occur automatically as you employ other contrasts, but it’s good to be conscious of texture and its effect.

If you had, instead, chosen a modern typeface for the short quote, what would then be a logical choice for the headline?

Color is another term, like direction, with obvious interpretations. When you’re talking about actual color, remember to keep in mind that warm colors (reds, oranges) come forward and command our attention. Our eyes are very attracted to warm colors, so it takes very little red to create a contrast. Cool colors (blues, greens), on the other hand, recede from our eyes. You can get away with larger areas of a cool color; in fact, you need more of a cool color to create an effective contrast.

But besides the natural idea of colorful color, typographers have always referred to black-and-white type on a page as having color. It’s easy to create contrast with colorful colors; it takes a more sophisticated eye to see and take advantage of the color contrasts in black-and-white.

In the quote below, you can easily see different “colors” in the black and white text which is created by such variances as the weight of the letterforms, the structure, the form, the space inside the letters, the space between the letters, the space between the lines, the size of the type, or the size of the x-height. Even using one typeface, you can create different colors.

A light, airy typeface with lots of letterspacing and linespacing creates a very light color (and texture). A bold sans serif, tightly packed, creates a dark color (with a different texture). This is a particularly useful contrast to employ on those text-heavy pages where there are no graphics.

A gray, text-only page can be very dull to look at and uninviting to read. It can also create confusion: In the example below, are these two stories related to each other?

If you add some color to your heads and subheads with a stronger weight, or perhaps set a quote, passage, or short story in an obviously different color, then it attracts the eyes and readers are more likely to stop on the page and actually read it. And that’s our point, right?

Besides making the page more inviting to read, this change in color also helps organize the information. In the example below, it is now clearer that there are two separate stories on the page.

Below, notice how you can change the color in one typeface, one size, with minor adjustments. As you can see, these minor adjustments can also affect how many words fit into a space. Being able to make these adjustments requires knowing how to adjust all the spacing attributes in your software: tracking, kerning, letterspacing, word spacing, linespacing, paragraph spacing, column spacing.

Below you see just plain examples of typeface color, without any of the extra little manipulations you can use to change the type’s natural color. To do: Set about twenty blocks of the same text, like you see below, and make minor adjustments to each one to see the differences in color. Be sure to label each block. Print up the pages because the real test is on paper, unless of course you are designing specifically for the screen.

Most effective type layouts take advantage of more than one of the contrasting possibilities. For instance, if you are combining two serif faces, each with a different structure, emphasize their differences by contrasting their form also: If one element is in roman letters, all caps, set the other in italic, lowercase. Contrast their size, too, and weight; perhaps even their direction. Take a look at the examples in this section again—each one uses more than one principle of contrast.

For a wide variety of examples and ideas, take a look through any good magazine. Notice that every one of the interesting type layouts depends on the contrasts. Subheads or initial caps emphasize the contrast of size with the contrast of weight; often, there is also a contrast of structure (serif vs. sans serif) and form (caps vs. lowercase) as well.

Try to verbalize what you see. If you can put the dynamics of the relationship into words, you have power over it. When you look at a type combination that makes you twitch because you have an instinctive sense that the faces don’t work together, analyze it with words.

Before trying to find a better solution, you must find the problem. To find the problem, name the similarities—not the differences. What is it about the two faces that compete with each other? Are they both all caps? Are they both typefaces with a strong thick/thin contrast in their strokes? How effective is their contrast of weight? Size? Structure?

Or perhaps the focus conflicts—is the larger type a light weight and the smaller type a bold weight, making them fight with each other because each one is trying to be more important than the other?

Name the problem, then you can create the solution.

Trace any word in the magazine that appeals to you. Now find another word in the magazine that creates an effective contrast with the one you just traced. In this exercise, the words are completely irrelevant—you are looking just at letterforms. Here is an example of a combination of three faces that I traced out of a news magazine:

Trace the first word, and then make a conscious, verbal decision as to what you need to combine with that word. For instance, if the first word or phrase is some form of sans serif, you know that whatever you choose next won’t be another sans serif, right? What do you need? Put your choices into conscious thoughts.

Try a few combinations of several words, then try some other projects, such as a report cover, a short story on one page with an interesting title, a newsletter masthead, a magazine cover or story spread, an announcement, and anything else that may be pertinent to you. Try some colored pens, also. Remember, the words don’t have to make any sense at all.

The advantage of tracing from magazines is that you have an abundance of different typefaces that you probably don’t have on your computer. Is this going to make you lust after more typefaces? Yes.