Typography Tuesday: Why Type Shouldn’t Be Images

Samantha Warren, ON THE TOPIC OF Tips and Tricks

Jul01 7

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).

Veera said on 07/01 at 10:18 PM

Another problem with header images is the more work we need to do for creating those images. Also, image headers take more bandwidth than the text headers, for a slow-connection network, this may be bad for the user.

James Yu said on 07/01 at 10:29 PM

If you really need to use images for text, but still want search engines to index it, you can just throw the plaintext into a hidden div. Google will still index the content of the hidden div.

Doug Avery said on 07/02 at 06:45 AM

James, I think that used to be the case, but there have been some articles pointing to a crackdown. While Google will still index the content, you might get caught and de-indexed if you’re hiding content that doesn’t closely match the image it’s replacing.

I prefer using the Phark mathod of giving your paragraph tag a width, height, and background image while indenting the text -9999px. This gives CSS-less users and bots a well-structured page to read with no unnecessary tags. Virb is using this method on their site, with a slight tweak.

One interesting twist to Samantha’s second point is that the new Firefox uses IE7’s clever resizing method, in which users can scale up the entire page to view both text and images at a larger size. While IE7’s render is sort of chunky and pixelated, FF3’s is quite nice, and potentially improves readability of image text when zooming.

Since changing “text size” doesn’t always work with sites that don’t use EMs (try changing it on CNN.com in IE7 to see what I mean), I’d bet more and more users have been taking advantage of the “zoom” to read small content, which also has an effect on the images. This bodes well for designers who’ve struggled with making easily-resizable sites and text.

Darren said on 07/02 at 08:35 AM

I would also note that, while the Matuse site might look slightly better having used images, much of the typography used could have quite easily been reproduced in straight HTML and CSS.

Samantha Warren said on 07/02 at 09:14 AM

@Darren Absolutely, I was heartbroken to find a site so visually beautiful with such a major technical flaw. There is the visual designer in me who wants appreciate sites for just the way they look, but the Web Designer just can’t let me get past user experience issues and technical issues. This is another example of how the web is not a canvas… visuals can’t provide everything that the user needs.

Leon P said on 07/09 at 04:19 PM

Isn’t it just easier, better and more sensible to accept the fact that there are only a finite number of fonts available on the web, and that text is text and images are images? It may be possible to cludge our way round SEO and accessibility issues, but what’s the point? Besides, I want to be able to copy text.

Hernan Valencia said on 07/10 at 12:31 PM

Samantha. I believe the issue is print designers (or traditional graphic designers) turning to web design. Mostly due to necessity and flexibility and plain common sense. However, most of these folks—myself included, aren’t quite prepared for the limitations and exceptions of front end developing. Not to mention accesability issues. So instead of trying to learn and work with the new tools, they resort to simple image mapping or slicing of the layout. But, you are right, they’re forgetting about the user-end experience. Print Designers aren’t used to having their creations manipulated or even changed! There was never any malleability before. Traditional mediums are being forced out by the interactive, manipulatable content and customizing that the web offers.

I don’t know if this holds true for the examples listed but this is why I believe there are beautiful examples of layout with such a defeating technical liability.

Trackback URL: http://www.viget.com/trackback/1146/

Comments for this entry were closed after 60 days.