A History of Typography

By: Matt Morrison
Submitted: 2007-01-17 14:55:56
Print this article | Tell a friend | For publisher |

Rating:

 

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

With modern operating systems like Windows XP and Mac OS 10, users have the ability to select a display option called anti-aliased text. This is a great option in terms of design because it uses color variations to make jagged or stair stepping angles seen in aliased text look smoother. “In letterforms, aliasing is especially problematic because the stair stepping interferes with the smoothness of curvature required to define so many individual characters”. See Figure 3, where the left letter shows how anti-aliased text is displayed and the right letter shows aliased text. The effect is more flattering to larger text. This provides a more pleasing view for the user during reading. However, a disadvantage of anti-aliasing is the effect it has on smaller text. It tends to create a blurred or distorted effect to smaller text.

The designer should keep in mind that he or she cannot rely on users having anti-aliased text enabled on their machine. Often the results of typeface selections can be unattractive if this is not taken into account.

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.

Generally it is more important to choose the right typeface when considering the proper word spacing instead of changing it manually. Good spacing has a direct effect on the legibility of typeface. The most important aspect of spacing to consider when designing for the web is the consistency of your choices. Inconsistency in spacing often breeds confusion among readers. Strive to keep the reader focused on the text and lead them fluently across the words.

Alignment

Alignment is a major factor when considering the look and feel of pages on the web. On the web, body text should be left justified and titles or headings should also be flush left. Only in rare cases does a designer require justified text. In these cases, the width of the text must be wide enough to provide the proper word spacing in the text and titles or headings should be aligned center. A significant factor with alignment is the margins around the text. Margins represent the spaces between elements on a page. They help keep text in sections distinct from other elements on the page or the browser window. Margins, when used consistently, provide unity and structure for pages on the web.

Designers wanting to create more freedom between elements should use larger margins to create space. If they want to create a more constricted look, they should use smaller margins to create a sense of intimacy. Until the future of typography changes, designers should avoid using justified text due to the inability of hyphenation on web pages. This causes the look of pages to suffer due to differing spaces between words.

Limitations

Since the implementation of font tags and CSS, designers can specify any typeface for their web pages, but many computers only have the default fonts installed on them. If the typeface specified is not on the web user’s computer, the default font is shown on the browser. While designers can choose multiple fonts the browser may use in the order given, the control over the look of the web page is not as strong as it is with print media. The best way to achieve the most desired look is to specify the generic font such as “sans serif” at the end of the list. In this case, the browser will display the text in any sans serif font accessible. No matter how hard a designer tries to develop the perfect combination of typeface and size, the user can still designate any typeface and size he or she wants, and there is nothing the designer can do about it. Because the designer does not have complete control over the finished product on the web, it is often seen as a disadvantage compared to print media. However, this concept of “user control” can be perceived as a strong point of the web. There is no other communication medium that gives this much control to the end user. The best device designers can use is to merely offer a blueprint for the design and leave the final say up to the reader.

Conclusion: The Future of Typography

One way designers have worked around the limitations of web typography is to use image and Flash text replacement techniques to display custom typefaces, which allows for more control over the page. A recent Flash replacement method is SIFR (or Scalable Inman Flash Replacement pronounced siffer). SIFR gives access to embedding custom typefaces in web pages without the user having it on their machine. Another tool that can be used is Microsoft’s Web Embedding Fonts Tool (WEFT), which stores fonts on a web server to be available for download when needed. This tool has not caught on because no browsers other than Microsoft’s IE have implemented the technology. Even though these techniques give a glimpse of the future, it is merely a quick fix to the current limitations of web typography. When these new techniques are fully developed, a new era of web typography will be ushered in.

Matt Morrison is a regular author for Rolling Sphere Design

Article source: Expert Articles