How to use proper apostrophes in HTML instead of "dumb quotes"?
css, html, typography
Solution
You have couple of options here:
- As was pointed out before, either use numerical or named HTML entities.
- Write your HTML with single apostrophes and then do a search and replace before publishing. This is workable, but could lead to unexpected replacements if you aren’t careful.
- Insert the actual single quote using the appropriate keyboard sequence for your operating system: option-shift-] on a Mac or alt-0146 on a PC and make sure to save and serve your HTML as UTF-8 encoded. That way you don't have to screw around with entity names, but asumes a UTF-8 clean workflow.
Problem
In the article Better web typography in a few simple steps, it says Talking about apostrophes, the correct sign for them is the right single quotation mark. A dead give-away for amateur typography is the presence of straight quotation marks, also called 'dumb quotes' by type-savvy designers. I've been using these "dumb quotes" all along! Now, when one is writing regular HTML (and not Markdown, which automatically produces apostrophes), how is one supposed to sanely write correct apostrophes? Am I just supposed to inject `’` wherever a `'` would go before? Is there a program that automatically does this? How do professional web designers take care of this problem?