Typography | Type Details and Hierarchy

Type Details and Hierarchy

Type in Action. This page design uses type arrangement, spacing, color, and size to create visual organization. Design: Mires Design.

In the last lecture, we looked at the letterform alone. Let's now focus on typography in context. The art of page layout requires you to pay attention to the big picture and the details.

The big picture is all about information hierarchy. Clear typographic decisions and the use of simple visual "tools" like spacing, color, and type choice helps create a visual logic for your design.

In the print world, the details count too. Your attention to little things (kerning, special characters, ligatures) conveys a message about the quality of a publication to its readers.

In this lecture, we'll look at both the details and the hierarchy of type, covering those essentials that distinguish a professional designer. We can't cover all the rules of typesetting (there are many of them) but we can help you take your type skills to the next level.

Take a deep breath. We're about to dive into the details.

 

In this first part of the lecture, I'll introduce some of the typographic details that I look for in a designer's typesetting.

While it's a painstaking process that's often unnoticed by the average reader, typesetting is a key component in the perceived quality of any print publication. Ninety-nine out of a hundred readers of Vogue may not notice whether a text column is ragged right or contains widows. But that extra touch of finishing, a hard-to-define production quality, is essential to the magazine's quality status.

Oftentimes, type details are the first thing I look at in a print publication. I figure that if someone is paying attention to the typographical details, there is a good chance the rest of the design is working as well.

Kerning Letters

Kerning refers to adjusting the space between two letters. Kerning is usually focused on large type, logos, or headlines—places where inaccuracies are the most apparent.

Kerning Konundrum. Ask yourself: Is the a too close to the x or to the s? Move your mouse over the letters to see where to kern.

Why does kerning often need adjusted? Blame the digital design tools you love. Most people think good type will just pop out of the computer by default. On the contrary, the kerning between digital letters is usually approximated for convenience.

Should you kern every letter all of the time? No way. Most of the time, type is set small and the computer does a respectable job of getting it close enough to correct. But when you have large type like headlines or titles you should always take a second look—more than likely you'll find some flaws.

Make it your task for today to look around at large headline type and you'll start to see how widespread bad kerning is. Want to know my kerning pet peeve? It's the number 19, as in 1997 or 1993. The space between the 1 and the 9 is almost always ill-spaced and in need of fixing.

In this "1993 Ford" example I did all sorts of kerning. Sometimes I subtracted space and other times I added space.

Kerning up Close. Adjustments need to be made to raw computer text.

What I am doing is looking at the positive and negative space created by the letter forms and adjusting the space so that the rhythm appears visually constant—flowing without gaps or tight spaces.

First I dealt with the most apparent problems—the space between the 1 and 9 as well as the space between the F and o. Then I went on to tweak other detail and tight spaces.

You could work on kerning all day—adjusting letterspace to greater and greater detail. Absolute perfection may not be attainable except by the best of us with lots of time, but the idea is to at least do some work to improve the letterspacing in the most prominent places, such as headlines or logotypes.

Space Invaders. Extremely tight letterspacing can be distracting.

One last comment: the absence of letterspace is not good letterspace. The problem is that the interior part of the the rounded letters (like the 9 or o or d) goes out of balance with the surrounding positive space (or lack thereof). This squeezing of space is common in advertising copy. I doubt that William Caslon (the designer of the typeface I used in the example) anticipated that people would one day scrunch and stretch his fonts into odd shapes and spaces.

By the way, one of the best places to learn about proper letterspacing is from stonecarvers—those who incise letters into architecture and monuments. If you mess up the letterspaces in that profession there is no "undo key." This practice has gone on for centuries and can be found in many ancient monuments.

Kern It. Use the Character panel in Illustrator (and other programs) to kern space between specific letters.

Want some kerning practice? Type the following text into your vector or page layout program: "Power Kerning." Set the type to a large size, 72 points using Times Roman. Now look at the letters three letters w-e-r. Do you see how the letter e looks too far away from the letter w? This is where you should "kern out" some space.

