Cascading Style Sheets: Exchanging Type for Code
Obviously, Web designers cannot hire typesetters or printers to deliver the typographical needs of their Web pages. Pieces of metal type interact with HTML about as well as do pens and paper. The designer’s equivalent of the typesetter and printer is Cascading Style Sheets, or CSS. CSS, properly implemented in a Web site, defines the style or presentation of a piece of text that has also been defined by the page’s HTML code. In other words, the HTML describes what the text is; the CSS describes what it looks like (Briggs, Champeon, Costello, & Patterson, 2004).
Conveniently, CSS is capable of controlling many of the typographical elements traditionally manipulated by a typographer or typesetter. The developer writing the code needs to be willing to define the properties in question and decide whether to define her page’s text absolutely or in relation to the user’s browser and screen settings. For the remainder of this section, we will examine the most common CSS typographical properties and best ways of working with them.
Typeface and Font
For purposes of Web text, there are three basic typefaces:
- serif type - character strokes have “feet” or “flicks” at beginning and end
- sans serif type - character strokes are straight with no “feet”
- monospace type - each character takes up the same amount of space; mimics typewriter-style text
- (Whitbread, 2002, pp.166-173)
Within these faces are font names that many designers will recognize:
- Times New Roman, New Century Schoolbook, Georgia
- Arial, Verdana, Helvetica
- Courier, Teletype
In print, many fonts are designed to be capable of a number of variations, including:
- lightface, or light - a light version of regular type
- boldface, or bold - a heavy version of regular type
- condensed - a narrow version of regular type
- extended - a wide version of regular type
- italic - regular type that is slanted to the right; also called oblique
- (Craig, 1971, p.17; Whitbread, 2002, p.179)
Because of limited screen resolution, Web text is usually styled only into the boldface and italic variations (Gillespie, 2001).
Let’s begin building a CSS style declaration that will control the typography of a paragraph. The declaration will use the following properties for the characteristics above:
p {
font-family: Courier;
font-weight: bold;
font-style: italic;
}
Now our paragraph looks like this.
Now our paragraph looks like this.
What if, as Briggs, et al. (2004) point out, some of our viewers do not have the Courier font on their computers (p.111)? In such a case, the user’s browser will revert to its default font. The developer, however, can avert this instance by selecting more than one of the same type of font for this declaration. The user’s browser, then, will go down the list until it finds a font that it can execute.
p {
font-family: Courier, “Andale Mono”, “VT 100”, Terminal
font-weight: bold;
font-style: italic;
}
Now our paragraph looks like this.
Now our paragraph looks like this.
(Briggs, et al., 2004; Shaw, 2005)
Font Size
In traditional print typography, type size is measured in points and picas - 12 points to the pica, 6 picas to the inch. Both points and picas are absolute measurements, and reference the size of the type body that the type form is attached to (Craig, 1971, pp.23-24). CSS is capable of measuring font size in points. However, this ability should be reserved for creating style sheets that format a print copy of a Web page, where an absolute font size is appropriate. On screen, though, font points translate differently from operating system to operating system and from machine to machine. A 12 point font that is perfectly visible on one user’s computer may be too small to read on another’s (Byrne, 2004). We will discuss this problem further in the next section.
CSS controls font size for screen display through 3 relative measurements: px (pixels), em, and %.
px draws the number of pixels specified onto a user’s screen. The appearance of the pixels will change depending on the user’s screen and browser settings.
em multiplies or divides up or down from a property’s inherited value. If a browser displays a document’s body text at 14 points and its heading is styled at 2em, the browser will show the heading at 28 points.
% works the same as em, allowing, say, a footnote styled at 50% to appear at half the size of the regular text (Briggs, et al., 2004, pp.79-80).
p {
font-family: Courier, “Andale Mono”, “VT 100”, Terminal
font-size: 14px;
font-weight: bold;
font-style: italic;
}
Now our paragraph looks like this.
Now our paragraph looks like this.
Line Spacing
A font’s x-height gives its impression of size and density. X-height is the height of the lowercase letters, not counting the occasional extensions of “l”, “g” and so forth. It is called x-height because x is the lowercase letter that never extends or descends in any font, and so can always be measured for this height (Craig, 1971, p.24).
X-height is important, because this is the measure of interlinear space, or the space between solid lines of type. Typesetters call it leading because they inserted strips of lead between the lines of metal type to create spacing. Users familiar with word processing might be more comfortable with the terms “single-spaced,” “double-spaced,” and so forth. There are no hard rules regarding the use of line spacing, but an x-height of 1.5 (or “one and a half-spaced”) is a good beginning for readable text. Generally, wide columns of small type need more line spacing than do short columns of large type (Briggs, et al. 2004, pp.109, 115). Web designers should continually test their line spacing skills, even after they have developed a feel for measurements and fonts that work together.
p {
font-family: Courier, “Andale Mono”, “VT 100”, Terminal
font-size: 14px;
font-weight: bold;
font-style: italic;
line-height: 1.5
}
Now our paragraph looks like this.
Now our paragraph looks like this.
Decoration
Print typographers seldom address underlining in their work because they have other means of indicating the information an underline is supposed to convey. For instance, where a typist would underline a book title, a typographer or typesetter will set the title in italics (Whitbread, 2002, p.196). CSS is capable of manipulating lines over, under, and through a piece of text, but must do so without a lot of precedent from print typography. CSS calls the properties text decorations. A Web developer who uses them sparingly may find that they work well to convey certain information, but if overused they will only annoy the user and clutter the page (Briggs, et al., 2004, pp.118-119).
p {
font-family: Courier, “Andale Mono”, “VT 100”, Terminal
font-size: 14px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
}
Now our paragraph looks like this.
Now our paragraph looks like this.
Line Length
When print typographers set lines of type, they typically work toward an average of 60 characters per line depending on the font and format of the document. Understanding the triangulation of font size, line length, and line spacing is part of the art of typography - having one of these elements out of balance creates unreadable text. Extremes of any one require adjustments to the others. Wide columns of text, for instance, usually need more line spacing. Narrow columns need less, and will also benefit from use of a smaller font (Whitbread, 2002, pp.186-187).
This is another difficult skill that the Web developer will need to play with in order to obtain consistent, satisfactory results. Unfortunately, the Web’s browser and screen media make line length and column measure more complicated than does the print environment. CSS measures fonts and spacing in absolute and relative terms, as we discussed above with fonts. It is more complicated to obtain a consistent number of characters per line when using relative measurements, but using absolute measurements will lock many users out of a page.
Briggs, et al. (2004) suggest using the em measure, since it is based on the current type size. When setting a particular font at a given em width, the appearance on screen of text set in that font will flow with screen’s current pixel size (p.123). The authors offer a chart of commonly used fonts and the em widths that will result in an optimally readable number of characters per line (p.123).
p {
font-family: Courier, “Andale Mono”, “VT 100”, Terminal
font-size: 14px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
width: 20em;
}
Now our paragraph looks like this. Now our paragraph looks like this. Now our paragraph looks like this. Now our paragraph looks like this. Now our paragraph looks like this.
Our declaration is now capable of styling a basic paragraph for users reading different platforms, browsers, and monitor settings. There are many more nuances to manipulating Web typography with CSS than these. The properties described here, though, will help developers get a basic grasp of their power over the appearance of text on their pages. Finally, developers must consider how their textual manipulations will affect users’ experiences.
