originally appeared in the Design & Usability Tactics newsletter. Click
here to subscribe automatically.
Attention to detail is one of the
things that separate a high-quality Web site from the mediocre masses. You
can’t achieve a quality Web site without a first-class design that includes a
good page layout, navigation, and color scheme—implemented with taste and a
reasonable degree of technical mastery. However, after you deal with the big
issues, attention to details gives a site the professional polish that it takes
to rise from good to great.
One of those design details that
deserves attention is typography,
which I define as the art and science of creating attractive and readable pages
of type. (This may not be the strict dictionary definition of typography, but it’s pretty close to the
generally accepted connotation of the word.) Typography transforms plain text
into something that is aesthetically pleasing as well as functional. It’s the
difference between typewritten pages (or pages of text composed by someone who
uses a computer word processor like a typewriter) and typeset pages produced by
a graphic artist or book designer. The latter looks nicer, and it’s usually
easier to read.
The first element of typography is
font selection. Selecting the appropriate typeface, size, and line spacing for
page text is an essential part of the page design; and, as such, it’s not
really a detail. Another important
part of typography is the proper use of punctuation and other special
characters instead of settling for the limited set of characters available on
the standard keyboard. These typographic details may not be obvious in a first
glance at your Web page, but they contribute to the overall effect nonetheless.
Using special characters on Web pages
Generally speaking, you can use any
of the characters that appear on the standard computer keyboard in the text of
your Web page. The only exceptions are the ampersand (&), less than (<),
and greater than (>) symbols, which have special meaning in HTML/XHTML code
and are reserved for that use.
The standard keyboard characters are
only a limited subset of the characters available. There are many other
special-purpose characters available in the extended character set of most
fonts, including accented letters, math symbols, and an assortment of
punctuation characters and symbols.
In order to use one of the reserved
symbols (&, <, >) or an extended character in a Web page, you must
use an escape sequence, which is a sequence of characters that forms a special
code instructing the browser to render the character identified by the code
instead of the individual characters that make up the code.
HTML/XHTML escape sequences start
with an ampersand (&) and end with a semicolon (;). Sandwiched between the
ampersand and the semicolon is an identifier for the character you want to
insert into your Web page. The identifier can be either an entity name (an abbreviated text name for the character) or a
number sign (#) followed by a numeric (decimal) code for the character. The
numeric code can also be a hex value, designated by adding the letter
“x” following the number sign in the escape sequence. The numeric
code in the escape sequence (either decimal or hex) corresponds to the
character’s code point in the coded character set declared for the page. For
most English- and Western European-language Web sites, the character set is
usually either ISO 8859-1 or Unicode UTF-8. (Specifying the character set for a
Web page is a topic for another article.)
For example, the entity name for an
ampersand is amp; its decimal code
point is 38; and the hex code is 0026. To insert an ampersand into the
text of your Web page, you’d use the escape sequence & or & or &.
Therefore, the text Bed & Breakfast
becomes Bed & Breakfast or Bed & Breakfast or Bed & Breakfast.
The same technique applies to any
character you want to add to your Web page, whether it’s one of the reserved
characters (&, <, >), an accented letter, a math symbol, a
punctuation character, or other typographic symbol.
Note: If you use a WYSIWYG Web page
editor such as Dreamweaver or FrontPage, the program automatically converts reserved
characters (&, <, >) that you enter in its design view into their
escape sequence equivalents. This means that you can enter those characters by
simply typing them on the keyboard. However, it also means that you can’t enter
escape sequences or tags in design view. Instead, you must use an insert
special character command and select the character you want to enter, or switch
to code view where you can type in the escape sequence manually without it
being changed by the program.
Common typographic characters
The following tables list some of
the more common punctuation marks, symbols, and other typographic characters,
along with their escape sequences. The first table
shows ISO 8859-1 characters. The second table
contains some Unicode characters that you might find useful.
For the proper use of these
punctuation marks and symbols, you should refer to a good style guide, such as The Chicago
Manual of Style. Your Web pages can look more professional if you use
typographic quotes instead of the plain quotes from the keyboard and a real copyright
symbol instead of parentheses around a letter C. However, it’s essential that
you use the punctuation marks and symbols properly.