Blood Lust: Exploring type formatting options

Dave Shea, Designer

www.csszengarden.com/005

MOVING FORWARD SOMETIMES INVOLVES taking cues from the past; Dave Shea looked back to the Futurism art movement of the early 20th century for visual inspiration as he built the chaotic Blood Lust. The goal was to mix design elements of the past with today's technology.

Using photos pulled from his personal collection to form the basis of this design's imagery, Shea combined multiple masked layers to form a duotone effect reminiscent of the silk screens that were more commonly used for graphic design in the past. His sharply limited color palette mixes black, red, white, and not a whole lot more. To extend the sharpness concept, he left an edge on all shapes and type by avoiding anti-aliasing; and by using GIF pattern dithering he was able to add a subtle cue from today's technology.

Setting the Tone with Type

The disorder of Blood Lust is particularly emphasized within the text; most paragraphs are positioned and formatted completely differently, leading to a cluttered and dissimilar look. Mixing and matching typefaces was a common technique used by Futurist designers, and positioning was often adjusted for maximum discord (FIGURE 1).

Figure 1. An example of futurist designF. T. Marinetti's "Les mots en liberté futurists" (1919).

Doing something unusual in Blood Lust meant adjusting positioning and spacing so that the assorted paragraphs would flow around each other and fill the page in an organic, unstructured way. While this sort of organization may be bad for logical reading order, there's something interesting happening that you may have noticedthe spacing and fonts of each paragraph result in varying densities, which in turn leads to differently toned paragraphs. As shown in FIGURE 2, the density is particularly noticeable when the design is slightly blurred to obscure the letterforms.

Figure 2. When blurred, the blocks of type take on different tones.

Within this particular design, much of the interest comes from the varying and random type color. Adjusting spacing with line-height, margins, and the font face itself will lead to different impressions of your message. Which of the treatments in FIGURE 3 is easier to read? These are considerations to keep in mind when applying type to your own work.

Figure 3. Examples of varying type color.

Note

In typographic terms, color refers not to pigment or hue, but instead to the perceived overall tone of a piece of text. The relationship between the figures of the letterforms and the surface or ground they sit on is one of contrast; type without contrast is unreadable. A by-product of this relationship is that spacethe spaces between strokes within a letter, between letters within a word, between words within a line, and between individual linesis affected by factors like the thickness of the type and the amount of letterspacing or word spacing.

In most cases, the design goal is to maintain a consistent typographic color throughout a body of work. There is only so much that can be done to accomplish this with CSS. While it's useful to keep in mind, much more important factors, like legibility and line lengths, should be attended to before considering type color.

Formatting Options

Blood Lust makes heavy use of the various text-formatting options that CSS provides. Once you get beyond the basics, like setting a font face and size, there are a number of different adjustments available that affect how your type is perceived.

By reading the CSS spec, and most books and tutorials on the subject for that matter, you will receive information on the technical aspects of each property but no insight on applying it from a design standpoint. Some CSS properties are based on deeply rooted principles of graphic design, but you'd never know that from reading a technical manual.

The next few pages detail some of the common text-formatting properties, where they came from, and how you might use them. Certain properties have been omitted (font-family, font-size, font-style, and font-weight) due to their inclusion elsewhere in this chapter.

Text Styling

The properties in this section allow for adjustment on the individual character level. In most cases, the font must have a pre-designed variant that matches the styling choice. Your system font list should shed light on which variants are available with each font you have installed. Viewers must have the exact same variants.

Font-Variant

This is a single-purpose property that sets your text in small caps. Initial capitals remain regular size, while all other text is rendered as smaller uppercase letters.

Possible values are normal and small-caps. Most fonts do not have small-caps variants, so the proper behavior for a browser is to scale down full-size capitals in place of lowercase letters. Hence, the warning about pre-designed variants doesn't apply to font-variant.

Example usage of font-variant:	Example results:
#quickSummary p { font-variant: small-caps; }

Text-Transform

Similar to the font-variant property, text-transform allows for more precise text-capitalization control. Possible values are capitalize, uppercase, lowercase, and none.

The capitalize value changes the first letter of each word to uppercase while leaving the rest unaffected, uppercase changes all letters to uppercase, lowercase changes all letters to lowercase, and none leaves the text unaffected.

Example usage of text-transform:	Example results:
#quickSummary p { text-transform: uppercase; }

Text-Decoration

