Using Symbols
While alphanumeric characters will likely make up the bulk of your text, it is important to consider all of the different typographic marks at your disposal. Content creators are often confounded when trying to use characters that do not appear directly on the keyboard. However, it is the richness of these characters that can really set your typographic design apart.
Many characters are “hidden” behind the Shift, Control, and Option keys. Operating systems include character map software that lets you view the entire character set of a font, with options for inserting glyphs into documents.
Character Viewer
Mac (below), Windows (next page), and Unix (not shown) operating systems all include some form of character viewer application that lets you view and place any of the glyphs available in a font’s repertoire.
Generally, if you are using proper encoding (UTF-8 is the safest) and your font has the correct glyph as a part of its character set, any character you can type or insert will be displayed in your Web page. This is obviously not the case if you are using a dingbat font or a font intended for a language other than the one you are using.
Adding symbols to HTML code
There are many characters that can be included in an HTML file by typing a name value between an ampersand and a semicolon—for example, — for an em dash (—). Officially known as the character entity references, they are more commonly referred to as HTML characters or ampersand characters.
The advantage of using HTML characters as opposed to typing the character directly into your HTML code is that these references are displayed independently of the document’s text encoding, and so should work in any HTML file regardless of the character encoding.
As always, the font you choose will still contain the character you want in its set, but this is one way to avoid problems where special characters might get confused if the wrong encoding is used.
The next two pages show a list of some of the most common entities, and Appendix B, “Glossary of Characters,” has all of the HTML entities as well as UTF character entities to add even more glyphs.
HTML Character ReferencesTo ensure that a special character is properly encoded in your HTML, you will want to use its name or number character reference rather than typing the glyph in directly. This table presents some of the most common glyphs you will need. For a full list of all available characters and values, see Appendix B, “Glossary of Characters.”
|
Choose the right symbol for the job
Because of the limited nature of early Web typography and—to be honest—the lack of training of many of the people creating content for the Web, many characters were misused or misunderstood. Sometimes this was fine; however, sometimes disaster ensued.
Now that you know where to find all of the characters and how to replace them with HTML encoded character references, there’s no excuse for using the wrong character. If you need to see the full rules for character use, I recommend The Elements of Style, by William Strunk Jr. But I want to offer a few suggestions for the use of special characters in the Web here.
Multiplication
The multiplication symbol looks a lot like a lowercase “x,” but they are not the same. Many content creators will use a lowercase “x” or an asterisk (*) instead of ×. Typographically, they look and work differently, especially in proportional and serifed fonts.
Use × when you want to place a multiplication symbol in your page.
Fractions
Although commonly expressed as a simple ratio using a slash character (for example, 1/2), typographically, fractions are meant to be styled with smaller numerals kerned closely together (for example, ½). The three most common fractions are included as HTML characters and should be used where possible.
Use ¼, ½, and ¾.
Displaying HTML code in HTML code
Most parentheses and brackets appear as typed. One exception is the less than (<) and greater than (>) signs, called chevrons, used to create the actual HTML code. Additionally, use straight quotes in code, and always encode them when in text to avoid having the browser interpret the display code as actual code.
To display HTML code on your Web page, you will need to encode it using < and >. For quotes use " or &apos.
Link arrows
Using the right double angled quote or right arrow as a typographic flourish to indicate that a block of text is a hypertext link has become somewhat of a Web standard.
Many content creators, not knowing how to create the appropriate character, have opted to use two greater-than signs instead, which not only take up a lot more space, but are simply not as attractive.
Use » or → when you want an arrow for a link.
Ellipses
Ellipses appear as three consecutive dots used to indicate the omission of a word or phrase in a sentence. Ellipses are also often used to represent the interruption, pause, or trailing off of a statement in mid-speech.
Although an ellipsis looks a lot like three periods, it is not the same thing, and periods should not be substituted.
Use ….
Smart quotes, part 1
One place where a special character should not be used is in code. Smart quotes in any code will break the code, often causing the code to display as text.
Always use straight quotes for code.
Smart quotes, part 2
What word processors refer to as smart—also called curved and book—quotes should be used for any formal writing. Generally, quotes are typed with the keyboard, appearing as straight quotes in the code, but rendered as smart quotes by the browser. As mentioned above, though, straight quotes—also called typewriter quotes—should only be used when representing computer code.
To ensure that the proper quotation mark is used, it’s a good idea to encode smart quotes and apostrophes with “ and ” for double quotes, and with ‘ and ’ for single quotes and apostrophes.
Hyphens vs. minuses vs. dashes
Hyphens are easily inserted from the keyboard, but are often used when a minus sign, an en dash, or an em dash is what is called for. In typography, the hyphen should be used only to hyphenate words.
Minus signs are longer, and used in mathematics to indicate subtraction (1−1=0). Use −.
An en dash is the same width as the minus sign but is generally thinner and should be used for date ranges (4 March–6 March). Use –.
An em dash is used to separate a parenthetical—like this. Use —.
Spaces
Although the basic space is fine for most uses, there are a number of spaces that can be encoded to achieve various widths or to prevent breaking between words.
Use for a nonbreaking space.
Use &enspace; or &emspace; for spaces the same width as an en dash or em dash.
Use   for a space 20% of an em dash.
Feet and inches
Although generally single ( ’ ) and double ( ” ) quotes are used for feet and inches, respectively, the actual symbols are the prime ( ′ ) and double prime ( ″ ), which look more like straight quotes slanted to the right.
Use ′ for single prime and ″ (capital “P”) for double prime.
Logograms
A logogram is a symbol that represents a word, such as the ampersand (&), but also includes registered trademark (®), trademark (™), and copyright symbols (©).
As these symbols are often critical for legal reasons, add them using HTML character references to ensure that they will display correctly regardless of encoding.
Use & for ampersand, ® for registered trademark, ™ for trademark, and © for copyright.
Type Inspirations: Poems Out LoudGreat poetry deserves great type Started in 2009, Poems Out Loud features columns and recorded readings by well-known and award-winning poets as well as general poetry news and ephemera. The name of the site was inspired by the anthology edited by Robert Pinsky called Essential Pleasures: A New Anthology of Poems to Read Aloud. Their Web site uses a variety of typefaces and typographic weights and styles to create bold but easy-to-read Web content. 
How they do it POL uses Cufón (explained in Chapter 3) to download JavaScript versions of the fonts Facebuster 400 and Helvetica Neue Thin Condensed, combining these with the Web safe font Baskerville to create a compelling typographic texture. 
|