web environment, text has enormous strengths.
In many situations, using text delivers far better results than
Web designers should be daring and use text wherever
The benefits of text
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
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.
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
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.
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
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]