Precisely how to kern may vary from one program to another. In Illustrator, and other Adobe programs, you would click between the two letters that you want to kern and look in the Character panel for the A\V field. To reduce space type "-30" or to increase space just type "30" (or whatever number you'd like to kern by).

Do you want to know what that number represents? It's based on the em space of the particular font and size you are using. The software divides the letter m into 1000 units, so if you wanted to kern a letter at half the width of the letter m (em is the width of an m) you would type 500 into the box. Half of 1000 is 500. Presto!

Of course, it's very unlikely you'd want to kern a letter that much. Usually it's just a small slice—like 20 or 50 or 100 out of 1000.

Go ahead and do some kerning of "Power Kerning." Start with the w-e-r combination but look for other flaws. I think there are several places you could add or subtract a bit of space. The space between the r and n seems a tiny bit too tight. Notice how the serifs almost touch—add a sliver of space. Can you see that the shape of the word becomes more integrated and it flows visually? Sometimes it's difficult to see the details on your screen, so zoom up close or print it out to appreciate the fine points.

Special Characters

Another clue that someone is paying attention to details is the use of special characters in the typesetting. These include accent marks, mathematical symbols, and various other marks like the monetary signs for yen, pounds, and euros.

Very Special. Unlock the power of your keyboard by using all the special characters.

Where can you find these? On a Windows computer, look for Character Map under the System Tools menu. On Mac OS X, click on International in your System Preferences, then choose Input Menu and check Keyboard Viewer. A flag icon will appear in the right side of your menu bar, from which you explore the keyboard. With the Keyboard Viewer open, hold down a modifier key or combination of them (like Option or Option-Shift) to see the special characters and their key combinations revealed.

You can use a combination of the Shift and Alt/Option keys to type these alternate characters. For example, Alt-G (on Windows) or Option-G (on a Mac) generates the copyright symbol. And Alt/Option-8 gets you a bullet.

If you want to put an accent mark over a letter (é) then first type Alt/Option-E. Don't be surprised if nothing happens, the computer is waiting for you to then type the letter on which to place the accent. So the sequence is Alt/Option-E and then the letter e itself. If I wanted the same accent mark over another letter (á) I would type Alt/Option-E and then the letter a.

Want to meet some special characters? Pick any article in a literary magazine, such as the New Yorker, or a cooking magazine such as Bon Appétit. Such magazines pride themselves on an international, cosmopolitan sensibility, and this is reflected in the use of special characters for any word imported from a foreign language.

Curly Quotes

Over hundreds of years, typographers developed a very refined sense of the letterform and spacing. Then along came the desktop computer and everyone forgot the rules. Or rather, they thought they could let the computer make all the visual decisions by default.

One easy typesetting error to correct is the quotation marks. Usually on computers, you see the straight quotes like "this." These straight quotes are actually inch marks or ditto marks.

The proper marks to use for print publication are of a curly variety, sometimes called smart quotes. The choice is:

You really want to use the curly quotes when typesetting print text. Notice that one curls down and the other curls up. For on-screen uses, particularly HTML text, straight is often considered cleaner and more readable.

Ligatures

The Signature of the Ligature. Joining adjacent letters can make them more readable. Move the mouse over to see the joined letterforms.

Ligatures are two letters connected together into a single special character for a better visual flow.

The most common are fl and fi ligatures but you may have seen the ae ligature as well. This was pioneered by Caesar, of course! :)

It's a great idea to use ligatures in headline type and a sign of excellence to see ligatures throughout the body type of paragraphs as well. If this sounds really hard to do, consider the capabilities of your digital tools. You can use the search/replace feature in your software to hunt down each fi combination and replace it with the corresponding ligature mark.

Dashes and Hyphens

Do you know the difference between a dash and a hyphen? Actually, there are two kinds of dashes: an em dash and an en dash.

The em dash is the longer of the two and is the width of the letter m. It is used when you want to signal a long pause in reading. It is used in the "My cat is lazy..." sentence below. Take a second to visually compare the long em dash to the en dash and hyphen in the other sentences.

A Dash of Salt. Spice up your typesetting by using dashes and hyphens correctly.

The en dash can be used as a substitute for the word "to" as in the sentence "We have shuttles going from Miami to Tampa..."

The short simple hyphen is used to join words together. I've demonstrated its use in the sentence: "The blue-green water was stunning."

 

