November 3, 2008

Agency Website Gaffes: #4. Graphics as Text

In my RISD days I studied letter-press printing and wood engraving. Achieving great typography when setting metal type is a laborious task. For example, tightening-up letter spacing (kerning) requires taking file to metal. The process of setting type by hand gave me a deep appreciation for the subtleties of excellent typography. So I sympathize with designers when they make this common web design mistake of using graphic text in place of real text.

Text as Text

How to determine if text is text: You can select the words and letters individually and copy them to the clipboard.

headline as graphic

How to determine if text is a graphic: You can’t select the letters, options allow you to “Save Picture As.”

When “setting type” on the web there’s a smaller set of options and controls than you have in print. On the web you can control size, color, line-height, and to a limited degree, the typeface. But even these controls are not precise. Any typeface choice is dependent on the fonts installed on the viewer’s computer. The range of safe font choices is quite limited (Helvetica, Verdana, Times, and a few more). Not only are the choices limited, but the precise display of a font can change slightly from system to system. So subtleties like controlling the rag of a copy block are virtually impossible on the web.

That’s why so many designers choose to use graphics in place of readable text in web layouts. Photoshop allows you to choose any font you want, adjust it until it looks perfect, and then save it as a jpeg. Such graphic text treatments are commonly used for main page titles.

Problem is, the use of graphics for text keeps that text from being meaningful to search engines. To Google a graphic is just a blank rectangle, whether it looks like a word or not. So when you opt for graphics instead of text, you are removing whatever meaning that word has when it comes to search relevance. The most common use of this technique is for a page’s main title. And a page’s main title is among the most weighty elements search engines use to determine relevance. So using a graphic instead of text throws away one of the most important elements for search engine optimization.

Body text as graphic Using graphics for page titles is bad enough. But a far more egregious error is using a graphic for body copy. It’s a pretty big deal to decide to substitute a main title with graphic text. It’s utterly irresponsible to replace a paragraph of meaningful words with a graphic substitute, all for the sake of more precise typographic control. In my opinion when an agency places typographic nuance above the most basic functions of how the web works, they discredit themselves with regard to their competence in web design and web marketing.

Typography on the web is very different than in print, but there is an art to typography on the web. Just because the options are more limited does not mean you can’t create beautiful expressions of typography (after all, typographers of old had only the font choices and sizes available to them in their type cases). Check out my delicious links tagged “typography” for more resources on how to be a web-based typographer with out resorting to Flash and graphics (especially check out this article from ilovetypography.com).

Share:
  • E-mail this story to a friend!
  • del.icio.us
  • Digg
  • Facebook
  • Technorati
  • Google
  • Furl
  • StumbleUpon
  • Sphinn
  • TwitThis
  • SphereIt