|Writing||L O R E T T A . S T A P L E S|
Typography & the Screen:
Note: Figures could not be provided with this online version due to copyright constraints. Citations at the end of the article provide source information for these illustrations.
Digital technology radically influenced typographic design beginning in the early-1980s (1). The computer enabled designers to create and manipulate letters in new ways, offering new options for crafting letterforms and "outputting" them--whether in the medium of toner particles on paper, or pixels on screen. Digital tools at first necessitated (due to technical constraints), and later explicitly encouraged (due to technical advances) specific kinds of representation that would challenge their historical antecedents. Now, in the late 1990s, the mutation of letters continues. The spatial and temporal opportunities of cyberspace are resulting in even more radical depictions of letterforms that offer expanded formal and stylistic possibilities while further challenging the norms of reading and writing.
This paper chronicles the technical developments responsible for the digital revolution in typography during the 1980s and 90s. It is an informal history based largely on my own observations as an early practitioner of "graphical user interface design"--one formally trained in graphic design and privileged to work at Apple Computer during the early 1990s. Because Apple was so instrumental in popularizing the technologies that stimulated typographic experimentation within the graphic design community during this period, my paper focuses on the Macintosh platform.
Early Concepts and Technical Advances
In the 1970s, researchers at the Xerox Palo Alto Research Center (Xerox PARC) pioneered WYSYIWYG and "direct manipulation," key concepts in graphical user interface design. Their efforts--based on earlier pre-Xerox research--culminated in the Xerox Star, a computer system introduced in 1981, and its later successor, "ViewPoint" (fig. 1) (2). The Star utilized a high resolution visual display consisting of windows, icons, and actual-size images of document pages that computer users could "handle" through a novel input device, the mouse, used to control a small pointer on the screen. Users manipulated these virtual objects by touching them with the pointer and then clicking with the mouse, an operation called "selection" used to isolate an object and its corresponding range of possible actions. Once selected, users could further manipulate the object, performing actions such as moving and copying.
The document served as the seminal object in this scheme. While Xerox, a pioneer in photocopying technology, could not have desired a wholly paperless office, the company pursued office automation as a strategy for expanding its business markets. Electronic document production and storage promised new marketing opportunities based on computer systems designed for offices.
WYSIWYG employed the use of actual-size images of document pages on the computer screen and the corresponding ability to print them as they appeared. The Macintosh's 72 pixel-per-inch display corresponded closely to the number of dots used to print a Macintosh file on its companion product, the dot-matrix based ImageWriter, making for a tight match between screen image and printed output (3). While seemingly trivial now, in 1984 this innovation challenged the sterility of computerized word processing by presenting a graphically-enhanced environment for typing and visibly altering text through the specification of multiple fonts, sizes, and styles.
The tight coupling of image to output changed not only the way people created documents, but the way they thought about them. Computer users increasingly considered text's appearance central to the writing process. Early Macintosh users, discontent with impoverished "text entry," readily exploited typographic control through the built-in styling capabilities of the Macintosh Operating System (4). These included, by default, the ability to choose among multiple typefaces and font families that could be installed in the Macintosh system file. In addition, Macintosh applications included standard options for rendering type as "plain text," bold, italic, underlined, outlined, and shadowed in a range of sizes, usually 10 to 24 points.
The coarseness of dot-matrix printing made for degraded visual quality, but this changed quickly enough with the introduction of the Apple LaserWriter printer in 1985. The LaserWriter enabled the Macintosh to rival offset printing through a technology that greatly enhanced the appearance of type and images (fig. 2). In moving to 300 dots-per-inch, the LaserWriter rendered letters considerably more smoothly, able to define subtler details in contour that would especially affect the appearance of serifs and smaller sizes of type.
While Apple's LaserWriter provided the hardware technology that would democratize typographic design through the rise of "desktop publishing," Adobe Systems provided the software innovation through PostScript, a "page description language" (PDL) built into the LaserWriter. PostScript made possible the printing of detailed page layouts complete with images and text arranged and scaled to the designer's specifications (5). Sophisticated graphic layouts previously requiring laborious manual composition could now be assembled with ease through software programs that made page layout almost as easy as word-processing. These programs, when used in conjunction with the LaserWriter, ensured graphic output whose quality rivaled offset printing. The LaserWriter also included a limited number of built-in PostScript fonts that could be supplemented by fonts downloaded from the Macintosh system folder to the printer's memory.
To showcase the capabilities of the LaserWriter and PostScript, Apple worked with selected software companies to develop page layout applications. Aldus' PageMaker, Boston Software Publishers' MacPublisher, and Manhattan Graphics' ReadySetGo provided programs ranging in price from roughly $150 to $500 (6). All supported the integration of text and images in multiple-column formats. While the documents produced with them could be output to any Macintosh-compatible printer, they were especially impressive when transformed by the LaserWriter's PostScript. Within a few years, desktop publishing supplanted professional typesetting and offset printing as the preferred low-end printing option.
The Digital Construction of Letterforms
The cathode ray tube (CRT) used pixels ("picture elements") as the defining matrix for the construction and display of letters. The Macintosh of 1984 provided only two color options for their display: black and white. The Macintosh Operating System itself required different typefaces in order to communicate necessary textual information in the Macintosh interface. Chicago and Geneva, bitmapped typefaces designed to suit this need, typographically defined the Macintosh "look and feel" until 1997 (fig. 4). Chicago 12, used in pulldown menus and dialog boxes, utilized a standard stroke width of 2 pixels so that gray versions of usually black letters could be created by alternating black and white pixels. (Gray was required to signal the unavailability of various commands.) Geneva 9 appeared on the Macintosh "desktop" to label icons, and in list views of files and applications in the Finder.
While the typographic needs of the Macintosh interface posed one set of requirements, printed documents posed another: variety. The original Macintosh provided a number of bitmapped typeface options, most of them novel. A few classics emerged, however--Helvetica, Times, and Palatino among them--with other options available from font vendors like Adobe.
PostScript laser printers used economical descriptions of letterform outlines, as distinct from memory-intensive bitmaps, to form letters on printed pages. Thus a given font family required two separate descriptions--one for screen display, the other for printing. In fact, a third technology mediated between bitmap and outline during the Macintosh printing process: Apple's QuickDraw "drew" all images to the Macintosh screen. Printing from a Macintosh to a PostScript laser printer thus required the translation of QuickDraw commands into PostScript, a task undertaken by the Macintosh Operating System's Print Manager in conjunction with the LaserWriter driver (13).
The NeXT computer, introduced in 1989, utilized PostScript for both screen display and printed output, eliminating any need for intermediate translation (fig. 5). In addition, the NeXT fully exploited grayscale technology in its user interface, an enhancement of the visual standard established by the Macintosh. The NeXT interface, through an expanded range of values from black to white, displayed icons and dialog boxes modeled with greater dimensionality, pushing the visual space of the graphical user interface from 2- to 3-D.
Corresponding Innovations in Graphic Design
At the same time in Los Angeles, April Greiman, a Swiss-trained graphic designer, began experimenting extensively with digital imaging and typography in her printed work. Like Licko and VanderLans, she used pixellated letterforms and pictures in posters and brochures, later incorporating video imagery as well (fig. 7) (15). By bringing the actual look of the screen-whether CRT or television monitor-to paper, Greiman began to challenge the authority of the page as official bearer of the word. Trained at Basel's Schule für Gestaltung, Greiman had already garnered a reputation for combining the rigor of Swiss formalism with the irreverence of California pop to create an entirely new look and attitude in contemporary graphic design--"California Swiss." Silicon Valley's influence transformed her work even further by providing a new formal vocabulary explicitly shaped by digital technology.
While pixellation characterized the look of these early typographic experiments, blurring and antialiasing characterized the later look of digital typography (16). "Aliasing" is a technical term used to describe the stairstepped appearance ("jaggies") of curved edges of forms composed of pixels. In letterforms, aliasing is especially problematic because this stairstepping interferes with the smoothness of curvature required to define so many individual characters. The problem is compounded in typefaces with serifs and in type rendered in small sizes, since so few pixels are available to create each letter.
Antialiasing solved this problem by blurring the edge of the letter into its background (fig. 8). For example, the edges of a black letter resting on a white background, when antialiased, reveals the insertion of gray pixels along the contours of the letter. Only computer systems capable of displaying more than two colors (black and white) could support antialiasing. While antialiasing eliminates the jagged look of letters on the computer screen, it also diminishes their legibility by decreasing edge contrast. The loss of contrast between letter and background virtually obliterates smaller sizes of type when antialiased.
Early Macintosh software programs for graphic editing did not include antialiasing. Until the introduction of the Macintosh II in 1987, the Macintosh computer supported only black and white displays. With grayscale technology, and then color, antialiasing became an obviously desirable feature later exploited in another innovative Adobe product, Photoshop, introduced in 1990.
Its developers originally intended Photoshop for use in high-end digital photo-retouching. As such, Photoshop presumed the existence of an image, in contrast with paint programs that provided a clean slate. Photoshop integrated a number of powerful yet relatively easy-to-use tools for editing images and for adjusting and modifying color attributes. In addition, it provided a limited set of tools for creating and adding type to images--tools seized upon by graphic designers looking for new alternatives to standard typesetting in the desktop environment.
Adobe's earlier and equally influential product, Illustrator, had quickly become the preferred high-end drawing tool for digital designers. Behind its sophisticated interface, Illustrator automatically generated PostScript code during the drawing process. This code could be downloaded directly to any PostScript printer as a text file of PostScript code or as "encapsulated PostScript" (EPS), a format which retains a visual preview of the image created.
In contrast, Photoshop was a high-end bitmapped graphics program for editing pixels (17). While this distinction may seem negligible, it is key. Photoshop provided designers with the technology for easily compositing photographic images and type within a single surface (18). The unifying layer of pixels comprising them both in essence demoted letters to the status of pictures. This revolutionized typography by radically altering the way designers conceptualized and executed typographic (as opposed to image-based) work. Photographic space equally subsumed the two, undoing the descriptive or adjunct relationship usually borne by text to image. In a culture skeptical toward the visual in the first place, images had nothing left to lose, letters everything (19). This blurry affiliation of letters and images became the new norm for graphic design.
In addition to its limited but significant phototypesetting capabilities, Photoshop's "filters" provided a readily available set of commands for applying sophisticated visual effects to an image at the touch of a button. England's Neville Brody began fusing images and type in 1992, designing provocative posters that would showcase Photoshop's photomanipulative powers (fig. 9) (20). He toyed extensively with ambient, blurred compositions, as did many others, including P. Scott Makela at Cranbrook in the U.S. (fig. 10).
The dissolution of the word continued as a major trend throughout the 1990s, with David Carson a major instigator. His pioneering sensibility, first at Beach Culture magazine and then Ray Gun, established new thresholds for type's legibility (or lack thereof). Often criticized, Carson's controversial work further threatened the authority of traditional typography through extensively distorted letterforms and erratic layouts (fig. 11). By offering an alternative to the more refined "production values" of TV, film, video, and advertising, Carson challenged the prevailing sensuous norms of mass media. As could be expected, however, the mainstream readily absorbed his once-radical esthetic.
Paper vs. the Screen
The suite of digital tools used to develop multimedia products supported numerous options for media creation and integration. Text (again, in multiple formats), still and motion graphics, video, and sound could be brought together within a single environment and then orchestrated through built-in programming languages. Once "compiled," users could navigate these multimedia spaces freely, choosing among pre-programmed options specified by the designer.
Despite the opportunities created by multimedia's screen requirements, typeface options remained limited. Among the hundreds of digital fonts available for use, most provided bitmaps not finely tuned for the screen, but rather, coarse counterparts to their corresponding outline files (again, these PostScript outlines were used in printing). Screen fonts remained of secondary importance despite the demands of the new medium.
A few insightful designers (Bigelow & Holmes already mentioned) did recognize the needs of the screen and worked to create more choices. Apple developed proprietary screen fonts, the Espy family, for use in its instructional products in 1993. Espy served as a legible alternative to Chicago and Geneva, which were too closely identified with the look of the Macintosh desktop. Matthew Carter, an experienced type designer who'd already tackled numerous challenges in designing for various typesetting technologies, co-founded Bitstream to develop digital typefaces. Responsible for many print and screen-based innovations, in 1995 Carter designed Walker, a typeface commissioned by the Walker Art Center that featured interchangeable "snap-on" serifs (21). He later worked with Microsoft to design proprietary screen fonts.
Adobe Systems had quickly emerged as the leading provider of digital fonts, but printing remained the company's priority given PostScript, which had never gained acceptance as a screen display technology. Nonetheless, many of their font families included well-drawn bitmaps used by early designers of electronic media. Adobe's 1990 product, Adobe Type Manager (ATM) contributed significantly to the quality of screen type in its ability to smooth and scale type to any size, using only a limited number of bitmaps along with the font's corresponding outline file, both stored in the Macintosh system folder (22). With ATM, designers could generate type sizes beyond the 10-24 point bitmaps typically furnished by type publishers. While ATM improved the onscreen look of larger type sizes, small sizes proved a persistent problem. Designers wanting small sizes of type relied on the 10 and 12 point furnished bitmaps or the automatic scaling of the Macintosh system, which usually provided poor results.
In the meanwhile, Apple began developing an alternative type format to rival Adobe's PostScript fonts. TrueType relied on auto-scaling to generate type sizes as needed, side-stepping PostScript. A "font war" ensued, with Apple and Adobe vying respectively to become or remain the industry standard. Eventually, both companies conceded, Adobe publishing its Type1 standard to support the creation of non-Adobe PostScript fonts, and Apple supporting Adobe Type 1 fonts in addition to its own TrueType format (23).
Developers of authoring tools generally neglected typographic needs, but by 1996, Director included antialiasing as a feature of its built-in text editor. Designers could now create dynamically re-editable text whose smooth appearance rivaled that created by an external graphics editor like Photoshop.
Typography and the World Wide Web
With users given the option to freely override the designer's specifications, most graphic designers made use of tools like Photoshop to create text that could be set, antialiased, and saved as a graphic file. Despite the economy and efficiency of HTML (24) text, which requires no downloading time and remains dynamicaly re-editable, most graphic designers entering the arena of Web design chose (and continue to choose) "graphic text" as the means through which to ensure a stable typographic appearance on Web pages, reserving the use of HTML text for lengthy passages.
Graphic designers and clients alike considered the subversion of graphic identity by Web browsers a distinct problem. In an effort to enforce graphic identity, new companies like @Home Network--founded to bring Web access to the home through the infrastructure of cable television--devised font strategies to override user preferences. @Home's proprietary browser automatically displayed HTML text in @Home's signature fonts (a default setting users could change, however). This strategy was in place by the time of the product launch in 1996. @Home's creative director, Roger Black, created the product's look--as he had done successfully for the New York Times, Newsweek, and a number of other popular magazines. The product strategy strengthened @Home's overall look and feel, critical for a Web publication serving as a directory to the best on the Web. @Home's editorial identity offered a potential competitive advantage against search engines capable of directing users to specific Web pages and thus bypassing any intermediate editorial commentary that might urge or discourage visiting a given Web site.
At the same time, Black's experience as a print designer limited his ability to recognize that the "magazine" served simply as a metaphor, and perhaps not the appropriate one for such an innovative medium. Black might have chosen television, film, or even architecture as the organizing metaphor for @Home's browser, breaking new ground in subverting the "pageness" of the Web. Other graphic designers would follow suit, bringing the limitations of page-oriented conceptual models to Web design.
In an effort to establish a standard that would unify digital type formats, an industry consortium proposed the OpenType format early in 1996. Through OpenType--a "common container format for TrueType and Type 1 fonts"--Adobe and Microsoft promised greater typographic control on the Web through the ability to embed fonts in HTML documents (25). Other efforts, including TrueDoc, a joint initiative between Adobe and Bitstream, also assure greater typographic control of Web documents (26). On the whole, however, these efforts have been slow either in development, in gaining industry support, or in adoption.
Typography and Computation in Cyberspace
Since Muriel Cooper's death in 1994, the Visible Language Workshop has been supplanted by another Media Lab research group headed by Cooper's heir apparent, John Maeda. His Aesthetics & Computation Group explores the intersection between typography and programming to exploit computer processing power unconstrained by authoring tools. Maeda trained as a computer scientist, but his interest began shifting to graphic design while still a student. After completing undergraduate and graduate work at MIT, he earned a doctorate at Tsukuba University Institute of Art and Design in Japan. As an award-winning art director in Japan, he explored print and interactive design, and published whimsical electronic typographic works (fig. 13) (27). Maeda represents a new breed of designer--the programmer/typographer--destined to drive the future of graphic design innovation.
Outside the academy, J. Abbott Miller of the design studio Design/Writing/Research undertook innovative experiments in dimensional typography. Using high-end computer workstations, Miller and his colleagues created three-dimensional letterforms (28). Lathing, extrusion, and texture-mapping defined new typefaces as well as novel interpretations of existing classics. While Miller himself acknowledged these studies as conceptual explorations, they have already proved influential. Ji Byol Lee's lathed version of Univers, Univers Revolved (fig. 14), appeared in the pages of the New York Times Magazine of September 28, 1997, an issue on the impact of computing in contemporary life. The image of the letter in cyberspace once again made its way back to the page.
By making it possible for designers to conceptualize and realize letters in new ways, digital technology provided the platform through which words could be ultimately subsumed in the larger pictorial space of the image, leveling the relationship between the two. In so doing, digital technology revised the status of the written word in the late 20th century.
2. Jeff Johnson et al., "The Xerox Star: A Retrospective," IEEE Computer 22, no. 9 (September 1989), 11-29.
3. The 72 pixel-per-inch display was designed to correspond with the point since it was the standard unit of measurement for specifying type. Johnson et al., "The Xerox Star: A Retrospective," 12.
4. Computerized word-processing's leading product at the time was WordStar, a program that supported limited WYSIWYG capabilities, but without extensive typographic control. Roger B. White, Jr., WordStar with Style (Reston, VA: Prentice Hall, Reston Publishing, 1983).
5. The PostScript PDL was not wedded to a particular output device, however. In being "device independent," PostScript document descriptions contain no specific information regarding output devices, and as such will print at whatever level of resolution the given output device makes available. Frederic E. Davis et al., Desktop Publishing, (Homewood, Illinois: Dow Jones-Irwin, 1986), 167.
6. Davis et al., Desktop Publishing, (Homewood, Illinois: Dow Jones-Irwin, 1986), 95-99.
7. See Richard Rubinstein, Digital Typography: An Introduction to Type and Composition for Computer System Design (Reading, MA: Addison Wesley, 1988) for a comprehensive description of digital typographic innovation from its inception through the late-1980s.
8. Ibid., 141.
9. Ibid., 141.
10. Donald E. Knuth, Computer Modern Typefaces (Reading, MA: Addison Wesley, 1986).
11. Rubinstein, Digital Typography, 141-145.
12. Charles Bigelow and Kris Holmes, "The Design of Lucida®: an Integrated Family of Types for Electronic Literacy," in J.C. van Vliet, Text Processing and Document Manipulation, Proceedings of the International Conference University of Nottingham, 14-16 April 1986, (Cambridge: Cambridge University Press, 1986), 1-17.
13. Jim Heid and Peter Norton, Inside the Apple Macintosh (New York: Simon & Shuster, Brady, 1989), 221.
14. Rudy VanderLans, Zuzanna Licko, and Mary E. Gray, Emigre: Graphic Design into the Digital Realm (New York: Van Nostrand Reinhold, 1993), 18-25.
15. April Greiman, Hybrid Imagery: The Fusion of Technology and Graphic Design (New York: Watson-Guptill Publications, 1990), 55-99.
16. For more on the technical aspects and esthetic and cultural implications of blurring in contemporary graphic design, see Loretta Staples, "What Happens When the Edges Dissolve?" Eye 5, no. 18 (Autumn 1995), 6-7.
17. Graphics programs are bitmap- or vector-based. Vector-based programs rely on mathematical descriptions for describing geometrical forms. Their interfaces generate drawings consisting of curved or straight line segments with "handles" used to conduct editing operations like resizing, rotating, and skewing.
18. Photographic images and text were handled separately in manual mechanical production for offset printing, text and line art assembled together while photographs underwent the intermediate process of halftoning (conversion from continuous tone to dots) prior to mechanical insertion. FPOs ("for position only"), low-resolution photo reproductions-were commonly used on mechanical boards as placeholders for the higher quality images that would replace them later during the film stripping process. Even within page layout programs, text and images remain separate due to their respective technical requirements for outputting.
19. Barbara Maria Stafford has written extensively about the status of the visual in contemporary culture, tracing its decline to the Enlightenment and elucidating biases toward the linguistic in contemporary thought. Barbara Maria Stafford, Good Looking: Essays on the Virtue of Images, (Cambridge, MA: MIT Press, 1996).
20. Jon Wozencroft, The Graphic Language of Neville Brody, (New York: Rizzoli, 1994), p 16.
21. Ellen Lupton, Mixing Messages: Graphic Design in Contemporary Culture (New York: Princeton Architectural Press and Cooper Hewitt, National Design Museum, Smithsonian Institution, 1996), 34.
22. ATM was not explicitly designed for this purpose, however. ATM allowed non-Postscript printers to print Adobe fonts, desireable because it strengthened Adobe's position as the premier digital type foundry. Improved screen appearance was a side benefit for print designers wanting improved screen previews. Gregory Wasson, "Adobe's font utility isn't perfect, but it's still a worthwhile investment," MacUser 6, no. 2 (February 1, 1990), 64-65.
23. Laurie Flynn, "Warnock says Adobe won't make it easy on competitors," InfoWorld 11, no. 41 (October 9, 1989), 6. Jai Singh, "Apple opens door to Adobe fonts-System 7 to include Type 1 fonts, Adobe Type Manager," PC Week 8, no. 34 (August 26, 1991), 12.
24. HTML (Hypertext Markup Language) is the "tagging language" used to create Web pages. Tags placed before and after the words constituting the textual page content effect typographic attributes like styling and relative sizing.
25. Rebecca Gulick, "Interlocking font deals find center in Adobe," MacWEEK 10, no. 20 (March 20, 1996), 10-12.
26. John Clyman and Jonathan Matzkin, "The Font Forecast-Adobe and Bitstream recast type design," PC Magazine 15, no. 13 (July 1, 1996) 31
27. John Maeda, Flying Letters (Tokyo: Naomi Enama, Digitalogue Co., Ltd., 1996) and 12 o-clocks (Tokyo: Naomi Enama, Digitalogue Co., Ltd., 1997).
28. J. Abbott Miller, Dimensional Typography: Case Studies on the Shape of Letters in Virtual Environments, (New York: Princeton Architectural Press, 1996) p. 24-25.
List of Figures
©2000 Massachusetts Institute of Technology