Manipulating Web Typography with Cascading Style Sheets:

A practical approach with consideration for users' needs and lessons learned from print typography

Brief Literature Review

Reed & Davies (2006) argue that typography should be more than a sub-specialty of graphic design. The authors present the idea that the field of computer science is currently lacking input from the field of graphic design. They argue that this input is needed because of the convergence of programming and presentation. Computer programmers should understand principles of typography, color, and layout in order to create the best dynamic and interactive programs, including Web materials. Kahn & Lenk (1998) examine detailed properties of print typography in the context of graphical interfaces such as a Web page or Windows dialogue box. Their piece contains many images and explanations, and describes both the benefits and difficulties of applying printed type principles to the electronic environment.

Mackiewicz (2003) and Mackiewicz & Moeller (2004) argue for training on the appropriate use of fonts, or typefaces, as these articles refer to them. The authors’ studies are conducted on groups of student technical writers. Both conclude that students can distinguish between the “personalities” of fonts meant for reading (text fonts) versus those meant for evoking emotion (display fonts). However, the authors note that students lack the vocabulary or skill needed to further distinguish among text fonts that are appropriate for different textual presentations. The authors argue that this lack of skill results in documents that deserve, for example, a professional tone, but are undermined by the author’s choice of fonts better suited for social or technical pieces.

Gribbons (1993) pushes the argument for careful font selection even further by presenting a human factors approach to typography. He argues that such an approach can counteract the less-than-ideal conditions under which many users interact with textual information. He demonstrates, for instance, that the designer can accommodate users’ long screen viewing times by providing fonts designed for screen or monitor media as opposed to those designed for paper.

Several authors discuss typography’s influence on particular aspects of a text and its effects on users. An older study by Tullis, Boynton, & Hersh (1995) examines reading speed and comprehension of users reading text on a screen. The text was cast in several sizes of serif and san serif fonts. They conclude that users demonstrate higher reading speed and better retention when the screen displays information in larger sans serif fonts. In a study of screen reading comprehension, speed, and scrolling patterns, Dyson & Haselgrove (2001) conclude that a line length of 55 characters provided the best comprehension and was read fastest by users.

These pieces from the literature demonstrate the wide variety of uses to which typography can be put in a computing or user-interaction environment. The literature also highlights areas of text design about which Web designers and developers should be concerned:

Accept the principles of typography as tools for creating optimal content and formatting.
Understand font terminology and properties.
Select an appropriate typeface for the content.
Style text for readability by tailoring type sizes and line lengths for the screen rather than the printed page.

Web developers can manipulate these properties just as print typographers do, but their tools are very different. In the next section, we will compare traditional typesetters’ terminology to Web developers’ typographical tools, and discuss how to use those tools in daily Web work.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 License.
Copyright © 2005-2007 Jamene Brooks-Kieffer. Email jbkieffer@gmail.com
Created December 2005. Last updated January 22, 2007.