Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Oceans Apart: Simplicity in type leads to lasting, effective design

Ryan Sims, Designer

www.csszengarden.com/085

[View full size image]

THE WONDERFUL COLOR PALETTE used in Oceans Apart emerged from a photograph that designer Ryan Sims took during a visit to Southern California. As calm as the Pacific itself, the colors and imagery of the design provide a slight contrast with the sense of gentle movement from the image that draws the visitor in.

Oceans Apart is not abrupt or loud. Part of what helps create this subtle feeling is the design's simplicity. Instead of adding multiple images, colors, and typefaces, Sims kept to a Hemingway-like philosophy: Take out the fancy stuff. For him, the beauty was in watching his design come to life as things were removed, rather than added.

Type Conventions

Typography is a specialty area of design. Many designers spend their entire career focused on the study, use, and creation of type. And while there's no single approach to creating effective type, there are some important conventions every designer should know.

Type Form

Type form is a general term that includes aspects of a typeface's appearance such as weight, width, and posture.

Type weight refers to how heavy or light a given typeface is. In CSS, this relates to the font-weight property, which allows you to define how heavy or how light the text will appear. TABLE 1 shows examples of the font-weight property and its possible values.

Now of course there are caveats galore here, the primary one being that some fonts won't have intermediary faces to support the CSS requirements (FIGURE 1). What's more, even if the font does have those options, it doesn't mean the browser will display them.

Practically speaking, you can rely on a font to have at least two faces (normal and bold) that can be used for display. Figure 1 shows how the browser, in this case Mozilla, renders a list of supposedly varying weights using only bold and normal variants.

Type width refers to the width of the letterforms within the face. A condensed face will have compressed letterforms; an expanded face will have extended letterforms (FIGURE 2). There is a corresponding property in CSS for this, known as font-stretch. However, it's not used, as none of the common browsers support it.

NoteIf a bold, italic, or oblique version of a font exists on the user's computer, the typical browser behavior is to display that actual font. If it's not available, a forced bold, italic, or oblique form will occurwhere the browser is altering the regular font electronically. The difference between the two is often noticeable to a designer's sharp eye.

Another type form is posture, which corresponds to the CSS property font-style. Type posture is the angle at which the typeface is set. The two postures are the following:

Italic A specially designed slanted variation of regular upright letters within a typeface, with extra handwriting-style flourishes.

Oblique A slanted variation of regular upright letters, different from italics because they aren't necessarily specially designed. Most people use the term italic when what they're actually referencing is oblique type.

The font-style property supports values of normal, italic, oblique, and inherit.

Type Contrast

Type contrast is the variation between thick and thin lines within each letter. Different fonts have widely varying proportions between thick and thin, including some that have no variation at all.

NoteOn the Web, many feel the opposite holds true: Sans serifs are better for body text onscreen. But, the debate continues. Read more about the controversy at www.digital-web.com/news/2004/06/serif_vs_sanserif.

In standard print design, a common practice is to use one typeface for headers and another for all body text. Typically, sans serif type was used for headers, as the rounded, generally low-contrast letterforms are perfect for gaining attention. Serif type has long been the preference for body text in print, especially for long text sections. Most books you read follow this practice, but it's something that's still debated when it comes to the Web.

Type Color

Type color is a typographic term describing the overall shading of a block of text. A thin font like Helvetica Light has a light color because there is very little black ink in the block; a thick font like Cooper or Arial Black has a dark color because there's much more ink. Type color, then, is not just dependent on the typeface itself; other type properties such as tracking (kerning) and leading (line height) all influence the perceived color.

Along with contrast, another element that adds interest to type design is the color chosen for the fonts used. Type hue comes into play with contrast, too, because you can have contrasting fonts as well as contrasting colors, creating a lot of options for the designer.

Typically speaking, it's good for most designers to go easy on how many colors they use for their fonts. Of course, there are instances where multiple colors may make sensesuch as on a site for kids. But in most cases, overuse of color in type leads to unprofessional results.

