Effective text for web design

The benefits of text in web design

Despite the limitations of not being able to control font face and size, 'plain' text has properties that make it a very powerful tool:

• Unambiguous, quick to interpret
• Downloads and renders faster
• Easy to abstract to database or CMS
• Searchable and indexable
• Can be selected, copied and pasted
• Accessibility benefits
• Portable across platforms

Unambiguous, quick to interpret

Text can be much clearer than imagery, because it is 'literal'. The word "Search" on a button is totally unambiguous, whereas a magnifying icon, binoculars or arrow needs more decoding (there's no universal icon to signify 'Search').

This is not universally true of course. Sometimes an image or icon can be much more compact and efficient than the equivalent text (and hence quicker to interpret). At other times, the goal may be more 'fuzzy' meaning.

Downloads and renders faster

Reducing the overall size of files (and number of files) used to render a web page is desirable for many reasons. Every character of text uses exactly one byte of data. Even with HTML or CSS markup, text in HTML form is far smaller than graphical text. The title of this page, including its HTML and CSS, totals 351 bytes.

The same title in graphical form (GIF format, 12 colours), is 1,290 bytes. However, every other title on this site accounts for only a handful more bytes (the word length), because it uses the same CSS, but every different graphic title would incur a further 1kb plus.

1,290 B (GIF)

Web browsers first have to download the HTML page before they can request any other resource files that make up that page. While graphics files are downloading, text (which is in the HTML) can already be displayed on screen. This gives your site a competitive advantage over graphically-heavy sites, particularly when users are busy or accessing the web via a slow connection, both of which are common occurrences.

Easy to abstract to database or CMS

Text is pure data, which makes it easy to read electronically, analyse, abstract, store, transmit, search, replace, order, index, change, and convert. On the other hand, text or signs in graphics are concrete and fixed. You can't do much with graphics once they're created.

The mutability of text makes it simple to abstract to a database, from where it can be drawn and applied as needed. For example, the content of this page is stored on one include file, whereas the page title comes from a database. I can add pages to this site in moments, which I couldn't do if the title were a graphic.

These properties enable developers and designers to:

• Create content management systems (CMS), that separate a site's content from its logic and formatting. I won't go into all the benefits of CMSs here.
• Create multi-lingual sites and applications, that use different text depending on context. The logic and formatting can remain the same: only the content needs to change.
• Render text-based content in other formats, and on other platforms.
• Change the logic and formatting (design) of a web site without having to re-create all the graphics. (I completely re-designed the layout and look-and-feel of this site in one day.)

Searchable and indexable

Web browsers give human readers easy ways to search a web page for a required word or phrase. Also, sites can easily index text-based content, which can be used to enable powerful search tools. (While indexing graphics is technically possible, it is much more difficult, so is in the domain of the more costly indexing tools.)

External parties, such as search engines can crawl and index your site, which may deliver marketing benefits. (You can implement a search tool powered by the likes of Google in minutes, but it will only search your text.)

Can be selected, copied and pasted

I've been frustrated in the past by trying to select a company's telephone number from its web page to paste into a contact record, only to discover that it's actually a graphic! These little things make a difference.

Accessibility benefits

The flexibility of text is clearly evident in the area of accessibility.

Users with slightly impaired vision may need to use a larger text setting on their web browser, in order to browse happily. Text content is normally resizable - graphics never are. Note: When using CSS, use resizable font-size settings (ems is best) wherever possible.

Users with severe visual impairments can use text-to-speech screen readers. These read the on-screen content and translate it into audible speech through a voice synthesizer. Graphical content can be translated in this way only if it has a useful HTML ALT tag.

Portable across platforms

As mentioned above, content that is separated from a site's logic and design/format can be rendered using an alternative design, or even syndicated to another site altogether. Web sites are already viewed on other platforms other than computer-based browsers, such as WAP (mobile phones), or PDA (via AvantGo or similar).

WAP can only show text; many PDAs can only translate graphics into 2-colour b/w images. Any complex graphics may lose all their value in these situations.

For these reasons, the W3C Accessibility Guidelines have a Priority 1 check point that states:

• Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]