Leading or Linespacing

Hierarchy: First, Second, Third

Gestalt Grouping. Do you see two overlapping squares? Do you see a triangle? Both are only implied and exist only due to arrangement.

Humans have a tendency to organize the world around them to seek meaning. Principles of visual perception are studied by psychologists. You may have heard the phrase "the whole is greater than the sum of its parts." This is a primary notion of Gestalt theory.

You may have learned these things in your basic design classes but they still very much apply to typography.

You can create order in two basic ways. The first is by using arrangement and placement on the page to make things appear to group together. A gestalt guru would call this grouping by proximity. The closer one thing is to another then the more they tend to group together.

Visual Logic. With proximity, two circles tend to group because they are near one another. With similarity, two circles appear to group because of their visual properties (color green).

The second method of grouping is to control the properties of the type such as color, typestyle, typeweight, and so on. The gestaltists would call this grouping by similarity. These two principles make up a kind of visual logic.

To use an example from Web design, the information architect can apply these gestalt ideas to structure the flow of entire Web sites. They carefully plan the sequence and order that the Web surfers encounter information. It's something like making an outline for a high-school term paper. In my experience with Web design I've found that many Web sites have a poor information hierarchy. Designers focus on look and feel more than order and organization.

Who's on Third?

Let's take a closer look at a page design by typographer Jan Tschichold. It's a great example of visual grouping and hierarchy. It's written in German, but even if you can't read the language, you can still get a sense of how the information is organized.

Tschichold is a master of typographic hierarchy: every element on the page can be ranked according to its order of importance. The more important the content, the more emphasis it has. Use the interactive illustration below to explore the structure of the information on the page.

Information Structure. Roll over the buttons to deconstruct the hierarchy.

This is an example of the asymmetric typography which Jan Tschichold first advocated in the 1930's. His work and ideals (to seek simplicity and pure function of information) were influential in that era. It was called an International Style because designers hoped that since it was simple it could communicate on a more global level. It was a radical concept and rejected traditions in typography.

Tschichold was also one of the first to arrange the page asymmetrically. The empty space of a page became useful. He was influenced by investigations into basic visual composition by European painters like Piet Mondrian, the Bauhaus school, and the De Stijl movement.

Josef Müller-Brockmann's Swiss design uses scale, proximity, and type weights to organize the information on this 1955 music poster.

Creating a Visual Hierarchy

Tschichold's achievements can seem daunting to use in the real world. How would we apply these principles in a less esoteric layout project? To wrap up this lecture, I'd like to run you step-by-step through the thought process of organizing a body of type by using spacing and other typesetting properties.

The School of Big Ideas (to which I belong, of course) has hired me to lay out a poster for its lecture series.

Box 1. I start with a body of text. It's not completely random but it could certainly use some visual hierarchy.
Box 2. I've used linespaces to group the info. To break it apart into clusters.
Box 3. I've used indented space to group the list of speakers and make them seem separate from the location and title info.
Box 4. I've used bold type to emphasize info and make it attention-getting.
Box 5. Can you see what I've done? I made some info a bit smaller and some a bit bigger. I also made some info italic.
Box 6. I applied color. You can see that color is a very powerful tool to help create order and visual grouping.

Fleshing Out the Skeleton

The point of this brief demonstration is that you can use very simple visual tools like linespacing or typeweight to create a visual logic and hierarchy in your type.

A larger lesson to draw here is that information design values function over form. Or rather, information designers think that the best use of form is to make information clear, not to entertain, bedazzle, and decorate. Form is the servant of Function.

In Lecture One, we talked about Beatrice Warde and her Crystal Goblet idea: that typography should transmit the content so directly that is like a crystal-clear wine glass. If all of design were that way, the world would be logical but also quite plain and bare bones. While some design situations demand clear information, other situations demand a more sensual, emotional approach.

In later lectures, we'll explore the more expressive side of typography. We're at the end of Lecture Two. I hope you now have a sense of the visual logic that can be created with typography.

Discussion Share your thoughts and opinions on the Discussion Board. Exercise Apply your understanding of type details and hierarchy to a dual exercise.