or… Everything I needed to know about type, I learned from my Drawing 1 teacher.
When a designer sits down to devise an effective typographical hierarchy—no matter how complex—he or she is almost certainly, if unknowingly, following principles of areal and linear perspective—guidelines for making objects appear closer or further away in a representational drawing or painting. While trained designers almost always get some form of instruction in perspective, it is never, or nearly never, directly connected to typographical instruction.
Binocular vision—a human’s ability to perceive depth based on a combination of slightly different images from both eyes—is most effective at ranges of less than six yards. At longer distances, “3D” perception starts to break down as the relative difference between what the two eyes see decreases. But, that does not reduce the need to know, say, how far away a massive grizzly bear is. Fortunately, people can still perceive distance based on a range of other visual cues all normally unconsciously processed—at least until an art student is tasked with simulating them on paper.
Linear perspective comes up in art instruction as early as grade school and is the kind that most people are familiar with; objects appear to become smaller as they get further away. (It’s called linear perspective because parallel lines seem to converge on the horizon at a “vanishing point.”) Areal perspective (sometimes called atmospheric or color perspective) is a much richer set of rules about how colors shift and how visual information is reduced with distance. While linear perspective’s applicability to hierarchy is most obvious (a headline is both bigger and more “important” than the text that follows it), all the other rules are equally useful.
And it should not be surprising that this is true—distance as a metaphor for importance has also infiltrated our daily language. (“No need to worry about such a ‘distant’ or ‘remote’ possibility.”) It’s only logical that it would also seep into the non-verbal vocabulary used by all visual communicators—not just realist painters.
The word “hierarchy,” as used by designers, is a bit of misnomer, referring not to the literal importance of page elements but the order in which a reader is to be guided through them. A headline is not really more important than the text that follows it, but it is intended to be read first. The categorical in a music festival guide is not more important than the names of the acts and the times and place they will play. But whether you organize by day or genre of music or both, it still makes sense to emphasize the wayfinding over the data because readers will use the navigation to move from general to specific information.
The most obvious way to emphasize something is to make it bigger—or to be compliant with the rules of linear perspective. Of course, one could argue that bigger just is more important—the aforementioned grizzly bear will still be taken more seriously than an equidistant kitten. But, size is just one aspect of perspective—and the extended rule set can be used, sometimes in combination, to create complex but highly functional typographical structures.
A typical renaissance landscape by Adriaensz van Wittelare illustrates the major rules of aereal perspective:
-
With distance, colors become less distinct. The distant mountain is almost a monotone, the closer one shows darker tonal values and higher contrast. The closer pedestrians (left) wear a range of colors, distant ones are monotone.
-
Colors become lighter and less saturated. The town wall demonstrates this, as do the close and far trees.
-
Colors become Bluer (or colder). Compare the relatively brighter red on the close roof to the grayer red on the distant roof.
-
You can see more detail in a close object than a distant object. The closer tree is painted with enough detail that a viewer perceives a sense of leaves and internal shadows. The distant tree is just a stroke or two of paint.
-
Lines become blurrier. The closer mountain features a sharp division between land and sky. The farther mountain almost blends into the background.
And of course the painting also demonstrates linear perspective—the lines of the riverbanks start to converge as they get farther away. Distant houses appear smaller than nearer ones.
Typographically, we see these rules play out in the following ways*:
-
Higher contrast equals more prominence. This is most often seen with the use of bold versions of typefaces:
It also manifests with the use of fonts with internally stronger contrasts, such as the display serifs that have been much more available for digital setting for the last decade. The middleweight Baskerville has roughly the same overall contrast as Playfair bold, but the increased internal stroke variance makes the display font move relatively forward in space.
This principle is especially useful to keep in mind when working on a colored or photographic background. Type that has a high value contrast with its background will always pop more than type that relies on color contrast.
Finally, other methods of increasing and decreasing contrast, such as tightening and loosening letterspacing, will also affect impact. Of course, tight tracking and kerning can also allow for larger point sizes:
-
With distance colors become lighter and less Saturated; Highly saturated versions of colors will always be more prominent than low saturation versions.
-
Colors become bluer. Rubification or making type red is perhaps the most traditional method of emphasizing type, and red is perhaps the only color that can compete with black for visual impact on a white page. However, it is also true that as colors shift from warmer to cooler, type loses impact:
-
A more complex typographical treatment will be per
ceived as more important because visually, the closer an object is the more detail it will show. Of course, hand-drawn, grungy, and complex type treatments can also make for stunning visual statements, but even if there is no narrative reason for boosting a headline’s complexity, these relatively simple examples demonstrate complexity helps to emphasize one piece of type over another.
-
Blurry type will be perceived as less important than sharper type because edges are perceived as having softer edges with distance due to haze in the atmosphere. In most cases, the eye of the reader takes care of this on its own. Focusing on a headline will render any text on the page as mentally out-of-focus or invisible. But, a literal application works too. The need for blurry type may not come up that often in the real world, but when it does it follows the expected principle:
These rules can become particularly useful when used in tandem. A frequently occurring typographical challenge for logos and headlines is to build aesthetic distinctions between words, but not changes in hierarchical value. Turning to different subsets of the areal perspective rules provides a ready vocabulary to accomplish this. As one simple and common example, one word can be smaller but bolder and the other word can be larger but bigger:
Most of the time, when you see these rules violated, the result is amateurish, unattractive, and even cacophonous, but there are a few times when these rules have been deliberately broken with striking results. I’ll be looking at a few examples next month.
*When using contrasting type samples, I have tried to balance overall headline weights. Because the RGB color space has a broader gamut than CMYK, there are color combinations that are legible on screen that would not be in print.
Learn more about typographical hierarchy:
Enhance your Web designs with the latest techniques for styling, typesetting, and embellishing Web typography in the latest course from Sessions College and HOW Design University. In this course, you’ll get up to speed on the latest Web font and CSS font stack options that can give your typography dimension and sophistication. You will study and apply the potential for traditional and modern typographical techniques to promote readability and visual interest in your Web page layouts. In this instructor-led course, your work will be graded and critiqued by an award-winning Web design instructor.
