History of Typography

A History of Typography
By Matt Morrison

The printed word has been in existence for hundreds of years and the written word has been in existence for thousands. As technology grows, recent years have seen the movement of type from print to the computer screen. One area of design that has trailed more than any other in the transition to the web has been typography. The first versions of HTML did not even allow web designers control over what typeface they were to use for their page. However, with the entrance of CSS, or cascading style sheets, a whole new era of web typography began. For the past few years’ designers have had the ability and tools to orchestrate typography back into design in the medium of the web. An understanding of typography in the past gives us a good basis to understand what works well in an online environment.

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.

Anti-Aliased vs. Aliased Text