Type Conventions in Oceans Apart

Sims's philosophy of simplicity is portrayed very clearly in Oceans Apart. All of the HTML-based text is set to Trebuchet, with several other sans serifs as fallbacks:

body {font: 11px "trebuchet ms", arial, helvetica, sans-serif;}

Trebuchet is a sans serif font that was part of the Microsoft core Web fonts and also comes as part of Microsoft Office. This means support for it is fairly broad, although having fallback fonts is always important.

Hue and Contrast Choices

The hue and contrast choices you make are critically important, not only for the design's integrity but also for the purposes of readability, which is the degree to which type can be read easily.

Conventional type design suggests that designers should go for high-contrast foreground and background hues, such as black text on a white background or vice versa. Thisalong with other techniques listedis supposed to enhance readability.

In Oceans Apart, Sims departs from firm convention and chooses a very subtle tan for his body text:

color: #9F927F;

The contrast against the white background would be considered fairly low in this case (FIGURE 3). Interestingly, the links in both the body and along the links sidebar are a darker blue. Many designers would have chosen to use the blue for body text, because of its higher contrast (FIGURE 4).

Admittedly, the contrast is improved when the body text is blue, but the subtle contrast that results from using the tan is compelling. In fact, it is the choice of tan for the body text that causes the page to be so soothing to look at, and therefore reasonably easy to read.

What's more, the use of the blue for the in-text and main links adds contrast to the overall design. This helps add to the interesta subtle approach but one that in this case is extremely effective.

Type contrast also comes into play in the use of reverse type within the header section of the page. The type of the header image is set in white against a translucent field that lies on top of the photograph (FIGURE 5). Directly beneath that, white type has been set against a dark tan background graphic, which provides interesting shapes and movement, enhancing the overall effect (FIGURE 6).

Tip

Undoubtedly, the lower-contrast type can cause problems for people with compromised vision. For professional design scenarios where a broad audience is expected, sticking with more conventional color and contrast choices is important for maximum readability.

Size Contrast and Color

Using a range of type sizes adds extra interest, providing a contrast between various type blocks on the page. In Oceans Apart, the effect is once again simple and subtle, but it works.

The HTML-based text on the page features the default body text set to 11 pixels, along with the links in the primary link list. The secondary links are set to 9 pixels as are all the ancillary text items. It's amazing, though, what a difference 2 pixels can make when the type hues are contrasting too (FIGURE 7).

In the case of the #linklist2, section Sims uses an olive green, which contrasts well with not only the link list background, but also the blue and tan used on other parts of the page.

Size Contrast and Weight

Returning again to the header image in Figure 5, you'll notice that in this graphic-based type, Sims used size and weight to create contrast. "css" is in lowercase and contrasts with the initial capitals of "Zen Garden." The tagline is a perfect example of weight contrast, where the word "beauty" is bold, but the surrounding text is normal weight.

This carries through in the graphic directly beneath the photo, where the first seven words of the text are bold and the remainder of the sentence is normal weight, which you can see in Figure 6.

Relationship of Headers and Text

A final point to be aware of is the relationship of headers and text in Oceans Apart. Headers within the main body are graphical and use the blue mentioned earlier. The type is set with a very subtle drop shadowjust a hintwhich gives a polished look to the type and helps draw the eye to the headers.

Speaking of drawing the eye, you'll notice one bit of type that is unlike anything else within the designthe header for the links section (FIGURE 8). Here you see graphic type in uppercase, a dark heavier blue in all capital letters against a blue background that contrasts with the soft tan backgrounds beneath it. This header stands out and provides an excellent visual grounding for the navigation options within the design.

Learning from Simplicity

While at first glance Oceans Apart seems straightforward, the nuanced simplicity evokes a calm and easygoing feel within the design. Extra subtle touchesmany of which are found in the typeprovide some great lessons to consider while working with our own designs.