THE JOURNAL OF EDUCATION, COMMUNITY, AND VALUES
by Michael Geraci <geracim@pacificu.edu>
Series Introduction
The web has quickly become a repository of multimedia content. Today, the average web surfer is accustomed to experiencing animated menus, streaming sound, and photographs that transition on and off the screen with the cinematic flair of a Hollywood movie. Despite this, the information that we seek amidst these media-rich presentations is still primarily text-based, and while the creation of multimedia magic remains in the hands of skilled — or daring, at the very least — practitioners, the careful and conscientious display of text on the web is something that is well within the reach of mere web mortals.
This is the first installment in a four-part series in Interface that addresses web typography from a pragmatic perspective. This particular piece will set the stage for the series by presenting the case for improved typography on web pages, defining key terminology; and best practices will be showcased.
Part two in the series will provide some research-based recommendations for online typographical practices, while parts three and four will demonstrate how to set up a typographically appropriate stylesheet in Macromedia Dreamweaver that can be applied to single pages and multiple sites with ease. All of this is made possible through the wonder of the Cascading Stylesheet Specification (CSS), a rules-based "language" that controls the presentation of content that has been structured through a standard markup language, typically HTML.
Part One: The need for improved typography
The Wikipedia defines typography as the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or digital form.
This particular definition is useful because it specifically lists the most critical elements of typography, and it is these elements that will be considered in this series.
The practice of typography is as old as written communication itself, and therefore traces its roots back to the Roman Empire. This long and storied history is reflected today in many of our standard typefaces, which share the physical characteristics of letterforms created with flat-tipped reed pens, and even the chisels, employed by the ancient Romans. The history of Web typography, however, is not as glorious; in fact, the terms "Web" and "typography" were considered by many in the field to be oxymoronic. Early iterations of HTML left no room for typographic controls. Even basic typographical considerations, such as typeface selection and generalized font sizes, were not possible until the browser wars between Netscape and Microsoft during the late 1990's.
While CSS, and its precursors, had been under consideration and development by 1993, mainstream Web browsers did not support it until 1999, when Microsoft released version 5 of its Internet Explorer browser, and despite the claims of any of the major browser companies at that time, the adherence to the full CSS specification was incomplete and rife with errors and inconsistencies that made typographic presentation a trial and error affair that was so ingrained in the applications that it occasionally rears its ugly head to this day.
It is with this knowledge of Web typography's fledging existence that we set forth on this exploration into a more appropriate use of type in our web pages — to take advantage of the renaissance in which we find ourselves at present. Like all worthwhile journeys, we should take a moment to answer the ever-burning question of why.
Why should we concern ourselves with typography on our web pages?
It is a plain and simple fact that we publish information to this medium in order for it to be read, and in having it read, we are seeking to communicate a message to our audience. Like all thoughtful communication, the intention is to first attract a readership and then sustain it; to deliver a message and have it resonate such that it finds a home in the minds of those that would be motivated to understand it.
Motivation plays a key role in the delivery of educational material via the WWW. While type is just one element in the overall gestalt of our web pages, it is still the vessel in which we entrust our primary message. The price of poor design has been shown to reduce learner motivation to engage in the content [1] and, "at worst," according to Vaughn & Hinshaw (1995) "drives them completely away from the product." (cited in [2] Torgerson, 2000). According to [3] Costello, et. al. (1995)
In developing several CBT [Computer-Based Training] products over the past few years, [we have] learned a great deal about the variety of factors (technical, instructional, psychological, aesthetic) that impact effective CBT design. But among all these factors, we consider visual design to be the most critical factor because it is the visual medium that carries the instructional message. Therefore, effective CBT design must first adhere to the principles of effective visual design. (p. 3)
If we put research and anecdotal evidence aside for a moment, it still stands to reason that viewers who are not intrinsically motivated to engage with web content, will make immediate decisions about the value of the content based on their first impressions of it. It is in this realm that typography exists to welcome readers and to hopefully reward them by easing the process of extracting meaning from our typed content.
It is fortunate for us that good web typography is not rocket science. The application of a few easy to grasp typographical concepts will allow us to render text that encourages reading, aids in information retrieval, and lowers the "cognitive overhead" of the whole process.
Typographic terms and concepts
Text on the page or screen can be considered from two different levels that are intertwined, and equally important. The first level is of the individual characters in a typeface, and the units they combine to form (aka words and sentences). The second aspect is that of the text block, the single visual unit composed of all those characters, words and sentences. Blocks of text combine to form "pages" (or screens) of content.
When our viewers first gaze upon our content, they are presented with the density of the page. Page density has little to do with the actual amount of content on the page, and everything to do with the ratio of content to open space (designers will refer to this unused space as "negative" or "white" space). The goal is to convince the viewer that little effort will be required to read, or even just peruse, our pages. All of this assumes, of course, that our readers aren't highly motivated to read what we've written, despite its obvious brilliance. A motivated reader will slog through just about any page of information, no matter how dense and uninviting. Yet, to maximize the ability for our message to be comprehended and retained, the process should be as unencumbered as possible. Newspapers, like the Wall Street Journal, know this all to well, as they constantly seek to streamline the accessibility and retrievability of information within their pages without increasing their overall production and materials expenses.
Typeface: a family of characters that all share similar geometric and physical characteristics. A single typeface can have many styles and character variations, but all characters share a common set of properties that unifies them. Helvetica is a typeface that has variations too numerous to list, yet all its characters exhibit a specific set of visual properties.
Font: often used synonymously with "typeface", a font is really a specific representation of a typeface. Fonts have size, style, and other properties. 12 pt. Helvetica Neue Semibold is a font.
Serif & sans serif: the small flourishes that adorn the end-strokes of some characters. Serifs exist to guide the eye through letterforms. They are like little pointers that flow through words. In the taxonomy of type, serifs are used as a primary classification. Type is either serif or sans serif. Times New Roman has serifs; Helvetica does not.
Tracking: also known as letter spacing, tracking is the amount of space applied uniformly between individual characters. All typefaces have a default letter space; tracking is a control that can be manipulated by authors that alters the default spacing between characters. Tracking should not be confused with "kerning", which is special character spacing based upon the geometric qualities of two adjacent figures. As an example, a lowercase e can be set more closely to an uppercase V based on their relative geometry. Tracking is possible in HTML via CSS, kerning is not.
Line length: while it really doesn't need defining, line length is such a compelling concept, especially in the online context, that it bears mentioning. Simply put, line length is the length of a single line of text before it breaks into another line. Line length can be measured as a percentage of the total available width of the page, the number of characters, or standard linear units, like inches, and centimeters.
Leading: the amount of space that separates successive lines of text. More than just single-spacing or double-spacing, leading is a block-level property that allows for pixel-level control over lines of text.
x-height: a relative measurement of typeface size based on the height of the lowercase x in any typeface. The ratio of the lowercase x's height to other characters in a typeface, gives certain faces an optical size that relates directly to the typeface's readability. Lucida Grande has a larger x-height than Gill Sans; as a result Lucida Grande "feels" larger on the screen and can be set at lower sizes without sacrificing readability.
Point-size: a standard measurement of font height, one point is equal to 1/72 inch. A font's point size is based upon the number of points from the lowest point of any character in the face to one point above the tallest point in any character, typically the capital letters. Point size is not always a good indicator of a font's "actual" size on the page or screen since many fonts are designed with small x-heights, thus making the font appear much smaller than other font's we may be accustomed to at a given point-size. This occasional ambiguity is further exacerbated by the fact that Windows and Macintosh computers use different mathematics to translate point-sizes for on-screen display. As a result, fonts at a given point-size appear 25% smaller on the Mac than they do on Windows systems.
For more information:
If you're intrigued by all this, and can't wait for the next installment, here are some resources on the subject of on-screen typography.
http://www.redsun.com/type/
http://www.webmonkey.com/webmonkey/01/45/index3a.html
http://www.flywebmaster.com/webdesign/tips/typography.php
http://www.webstyleguide.com/type/index.html
Part Two: What the research says about typographical improvements
Witness web sites with a thoughtful presentation of type:
http://www.wpdfd.com
http://www.alistapart.com
http://www.webstyleguide.com
http://designforum.aiga.org
http://bcis.pacificu.edu/journal — and you thought it was just the great content that makes this an enjoyable space on the web.
Cited:
[1] Lee, S.H. & Boling, E. (1999). Screen design guidelines for motivation in interactive multimedia instruction: A survey and framework for designers. Educational Technology, v39 n3, 19-26.
[2] Torgerson, C.N. (2000). CBI interface design: A review of multi-disciplinary research and evaluation of a current CBI product. Unpublished master’s thesis, University of Alberta, Edmonton, Alberta.
[3] Costello, J., Curtis, S., Joyce, E., Singer, I. (1995) Interactive multimedia design: A visual approach. Journal of Interactive Instruction Development, v8 n2, 3-7.
References:
Harrell, W. (1999). Effective monitor display design. International Journal of Instructional Media, v26 n4, 447-458.
Head, A.J. (1999). Design Wise: A Guide for Evaluating the Interface Design of Information Resources. Medford, NJ; CyberAge Books.
Horton, S. (2000). Web Teaching Guide: A practical guide to creating course web sites. New Haven; Yale University Press.
Pat McGregor - Online Community: Is it really a village?
Leonard D. DuBoff and Marisa N. James - Are You Properly Considering the...
Mark Szymanski - A Windowless Room With a View: How Digital Mapping...
Chris Pruett - Defining Challenge
Michael Geraci - Web Typography: Let Your Words Speak
Peter Warrren and Michael Streeter's Cyber Alert
Richard Davis's Politics Online: Blogs, Chatrooms and Discussion Groups...