Dead or Alive: Grace and gravity in typographic design
Michael Pick
, Designer
www.csszengarden.com/009
WHILE THINKING ABOUT potential submission ideas for the CSS Zen Garden,
Michael Pick
was driven by a
desire
to do something "kind of
funny
and a little bit
strange
," which led to his approach in
Dead or Alive
.
Pick's idea was to contrast the old West with the world of the Japanese samurai, creating an intriguing historical difference. To carry the old West theme, Pick relied on Western-style typography, with a variety of interesting flourishes. The resulting submission is typographically subtle and offers us some
excellent
insight into designing with type.
Decorative
Flourishes
One of the most compelling visual aspects of Dead or Alive is the use of typographic flourishes, referred to as
dingbats
. Traditionally floral or ornamental symbols, digital dingbats typically follow a theme of some
sort
. Some examples:
-
Business
-
Sports
-
Animals
-
Nature
-
Creative/offbeat
FIGURE 1
shows five examples of dingbat themes.
Pick was able to extend his Western theme in Dead or Alive through the addition of dingbat glyphs and with graphic trimmings that help the design come across as sophisticated and complete.
The first place we see this is in the logo (
FIGURE 2
). Accompanied by Westernstyle type, an image of a pagoda is placed in an oval area resplendent with curlicues and embellishments. The result helps the thematic contrast of the old West with historical Japan, and offers shape and flow to the overall look.
The five-pointed star of a sheriff's badge is a very familiar symbol in Westerns. In the link lists, the headers are styled with
five-pointed
stars and a dingbat separator (
FIGURE 3
).
Moving over to the body of the design, we find several more intriguing decorative pieces. First, the top header within the body has a unique treatment using images of samurai and a bonsai tree (
FIGURE 4
).
In
subsequent
headers, the Western theme dominates, with a pointing-hand dingbata familiar symbol in Western-style design (
FIGURE 5
).
Two other decorative pieces strengthen and round out the work. At the top and bottom of the design area is a repeating image that creates a beautiful pattern reminiscent of currency and stock-certificate design (
FIGURE 6
). Finally, a postal mark
bearing
the mikepick.com domain adds a subtle
embellishment
with a bit of humor, too (
FIGURE 7
).
Without the use of dingbats and embellishments, pulling off the thematic contrast in this design would have been difficult. It shows that designers can benefit greatly from well-placed embellishments, which significantly enhance a design and its message.
Typographic Layout
We talk quite a bit about layout as it pertains to where various page elements go, but there's also plenty of scientific and anecdotal information regarding the placement of type elements within a design.
Optical Behavior
The human eye
manages
the process of reading in a very specific way. Typographers
encourage
designers to ensure that their type works in tandem with the human eye and does nothing to disturb the natural optical response to words. The only exception to this would be when a designer
purposely
tries
to cause a disruption. Otherwise, following the optical behavior is important.
In languages that are read left to right, a specific scanning pattern occurs when a person begins to read a page. This is true of both printed pages and Web pages.
A dominant theory in typography is that that the eye will gravitate naturally to the top-left corner, which is referred to as the
primary optical area
. The eye then moves across to the right,
sweeps
down and across to the
next
line, and continues to make its way down the page. Throughout this process, the eye is grounded in what is referred to as the
terminal anchor
, the
lowest
point within the design. Ideally, designs that are
meant
for practical rather than experimental purposes will always
acknowledge
this optical behavior and do nothing to
disrupt
it (
FIGURE 8
).
Note
Of course, languages that aren't read left to right will result in different optical behaviors. With languages such as Hebrew or Arabic, which are both read right to left, it's logical to approach the optical response as being
opposite
: The scanning begins at the top-right corner and works its way across and down.
Using Gravity to Lead the Eye
The process of drawing the eye down is referred to as
gravity
. Just as gravity pulls us physically downward, so is the eye drawn down to the natural conclusion of a visual design.
Given this information, it makes sense that logos are typically placed in the primary optical area (the top-left corner) and that text and design elements create a terminal anchor at the bottom of the design. There are some hot spots along the way, usually wherever the eye lands to the right before resetting to the left side of the page. If we were to imagine a layout that
follows
this idea, we'd end up with a template for an ideal visual layout (
FIGURE 9
). Dead or Alive is a great example of a design that allows the human eye to flow with nothing to disrupt it.
Avoiding
Comprehension
Problems
Another concern in typography is ensuring that people comprehend the message being presented via the words. Again, an exception would be an experimental design where the message is an emotional response to the image, rather than the meaning of the words contained within it.
Header Text
Header text is of course used to denote sections within a document. As we've seen in Dead or Alive, the way headers are styled can add meaning for the visitor as well as strengthen the design itself.
Some guidelines for working with headers effectively:
-
If you use color in your headers, make sure the
color
is one of the stronger ones within the design's palette.
-
Color in headers should be vibrant. Studies have shown that lightly colored headers do not have the impact of dark headers. The closer to black a header becomes, the more impact it has on the viewer.
-
The more significant the header, the stronger its visual presence should be.
-
Slightly
condensing
header type seems to make it more noticeable. A setting between 70 and 90 percent of the typeface's width is somtimes suggested.
-
Type contrast can help. In Dead or Alive, the headers are all uppercase, which makes them distinct from other text within the design.
-
Headers should be limited to short lines of text. Very long headlines become a problem in terms of both visual results and reader comprehension.
Another interesting factor in header design is the influence of punctuation, particularly the period. Typically speaking, you'll want to avoid the use of a period at the end of your header. A period finalizes an idea, whereas the role of a header is to introduce an idea (
FIGURE 10
).
Body Text
Body text is the text that makes up the majority of your editorial content. Body text is meant to be reador at the very least scannedby the reader. However, following poor typographic practices can lead to a degradation of the message.
To work effectively with body text, consider these guidelines:
-
Try to keep line length to about 60
characters
. In the fluid world of Web design, this can be a difficult thing to accomplish,
especially
because of
problematic
support with the CSS properties used to control line length, like
min-width
and
max-width
. However, it's a good thing to keep in mind, even in fluid designs. Not only does comprehension begin to drop when lines are too long, but people will actually stop reading your text!
-
The opposite is also true. If you have large portions of body text set to a short line lengthof, say, 20 characterscomprehension will drop. It's simply too difficult to read long sections of tight text. Short line lengths should be reserved for
accent
text.
-
In conventional English, it's thought that a paragraph should be at least three or four sentences long. On the Web, long paragraphs are discouraged, as it's believed that short paragraphs that home in on critical material are more appropriate for such a fast click-and-go environment.
-
If you are publishing long documents, be sure to try to keep your paragraphs tight and as short as possible, and break up the document into logical sections, using headers. This definitely aids comprehension, as well as a reader's orientation within the document.
-
Avoid very wide or very narrow leading (line height) A paragraph that is too close or too far away from the text that comes before and after it can cause a problem with comprehension. It's as if the mind simply stops processing the information, either from overload or from a sense that the message has ended.
-
Avoid colored body text in most cases. As with headers, colored text can sometimes be a detriment rather than a benefit. Reserve colored text for accent text and links wherever possible. Even for the links within Dead or Alive, only one color variation is used, and then only for those links within the body (
FIGURE 11
).
Accent Text
Accent text allows for a little more flexibility than header and body text, which are the most critical for comprehension. Accent text is the text used in sidebars, block quotes, and captions. When working with accent text, consider the following:
-
Because accent text is used to call attention away from the body text, the use of color for such text is encouraged rather than discouraged. The most important concern is to be consistent in the use of color as it's applied to any accents.
-
Accent text should use short line lengths and be limited to only a few lines.
-
Accent text such as sidebars and block quotes shouldn't interrupt the flow of body text, but rather enhance it. If accent text disrupts optical behavior, comprehension is compromised. The same is true for illustrationsthe normal flow should not be disrupted by them; they should enhance rather than detract from the main text.
-
Readers expect that illustrations will have a caption. Captions are extremely helpful, as they provide context for the reader and increase the overall understanding of the materials.
A point of usability also comes up when we think about how much text to allow on a page. Most readers don't like clicking a "next" link more than they have to. A fine balance must be struck between the right amount of body text and the point when it makes sense to move to another page.
Thoughtful Type,
Graceful
Design
Dead or Alive is a graceful design. Its grace comes from the attention Michael Pick paid to small details, embellishing his design with appropriate and interesting facets such as dingbat glyphs. Add to that the solid typographic practices he used, and the strength of Dead or Alive is in its subtle, powerful simplicity.
|