Back to the Future: The Effects of Internet Typography

Typefaces

Typeface is a specific size and style of type within a type family. The two main styles of typeface used on the web are serif and sans serif. Times New Roman is a common example of a serif font often used in print and the typeface used in this paper. Serifs are the decorations or small lines on each of the letters that in theory help the flow of the letters as the eye moves across the text. Serif fonts are most often used in print. There are many ongoing debates as to whether serif or sans serif fonts are more legible on the screen; this writer believes that sans serif fonts are the best option for the screen. Verdana was designed for use with the screen and is the most common sans serif typeface used today on the web. “Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content”.

Three factors determine a great typeface: generous x-height, generous width and letter spacing, and generous punch width. See Figure 2, where good x-height, letter spacing and punch width are shown with the sans serif font Verdana.

Size

Typeface size plays an important role in the domain of web typography. Type size is the tool by which a designer gives page content a distinct structure. The contrast between the sizes of headings, body text and footers forms the clarity and overall impression of the page.

The font point given by the designer, such as 14-point, determines the size of the typeface on the screen. Readers do have the ability to specify type size in their own browsers trumping the size set by the designer. The W3C recommends using the “em” unit when specifying type size. Em, also pronounced “M”, is the point specified by the user multiplied by the amount of Em specified. For instance, if a user set his font size to 12-point and the designer specified a 2em size, then 24-point type would be displayed on the page.

Screen Color

The difference between print page and the web lies in the method used to display colors on the medium. Print media uses the subtractive color system, which is how humans see most objects in natural light. Consider how we see green grass. Natural light, containing the full color spectrum, hits the grass and all of the colors but green are absorbed. Therefore, we see green grass. Natural light hits the printed page reflecting the colors that we see, whether it is black and white newspaper text or a glossy colored magazine ad. The primary colors used in subtractive color are cyan, magenta, and yellow. Computer screens, on the other hand, work differently. They use additive light. Rather than absorbing and reflecting light, additive color emits light. See Figure 4; on the left, where all the colors are mixed, white is produced by additive color. On the right, black is produced by subtractive color.

On the screen, black text on a white background is difficult to read for long periods of time. Any student who has written a paper at 2 a.m. in a dark or semi-dark room knows this. Web designers would be wise to choose combinations such as lighter text on a darker background.

Spacing

There are three types of spacing: leading, kerning and word spacing. Leading is the spacing between lines of text. It plays an important role in the legibility of the text. See figure 1, where the second example is much easier to read because of appropriate leading. Kerning is the spacing of letters within words. Kerning is not very effective with body text, but can have a rather pleasing effect with headings. Word spacing is just that, the spacing between words.

Matt Morrison is a regular author for Rolling Sphere Design

.