How to make typographers’ quotes in HTML

What are typographers’ quotes?

You’ve probably noticed two kinds of quotation marks in web pages and printed matter. The quotation mark that you get when you just press the " key on your keyboard is the straight quote, and it looks like ' and ". Typographers’ quotes, also known as a smart quotes or curly quotes, look like ‘ ’ and “ ”. You’ll notice that opening and closing marks are drawn differently, and you may also notice that they look a lot nicer.

Using typographers’ quotes on a web page

Straight quotes are convenient for two reasons: they’re easy to type, obviously, but more importantly, they’re part of the basic ASCII character set, and therefore when you use them in HTML they will be rendered correctly on everyone’s browser, all the time, even if you completely ignore the concept of character encoding in your document.

If you use typographers’ quotes without specifying the right character encoding for your HTML file, some of your viewers are going to see question marks, boxes, or other crazy symbols instead of the beautiful curly quotes you intended them to see. That’s bad. That can happen if you do something like type up some text in MS Word with the AutoFormat “Replace straight quotation marks with smart quotation marks” feature turned on, and then you cut and paste that text into an HTML file.

Using HTML codes to make smart quotes

The good news is that you can use HTML codes to render your typographers’ quotes, and browsers will know how to render them, even without setting the document encoding. Although these codes are cumbersome in your text, if you’re saving your HTML documents as text files, this is the way to go.

HTML codes for typographers’ quotes

• left single quote ‘ ‘
• right single quote (and apostrophe) ’ ’
• left double quote “ “
• right double quote ” ”

Other special characters

But don’t stop there. You can have other special characters: em-dashes (—), en-dashes (–), non-breaking spaces ( ), and accents. Here’s a list of special characters with their HTML codes.

More information about using special characters on the web

• For more information about character sets, read Joel Spolsky’s article about Unicode and character sets.
• This is a simple test file that you can look at with different browsers.