TypeTalk: Smart Punctuation on the Web

TypeTalk is a regular blog on typography. Post your questions and comments by clicking on the Comments icon above.
Q. I see a lot of Web sites with dumb quotes and other type crimes I usually associate with print. Is this acceptable?
Q. A (type) crime is a (type) crime is a (type) crime — no excuses! Seriously though, you are correct in your observation that typographically correct punctuation is absent from many Web sites; it’s also overlooked in other non-print media, including motion graphics, movie titles and credits, and ebooks.
In print, the use of typographically correct punctuation, including “smart” quotes and apostrophes, as well as en and em dashes, is the accepted practice for setting professional typography. In Web design, these practices are often noticeably absent, having been tossed by the wayside either by Web developers with not enough typographic knowledge or by designers who aren’t aware that these practices can, and should, be incorporated into Web sites.
Figure 1. The type crimes circled in the upper example are typical of those commonly found on the Web. All are easily avoidable (or fixable, as seen in lower example) with properly prepared and/or coded copy, as well as bringing all involved in the design and development of a Web site on board with your objectives. Set in ITC Garamond Narrow.

The first step to remedy this condition is to make sure your original copy contains typographically correct punctuation so that you, or the Web programmer, know which punctuation goes where. (Remember to indicate primes, not smart quotes, for measurements; and apostrophes, not open single quotes, for omissions at the beginning of a word. While you’re at it, remove double spaces between sentences, another common type crime.)
Unlike many page-layout applications that have features that can correct dumb typography, Web development tools and content management systems (commonly referred to as CMSs) are not usually this type-savvy. While some can be set to automatically convert these special characters (as they are often referred to) to the proper HTML code, others have special encodings, strings, or other settings or methods to make these conversions. But in many, if not most instances, the HTML code needs to be manually inserted, best accomplished with a search and replace function or script.
While there are a number of different codes that have been used for smart punctuation over the years, the following function correctly for most current browsers:
– en dash
— em dash
‘ left single quotation mark
’ right single quotation mark
“ left double quotation mark
” right double quotation mark
‹ single left-pointing angle quotation mark
› single right-pointing angle quotation mark
In any case, when preparing and submitting copy for a Web site to the programmer or developer (if it isn’t you), call out the existence of the smart punctuation so they can find the best solution for the Web site in question. And don’t forget to view how they look on as many browsers (and versions thereof) as you can.
Love type? Want to know more? Ilene Strizver conducts her acclaimed Gourmet Typography workshops internationally. For more information on attending one or bringing it to your company, organization, or school, go to her site, call The Type Studio at 203-227-5929, or email Ilene at [email protected]. Sign up for her e-newsletter at www.thetypestudio.com.

Ilene Strizver is a noted typographic educator, author, designer and founder of The Type Studio in Westport, Connecticut. Her book, Type Rules! The designer’s guide to professional typography, is now in its 4th edition.
  • Anonymous says:

    Fighting the fight in print is hard enough. We need more well-educated designers fighting for standards on the web. Thank you for furthering our education!

  • Anonymous says:

    Amen! That is one of my biggest e-media (and print, too) pet peeves. There’s no excuse for the omission of proper punctuation in electronic media; it just comes down to either laziness or lack of knowledge. Thank you for this article that sheds light on a far too common problem—and for including some easy solutions. (Another handy character code: for an ellipsis.)

  • Anonymous says:

    the code for ellipsis is [ampersand][hellip][semi-colon]. not sure why putting that between two code tags didn’t work…

  • Anonymous says:

    Ilene does it again.
    Thanks for fighting crime on the page and on the screen.

  • Anonymous says:

    The character entity that you give for the single left-pointing angle quotation mark is the same as the left single quotation mark. It should be [ampersand]lsaquo[semi-colon].

  • Terri Stone says:

    That was my error, not Ilene’s. Thanks for the correction!

    Terri Stone
    Editor in Chief, CreativePro.com

  • >