Excellent typography in web pages

In a previous post 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.

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 this file.

About Brian Lawler

Brian Lawler is an Emeritus Professor of Graphic Communication at California Polytechnic State University, San Luis Obispo and was a Guest Professor at Hochschule München from September, 2021 to September, 2022. He writes about graphic arts processes and technologies for various industry publications, and on his blog, The Blognosticator.
This entry was posted in Typography, Web and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.