Smart Quotes in Word and HTML

A few weeks ago I finished reading The Non-Designer’s Type Book by Robin Williams and have been interested in smart quotes ever since. Using smart quotes makes your documents and web pages look more professional, and here’s how to create them.

It’s important to remember that the book itself is aimed at non-designers, so full-time designers will probably find her writing annoying and possibly offensive (in a design-geek sort of way) but for beginners it is a really great book and I’ll probably review it in detail in the future.

Regarding “smart quotes”, they are the curly quotation marks that should be used when quoting a word, phrase or statement that has been stated by another person, or sometimes when something is meant to be said in an ironic sort of way. The quotation mark key on your keyboard doesn’t actually make smart quotes. See a problem here? At the beginning of this paragraph I have used quotation marks incorrectly, but at least I used the proper quotation marks.

The book discusses how to use smart quotes in desktop publishing software but does not mention word processing software such as Microsoft Word or Corel WordPerfect. Although both (and probably all major) word processors have the ability to turn on smart quotes and convert them automatically, this doesn’t always work, and can cause problems.

When using Word, whenever I want a set of smart quotes I am getting into the practice of inserting them using the ALT key in combination with their ANSI/ASCII representation. For example, in Word holding down ALT+0147 will give you a left smart quote, and ALT+0148 will give you a left smart quote. You can try this in Word or simply use the text area below:

This will work in word processors (Word, Wordperfect, Google Docs, OpenOffice…) as well as web pages and commenting on blogs.

However, when writing HTML you might be safer to use the SGML/XML method. In HTML there are character codes such as   and á (displays as á) for displaying special characters. There is also “ and ” but its recommended that you don’t use them because they are not cross-platform enough.

Instead, use “ to get the left double curly quote like this ( “ ) and ” to get the right double curly quote ( ” ). Remember, this only works if you are editing HTML tags directly.

Now the only thing that ticks me off about using smart quotes is how they are rendered by certain fonts. Verdana is a very popular web font, but to me the smart quotes look awful. As well, Microsoft Office 2007 has switched the default font to Calibri which has better looking quotes than Verdana (at least they are curly) but are still horrible looking IMHO. Check them out, click the image to see its fullsize glory:

Smart Quotes in Word

When using quotation marks in pull-quotes, I especially like the way Georgia looks… although Adobe Caslon Pro is a close second but they look better large and appear to render badly in MS Word, but I could be wrong.

For more details, Font.com has an excellent article on Smart Quotes. To learn how to use quotation marks properly within a written work, you might want to check this guide and this guide at the OWL at Purdue University (Online Writing Lab).

So there you have it. A short look at smart quotes. Did you know about using smart quotes? Let me know if you’ve had any experiences or if you found this post helpful.

Tweet This Tweet this or  Stumble This Stumble this or Delicious This Delicious this

Post written on 2009-07-09

Leave a Comment

Previous post:

Next post: