Chapter 7
Type On Screen
As more designers become involved in on-screen design, the need to preserve typographic integrity in this environment becomes paramount. Doing so, however, is complicated by rapidly changing technology: screen sizes, screen resolutions, and new types of interactivity.
Typographic considerations for printed communications carry over to on-screen environments. However, designing with type on screen poses special additional challenges, and attempts by designers to simply mimic the appearance of the printed page are mistaken. This chapter discusses the relationship of typography to screen environments, especially as concerns legibility, visual hierarchy, and structuring type on digital pages.
When designing on a computer screen—even when the final production will take another form, such as offset printing—the same legibility issues apply to on-screen type. Screen fonts are bitmaps, which are digitized images made up of tiny dots. To render an outline letterform stored as a Bézier curve on a computer screen, it must be rasterized, or converted into tiny dots called pixels, which is short for picture elements. The relatively low resolution of many contemporary computer screens, which typically have a bitmap matrix of 72 or 96 pixels per inch, cannot display the subtle nuances of a beautifully designed font. When a type’s outline is rendered on a screen, details such as stroke weight, subtle curves, and serif detail are reduced to a coarse approximation of the refined forms found in the original design. This occurs because curved and diagonal edges rendered as pixels on a raster-scan display have a jagged stair-step quality, called “the jaggies.” The more pixels used to generate the letterform, the higher the resolution. On-screen typographic display blends many factors. These include font enhancement methods such as anti-aliasing, hinting, the use of pixel fonts, and capturing type as image.
Techniques for displaying on-screen fonts
Antialiasing
 This technique is used to replace the jagged stair-step edges created by pixels with an illusion of smooth curves. Pixels around the edges of curved or angled letterforms are rendered in a blend of the type color and the background color, resulting in an appearance of smoother, more refined letterforms. The drawbacks of antialiased type are that the smaller type gets, the fuzzier it appears.
Hinting
A major factor influencing the legibility of on-screen type is resolution. Where fewer pixels are available to describe letters, resolution decreases. To compensate for this problem, type designers reshape the outlines of characters, a process called hinting. Hints alter the actual outlines of letters by selectively activating pixels, improving the legibility.
Pixel fonts
These are typefaces specifically designed as bitmapped type, which are designed to the pixel; for example, the characters in Emperor 15 are exactly 15 pixels high. On a 72-dpi screen, these will be the same height as a 15-point typeface, since there are also 72 points in an inch. On a 96-dpi screen, however, a 15-pixel tall bitmap font will appear smaller, about the size of 11-point type. Pixel fonts can degrade when used at larger or smaller sizes than the size for which they are intended. Pixel fonts are especially useful for very small on-screen text, as they can be designed to maximize legibility when pixelated.
Type as image
Type, especially display type, is converted to a picture file format, such as GIF, and downloaded as an image on a website. The benefits are fidelity to the designer’s intent and compatibility with most web browsers. Since images require more file size than plain text, this slows the downloading of the web page. Type downloaded as an image is fixed in size and cannot be selected or copied as text. Image files should be saved at a minimum of 200 percent of the standard resolution of 72 pixels per inch to accommodate high pixel-density displays.
Simplicity
Typefaces possessing elemental shapes translate more effectively into the domain of pixels than do typefaces with ornamental and adorned shapes, or typefaces with extreme stroke-to-stroke contrasts. Intricate forms lose detail when translated.
Sans serif and serif typefaces
Because sans serif typefaces are generally simpler in form than serif typefaces and scripts, they achieve a clearer visual presence on the web. On screen, very small serifs are described by an inordinate number of pixels relative to the rest of the letterform. Usually, a well- proportioned sans serif typeface possesses a medium stroke weight and a balanced ratio of form to counterform. Slightly condensed faces afford more characters per line and thus utilize less space on the page.
When serif typefaces are used, they are best selected on the basis of their legibility on screen at small sizes. In the serif category, slab serif fonts provide more legibility than Old Style, transitional, or Modern typefaces. Typefaces such as Memphis, Rockwell, Serifa, and Museo possess moderate contrast between strokes, and blocky serifs that translate well into pixels. All typefaces under consideration should be tested by comparing their relative legibility on screen at various sizes.
Scale
Depending on the size of the screen and the resolution, 12- to 16-point type serving as text copy can appear proportionally correct and not visually overpowering. However, neighboring text units should be sufficiently scaled to maintain contrast.
Interletter and interword spacing
Interletter spacing should be increased to compensate for the spread of antialiased type and the illumination of the screen. Otherwise, pixels from one letterform appear to visually “flood” into the next, causing overly tight spacing. Interword spacing should be proportionally adjusted as well so that letters flow rhythmically and gracefully into words, and words into lines. Essentially, typographic elements living on a web page require slightly more spatial separation than do those on the printed page.
Line length and interline spacing
Sixty to seventy-five characters per line is an optimal number for ease of scanning websites. For smartphone apps, thirty-five to fifty characters per line is optimal.
Generous interline spacing is recommended for displaying text on a computer display. A reasonable guideline is that the interline spacing equal 140 percent of the type size. Measured in pixels, for example, type with an overall height of 10 pixels will require a measure of 14 pixels from the baseline of one line of type to the baseline of the next. This amount should be increased by at least 20 percent for type on smartphone apps. Ultimately, interline spacing must rely on optical judgement and the designer’s eye. As text settings get smaller on screen, they require more interline spacing for improved legibility.