Underlined text has symbolized hyperlinks since the beginning of the Web, but underlines on links and more may be selectively controlled with the text-decoration property. Possible values are none, underline, overline, linethrough, and blink. While none leaves text undecorated, underline will add a line below it, overline will add a line above it, line-through will add a horizontal line through it, and blink will alternate between visible and invisible text.

Tip

The CSS specification has even more detail about each of the font styling options; see "15 Fonts" (www.w3.org/TR/REC-CSS2/fonts.html#font-styling).

text-decoration may be one of the most controversial formatting properties, simply because of the annoyance it can potentially cause to viewers. Here are our guidelines for the safest use of each of the values:

noneThe default value for most elements; you should always have a reason for using anything but none.

Note

All properties discussed have an additional value of inherit that may be applied. It directs the browser to use the same value as the parent of the element in question. This is applicable across all CSS properties, and it may be safely assumed to apply to the following ones as well, even though we're not specifically listing it.

underlineUse only for hyperlinks. Text that is underlined but not linked will confuse the viewer. How many times have you tried clicking on non-linked underlined text yourself? Typographically, underline has other, more traditional uses, such as styling book titles; but the dominance of the hyperlink is unfortunately ingrained at this point.

overlineMath notation uses overline text to indicate averages, but very few other situations require it.

line-throughLimit all use of line-through to text that is editorially no longer relevant/factual/informative to the surrounding page and is worth deleting, but that still requires placement within it for some reason. Ideally, any text crossed out has been superseded by an updated equivalentversion tracking and revision history are good usage examples.

blinkUnless you urgently need to simulate a VCR blinking "12:00," pretend that blink doesn't exist. The <blink> tag was thoroughly abused in the early days of the Web, and not every browser supports the CSS equivalent anyway.

Example usage of text-decoration:	Example results:
#quick Summary p { text-decoration: line-through; }

White-Space Styling

We've seen how the contrast between letterforms and the canvas they rest on affects the perception of text. White space is a powerful visual tool, and, thanks to the advanced formatting capabilities of CSS, easy to control.

line-height

In centuries past, typographers would separate lines of text with strips of malleable lead; in time, the spacing between lines came to be known as leading. CSS provides simple and easy leading control with the line-height property. Possible values are an absolute value, a relative size, a length, a percentage value, and inherit.

Note that line-height doesn't require a unit. A value of 1.2 is the equivalent of 1.2em, or 120%a unitless value implies a scaling factor based on the text it's applied to, rather than an absolute size.

Example usage of line-height:	Example results:
#quickSummary p { line-height: 0.8; }

Letter-Spacing

The space between individual letters may be adjusted on a per-element basis using the letter-spacing property. Possible values are normal or a length in addition to the default space between letters.

Note

Noted typographer Frederic Goudy famously once said, "Anyone who would letterspace lower case would steal sheep." Use letter-spacing carefully, lest you be accused of livestock rustling!

Due to the low resolution of a screen, body text can only be letterspaced in proportionately large increments that look amateurish. For this reason, letter-spacing works best as a subtle touch to headlines and smaller snippets of text, and should be avoided for longer passages.

Example usage of letter-spacing:	Example results:
#quickSummary p { letter-spacing: 0.1em; }

Word-Spacing

Similar to letter-spacing, word-spacing allows adjustment of the space between words. Possible values are normal, a length or percentage, and inherit.

Other factors may influence a browser's ability to apply word-spacing, including justification (through use of the text-align property) and the white-space property.

Example usage of word-spacing:	Example results:
#quickSummary p { word-spacing: 1em; }

Text-Align

This is a property that allows you to center or justify text, as well as to align it to the left or right edges of the containing element. Possible values are left, right, center, and justify.

Because a browser performs justification automatically, traditional techniques that prevent unsightly gaps of textlike hyphenationare impossible. CSS-based justification often leads to situations like that shown in FIGURE 4. Because of this imprecise control, we recommend using traditional right- or left-aligned text whenever possible. Center-aligned text might be useful for headers and smaller blocks of text like quotes, but we recommend against using it for anything longer than a couple of lines.

Figure 4. Justification without hyphenation causes unsightly gaps within a section of text.

Example usage of text-align:	Example results:
#quickSummary p { text-align: right; }

All Things in Moderation

Freely mixing and matching font properties may work for a chaotic design like Blood Lust, but text on the Web is usually meant to be read rather than admired for its artistic qualities. The text-formatting options of CSS, if used judiciously, will allow you to facilitate legibility and maximum clarity for your site's viewers.