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@example.com. Sign up for her e-newsletter at www.thetypestudio.com.