Section Logo
Facebook   Twitter   LinkedIn   Email  

Page1of 2
< 1 2 >
Web Fonts
What You Don't See

by Ben Kiel

Typeface design and changes in the technology of written communication have often been intertwined. Sometimes type is at the center of a change, as with the written word passing from scribal hand to printed page and sometimes it has to adapt, as was the case when printing slowly changed from a relief process to a lithographic one and type shed its sculpted form to become two dimensional. Each technological shift brings new possibilities and challenges to the design and use of type. Mechanical typesetting caused the punchcutter to be replaced by the pantograph. Phototypesetting allowed for easier negative kerning, enabling designs like Avant Garde Gothic by Herb Lubalin and Tom Carnase. The current shift in the presentation of the written word centers on the web and how type is used on it. Set in motion by the draft specification for the third version of the Cascading Style Sheet (CSS) specification and the introduction of the Web Open Font Format (WOFF), web designers are now able to reliably specify non-system typefaces in their designs. This has opened up tremendous possibility for both web and typeface designers, but it also means both need to pay much more attention to how type is displayed on screen.

The basis for what we see on screen today comes from the need to approximate how something will look when printed; though design on the web is for the screen, it has to contend with choices made for this earlier goal. Approximating the printed form on screen requires deciding how best to display vector outlines on a grid of pixels. This task is the result of the inter-action of the rendering engine, the operating system and the font.

Typefaces designed for the screen often have different proportions than those for print.
The top pairing compares Verdana and Helvetica; counters are more open and the lowercase
is much wider. The bottom pairing compares Verdana and Font Bureau’s Apres RE, comparing the design
decisions on shape and proportion of two typeface designs targeting the screen.

A rendering engine is a piece of software that fits a font to the grid of the screen. The two main methods of doing this are greyscale rendering and sub-pixel rendering. Greyscale rendering uses whole pixels in anti-aliasing outlines to the grid. At smaller sizes this can cause a font to look less crisp, but at larger sizes it gives the appearance of smooth curves. Sub-pixel rendering, also known as ClearType rendering, takes advantage of how LCD panels are constructed. Each pixel of an LCD screen is composed of multiple sub-pixels of individual colors (usually red, green and blue). By exploiting how the eye sees color, the renderer can gain three times the horizontal resolution of the screen in rendering outlines. The additional resolution allows for better spacing, better display of italics and rendering closer to the outlines of the font. However, in the vertical direction the rendering is still done using whole pixels. This causes awkward transitions in horizontal curves. To solve this the vertical direction often uses anti-aliasing to smooth curves. Lastly, sub-pixel rendering usually only works when a screen is oriented in a certain direction. Apple’s iPad 2, for example, renders text on screen with sub-pixels when the device is held in landscape and in greyscale when in portrait.

The operating system controls what sort of rendering engine or engines are available to a web browser. On Mac OS X one standard rendering engine is available and it uses sub-pixel rendering with antialiasing in the vertical direction. Rendering between browsers is thus fairly consistent. On Windows, which has multiple rendering engines, the default engine can either be set to greyscale or sub-pixel rendering; the setting depends on the version of Windows and which rendering engine a browser chooses. In Windows XP the system default is greyscale rendering—though this can be changed—but in Windows Vista and 7 the default is sub-pixel rendering. The only guarantee a web designer has is that users will see different renderings of type between versions of Windows, between browsers on Windows and between Windows and Mac OS X. As David Berlow, founder and typeface designer at The Font Bureau, points out, “The inconsistent behavior and appearance of fonts on the web are the result of competition between browsers and operating systems and not the font’s fault.”

Left: An example of ClearType rendering. The rendering engine gains triple the horizontal resolution using knowledge of how the brain sees color to set the appropriate color value for each sub-pixel. Right: Gustavo Ferreira’s Elementar typeface family works as parametric system, allowing a designer to choose the width and pixel size that best suits the design. To aid in choosing from an array of thousands of fonts, Typotheque, the publisher of Elementar, offers an iPad application that allows a designer to play with different choices on the screen.

The last piece of the puzzle of how type is displayed on screen is hinting. To assist the rendering engine in the tricky business of fitting type to the screen grid—especially at small sizes—a designer can give instructions about how outlines should appear to the rendering engine. On Mac OS X most hints are ignored by the renderer, so hinting is done mostly for Windows. Hinting for TrueType outlines, the most common format for screen fonts, gives direct control to a designer for how things are dis-played. The hinting instructions are made in a programming language with exacting control over how outlines are grid fit. Though powerful, this level of control means hinting can be a lengthy process; each character in a font needs to be looked at in every size the designer wants to hint. Kris Sowersby, owner and typeface designer at the Klim Type Foundry, draws a comparison to printing, saying, “How a typeface looks determines how a typeface works. If it looks good, then it’s working. And when I say ‘looks good’ I mean how the letterforms look in the medium. For example, bad printing will ruin the best typeface. In a similar way, bad hinting will ruin a typeface for screen. Historically there is little a type designer can do to mitigate the effects of bad printing. But now, with screen technologies, we are in a better position to ensure our type looks good in that medium.” Kiel
Ben Kiel is a typeface designer and developer at House Industries. He also teaches at MICA and the University of Delaware. Before working at House Industries, he worked both as a graphic designer and as an apprentice letterpress printer in St. Louis, Missouri. Kiel received an MA in typeface design from the University of Reading, UK in 2005.