Project Management

Using special characters as typographic niceties

It's the small details that give a site the professional polish it takes to rise above the crowd, details like paying attention to typography. Here are a few tips for using special characters and proper punctuation on your Web pages.

This article 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 &amp; or &#38; or &#x0026;. Therefore, the text Bed & Breakfast becomes Bed &amp; Breakfast or Bed &#38; Breakfast or Bed &#x0026 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.

Editor's Picks

Free Newsletters, In your Inbox