1. Technology

Typography on the Web is About the Little Details

Just Because You Can’t Force the Font Doesn’t Mean You Should Ignore Typography

By

When you work on improving your web typography, many people focus solely on the font family they are using, the line height, and the font size (and whether they are using ems for that size or not). While these are all very important parts of a good web typography plan, they are just the beginning. One thing you’ll notice about a designer who loves type is that they pay attention to more than those elements. There are lots of little details in type that you can use to improve how your site looks, and many are small and most require a lot of attention to detail.

Curly Quotation Marks

When writing HTML, it’s best to use straight quotes for any quotation marks you might use in the HTML. And for most designers, these straight quotes are translated right into the text that the HTML is marking up. But quotation marks that don’t curl are the first sign that typography isn’t as important to the page’s designer.

But adding in curly quotes is not as simple as using the special character ", as that character is typically interpreted as a straight quote as well. In order to add curly quotes (both single and double quotes) you need to use the numerical codes for the specific special characters:

  • Left double quotation mark “ (“)
  • Right double quotation mark ” (”)
  • Left single quotation mark ‘ (‘)
  • Right single quotation mark ’ (’)

Ellipses or Just Three Dots

When I’m writing email or other casual communication, I love to use ellipses. But even as I use them, I often cringe because I’m not actually using ellipses, I’m just typing a period three times... An ellipsis is a very specific typographic element. … (…)

En and Em Dashes Versus Hyphens

Another typograhic element you might have left out of your designs are dashes. Most people just use the hyphen (-) because it’s right there on the keyboard. But good typography insists that you use the dashes appropriately.

An en dash is a dash that is the same width as the n in the font family you’re using. An em dash is the same width as the m. A hyphen is the dash that is on most keyboards. It is slightly shorter than the en dash.

  • hyphen -
    Found on most keyboards below the underscore key next to the 0 in the number line. The hyphen is also called a dash, minus sign, or negative.
    hyphen uses: Use the hyphen to separate compound words. You can also use hyphens in justified text to indicate a word that has been broken up by the page boundary.
  • en dash –
    To add an en dash to your web page, use the special character code: – or the numerical code –.
    en dash uses: Use the en dash to replace the word "to" such as in hours of operation: 9–5
  • em dash —
    To add an em dash to your web page, use the special character code: — or the numerical code —
    em dash uses: Use the em dash to show a break in the thought or tone of the text. Use it where you would otherwise use two hyphens.

Use Special Characters for Type

When you’re paying attention to the details of your type, you’ll begin to realize that there are a lot of typing shortcuts that we tend to take when writing on the web. There are dozens of special characters that we could use in our text, but many people leave them out because it’s easier to just type the word or other text.

  • Trademark: Don’t just write TM or (tm) - use the special character ™ (™)
  • Copyright and Registered Marks: Forget (c) or (r) - there are special characters for these too: © (©) and ® (®)
  • Degrees: You can put that degree marker in ° (°) instead of writing 45deg
  • Footnotes: You can define up to 3 footnotes ¹ (¹) ² (²) ³ (³) as well as fancier notes like a dagger † (†) and double dagger ‡ (‡)
  • Fractions: Some of the more common fractions are available in special characters: ¼ (¼) ½ (½) and ¾ (¾) and there are other mathematical special characters available

Be Sure To Test in Your Typeface

Finally, once you’ve decided to use these typographic tools to improve your site’s look, be sure to test your pages in the font faces you have chosen. Not all font families have all the special characters defined. So you should make sure that these characters exist before you launch your site.

Web Typography Cheat Sheet

Name Example "Friendly" Code Numerical Code
Opening Quotation Mark none “
Closing Quotation Mark none ”
Opening Single Quote (apostrophe) none ‘
Closing Single Quote none ’
Ellipsis none …
Em Dash — —
En Dash – –
Trademark ™ ™
Copyright © © ©
Registered ® ® ®
Additional typography special characters can be found here: Special Characters for Punctuation and Other Characters
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Fonts
  7. Web Typography - Typography on the Web is About the Little Details

©2014 About.com. All rights reserved.