Summary: In the process
of building a web site, a distinction is often made
between text that is displayed by the web browser ("html
text") and text that is embedded in a graphical
image (typically a .gif or .jpg file).
Although the font to be used for HTML text can be suggested
through the use of the FONT tag or a cascading style
sheet, the actual font used depends on what the user
has installed on their system (and for this reason the
font specification for html text is usually restricted
to fonts that ship by default with the standard operating
systems). Typically the choice boils down to Arial vs.
Times although sometimes fonts like Verdana, Georgia,
Geneva (Mac), and Helvetica (Mac) are also specified.
Other fonts can be specified but they will only show
up if the user just happens to have that particular
font installed on their computer.
A typical font family entry in a cascading style sheet
looks like: FONT-FAMILY: Verdana, Arial, Helvetica,
This tells the browser to first try Verdana and if
that's not available then Arial, then Helvetica (Mac)
and then if none of those are available to choose a
san-serif font (sans-serif fonts are typically more
rounded than serif fonts and don't have as much detailing
This is regular HTML text where the browser has been
told to use Times at 12pts (or a comparable serif font
if Times isn't available on the user's system).
This is HTML text where it has been suggested that
the browser look first for Verdana, then Arial, then
Helvetica (typically included for Macintosh compatibility),
then a sans-serif font of the browser's choosing. The
browser will select the first available font on the
user's system from the list.
This is HTML text where it has been suggested that
the browser look for Arial, then Helvetica, then a sans-serif
font of the browser's choosing. The browser will select
the first available font from the list.
HTML text has some advantages:
- it can be found by search engines
- it can be auto-translated into other languages by
online translators such as the one provided by www.google.com
- it is typically the only choice for information
coming dynamically out of a database (there's no easy
to way to make text into a graphic on the server in
real-time unless you have something like Macromedia
Flash Generator installed on the server)
it can be maintained by someone with access to a text
editor and and ftp program
- it can be controlled by style sheets which make
mass changes to the text on a web site straightforward
(for example the "heading1" style can easily
be modified to make the point size larger in the style
sheet and this change will them automatically ripple
through the entire site)
HTML Text has some disadvantages:
- limited formatting options vs. Photoshop or a page
layout program like InDesign or Quark (for example
it's difficult to wrap text smoothly around a circular
image using just HTML).
- no anti-aliasing to smooth out text (this is more
of an issue when HTML text is used for things like
navigation than for the main body content text).
Using a program like Adobe Photoshop, text can be set
inside a graphic. Any font that is available on the
designer's computer can be used. The graphic is typically
put up on the web site as a .gif or .jpg image.
Graphical text has some advantages:
- wide range of fonts available to create desired
- end-user doesn't need to have the font the designer
chose to use in the graphic
adds some branding to the web site
anti-aliasing technology smooths out the type and
makes it less jaggy looking
- html text has limited formatting but all sorts of
tricks can be done with graphics and text using Photoshop
or even a page layout program like Quark.
commonly used for navigation bars and other types
of clickable buttons
Graphical text has some disadvantages:
- html text can be done with a built-in text editor
such as notepad or simpletext while graphical text
requires an image editor such as Photoshop.
- if the text incorporated into a graphic needs to
change, the graphic must be redone
- if a graphic with text needs editing, the person
doing the editing will need to have the right font(s)
installed and active on their system or a font substitution
may occur which could change the look of the text
considerably some fonts, especially at smaller sizes
with anti-aliasing turned on, can look fuzzed/mushy
and can be somewhat hard to read
- not usually a good choice for large blocks of text
(such as a press release, for example)
- search engines can't read text inside a graphic
- auto-language-translation programs can't translate
text inside a graphic
- graphical images (which typically take a little
longer to load than regular html text) can be somewhat
An easy way to tell if something on a web site is an
image or text is to try to select the text with the
mouse (the same way you would try to select text in
a word processor like MS Word). If the text can be selected,
then it's HTML text not an image. Images on the other
hand have a special (and very useful) menu that appears
when the right mouse button is clicked (or the single
mouse button is held down for single button mice).