Proper Typography for Websites

In a previous post on my website, I wrote about the differences between typewriter quotes and real quotation marks, and how to do it right.

I have received some nice feedback on that post.

One person suggested that while it’s great to use proper quotation marks in printed material, it is impossible to get those same proper marks in web pages. Au to the contrary! (as they say in French). HTML has an extensive library of proper punctuation marks as well as accented characters for central- and eastern-European languages (those based on the Roman alphabet).

I read the New York Times online (and in print on Sundays!). Its online presentation is an excellent example of typography and proper punctuation done right. Most other online publications pay attention to typography but let the apostrophes and other quotations fall victim to the horrible typewriter quotation marks. It’s disturbing.

When I prepare these posts for WordPress, I use proper quotation marks and apostrophes – even when I respond to an online comment. WordPress allows me to use the keyboard commands to get these marks, making it much easier than putting in the HTML code for those marks.

More after the jump! Continue reading below
Free and Premium members see fewer ads! Sign up and log-in today.

But, when constructing a web page with hard code, or even when using a program like Adobe Dreamweaver that does much of the work for you, it’s possible to insert the proper marks as you work. It’s a bit of work, but it’s logical. The handsome result is the reward for doing it right.

So, let’s say you’re building a page of HTML code, and you need a proper apostrophe. In the code you should type:

’

Which results in a left-facing apostrophe, correct for most contractions and possessive applications.

To get a single right-facing quote, perhaps for the opening of a quote-within-a-quotation phrase, you would type:

‘

This would yield the correct open-quote character needed for this purpose.

For double-quotes, the HTML codes are:

“

…for the opening, right-facing double-quotes, and:

”

…for the closing, left-facing double-quotes.

Interestingly, there are no correct prime marks in HTML, so making single or double-primes for actual inch dimensions is not included in the HTML character set. I suppose you could go back to the unattractive typewriter quotes:

"

…which works OK for inch marks (it’s not great, but it’s better than nothing).

And, what about en- and em-dashes? Can HTML handle those? Absolutely! To get an en-dash, the HTML code is:

–

And for the em-dash, it’s:

—

If you find yourself working on an online publication, you could set up some of the more common codes in keyboard shortcuts. I have used a program called QuickKeys on my Mac for years; similar programs exist for both Mac and Windows machines. By hitting some combination of keys you can get strings of characters for your work in HTML, or elsewhere.

I have prepared a chart showing all of the HTML characters and their respective codes. Please download it with the link below and send it to your favorite online newspaper, or to the Rachel Maddow Show (where the typography has improved, but they still don’t know about proper quotation marks).

Please click here to download the PDF of that chart.

  • Lucy says:

    Thanks, Brian! It annoys me no end (like scratches on a blackboard) when I am reading an article or a webpage and see the wrong characters used. Ugh! I’ll be sure to send a link to your article the next time I run into this.

  • I’m always glad to see this kind of guidance on how to get things right.

    Your mention of the New York Times reminds me of my typographic peeve with them: that the Times never includes the diacritic marks of Eastern European languages that use the Latin alphabet. Which makes it hard to know how to pronounce, say, Serbian names when you read them in the paper (in print or online).

  • Jay Mahanna says:

    This is a great thing to have handy. I don’t do much foreign language work, so most of what I need is on the first page. I really appreciate you’re putting this all together. Now, maybe, one with footnote symbols? Thanks, Brian!

  • >