Typography Tuesday: Why Type Shouldn’t Be Images

For those who have survived a traditional education in typography, the limitations of the web can be a very scary place (there was a time when I was even scared... very very scared). On more than a handful of occasions, I have been asked by people designing for the web why making text an image is a bad thing, and here are my answers:

Reasons why you should never make body-copy an image online:

• The information is not selectable for those who may want to copy and paste it.
• The text is not resize-able, making it very difficult for those who prefer larger type to scale it up to read.
• It is not accessible by a screen-reader for those who are visually impaired.
• It doesn't allow content to be; indexed by search engines.

There are some instances when image replacement techniques and sIFR can be used for headlines or call-outs; however, they are not good solutions for larger bodies of text or content blocks. But, taking some time to explore beauty with constraints has far more benefits.

While an entire site may not have all of its text as images, parts of a site that provide key content sometimes will be formatted this way. Using this site as an example, check our their product section, which is all typeset as images. This product information provides key search terms about what the company is selling but is completely hidden from search engines. I went to this site shopping for a wetsuit as a gift and was very disappointed to see that could not quickly grab some of the content to get confirmation on the specifications of the product. Though this mistake creates a user experience issue, I will say the overall visual design of the site is rather lovely. 

An example of a site that uses an image replacement technique is http://www.virbinc.com/. While using an image of handwritten content is interesting and lends a personal touch to the design, it does not make it easy to scale the size of the type up to read.

An example of a site that uses sIFR as a good solution is JasonSantamaria.com. On this site, sIFR is used for oversized type in a block quote and headers in the footer. While the type still does adjust size when scaling it larger or smaller, it is selectable. The contrast in these typefaces against the standard fonts creates visual interest and helps to establish hierarchy. While sIFR is still not 100 percent *there* for all kinds of typography in the web, it does help to add just a little touch of creativity.

(Check out some very good image replacement techniques featured on Dave Shea's blog and you can read about sIFR 2.0).