Simple Tips for Improving Web Typography

In 2004, Ellen Lupton wrote and designed a book entitled Thinking With Type. Since then, it has become one of the seminal tomes for the study of typography. Accessibly written and full of useful knowledge, the book is divided into three distinct sections—Letter, Text and Grid. It has graced virtually every modern list of essential typographical books that I have ever read, and remains one of my favorite design books.

Sometimes I just like to pick it up and flip through its rich pages.

Though I own the first edition (it has since been updated with 48 more pages worth of content), the book taught me a great deal, about the history of typography and the anatomy of letters, about traditional typesetting and the challenges introduced by the rise of digital media. However, perhaps one of the most influential sections of the book was the few, brief pages that make up the appendix.

Thinking with Type is an excellent book on all things typography

In that appendix, Lupton outlines a number of typographical “crimes”. These are common errors that many people make and continue to make simply because they don’t know any better. I was definitely one of those people. Some of the main points that I took away from that valuable appendix are:

1. Hyphens and dashes are not the same. A hyphen is used to join two words that are meant to function as a single entity, such as the term “man-eating” or to break words at the end of lines. Dashes, on the other hand, are used differently, with the en dash being used to separate ranges (5–10) and the em dash being used to indicate parenthetically injected thoughts or phrases—much like this one.
2. There is actually a difference between a real ellipsis (…) and three periods (…), as the former is represented as a single character and the later is three distinct characters. Often, however, there is no discernible difference to the naked eye.
3. The characters that we often use as quotation marks are actually prime or hatch marks, which are intended to signify measurement units of feet (‘) and inches (“). Proper quotation marks have opening and closing glyphs that differ from each other. Using hatch marks as quotation marks is frequently known as using “dumb quotes”.

This was all somewhat of a shock to me the first I read it, as I realized how much I had been doing wrong. I believe that the modern keyboard perpetuates many of these “crimes”, since proper quotations, the ellipsis character and the various dashes do not appear on any standard key. Yet, while certain word processing applications, such as Word, make valiant efforts to correct our typing as we go, there are still many applications with less sophisticated input methods. Most web coding environments, while powerful in their own right, would fall into this category, as would the majority of browser-based writing tools, like WYSIWYG editor in WordPress.

So what do we do? After learning about the inadequacies of my typography, I resolved to improve it, but without the proper keys on our keyboards, what do we do?

Copy and Paste from Word (or OpenOffice)

One simple option is to do the bulk of your writing in a sophisticated word processing application, like Word or OpenOffice, where many things, like the use of proper quotations, can be taken care of automatically. I do this quite frequently, especially when writing longer posts or articles for other sites. I can then use WordPress’ Paste from Word option to effectively pour my content in.

One thing to note, however, is that both of these applications will only insert an em dash when surrounded by a single space on either side. Otherwise, they assume that you are using a hyphen. However, many style guides recommend that the em dash should not be surrounded by any spaces, so this can pose a bit of a challenge sometimes. One simple solution is to search for the string ” — ” (space-dash-space; hatch marks used intentionally) and do a global replace to “—” once you are finished writing.

The key, when using this technique, is to never assume anything and always double-check your copy.

Mac Shortcuts

While there may not be any actual keys for many of these important typographic characters, if you are working on a Mac, many of them are still just a single keystroke away, using the OS X built-in shortcuts. For instance, if I want to insert an opening quotation mark, I can simply press option-[ and the character will appear automatically. To add a closing quotation mark, I would press shift-opt-[.

There is actually an incredibly wide range of different character shortcuts available on the Mac, including many accented characters. Lupton’s Thinking With Type appendix contains a brief table summarizing some of the more common shortcuts, some of which I reproduce here:

Lupton’s table contains a few characters, such as some ligatures and the discretionary hyphen, which do not seem to still correlate the version of OS X that I have (Leopard), or whose shortcut keys have been overwritten by application defaults Still, most of these still work, allowing you to improve your typography by quickly and effectively insert the proper characters into your text using nothing but the keyboard.

I am unaware of any such shortcuts in Windows.

Special Characters in TinyMCE

Occasionally, for some short posts or on days when I just don’t want to open up my word processor, I will actually write directly in WordPress itself. When writing this way, I am usually flipping back and forth between the WYSIWYG “visual” editor and the plain HTML editor. Of course, when I do this, I lose all the auto-replacement benefits of the word processor and need to be even more vigilant when it comes to my typography.

Fortunately, WordPress’s visual editor comes fully equipped with a nifty special characters table that allows me to insert characters like proper quotation marks and different dashes directly into my post. Just click the “Insert custom character” button (has an Omega character icon, located directly beside the filmstrip icon and requires the “Kitchen Sink” to be turned on) to bring up the following table:

WordPress’s special characters table allows you to insert these characters as HTML entities

Hovering over each character will provide a larger preview of it, as well as the HTML-code and NUM-code for displaying the character as an entity. To insert the character, simply click once on the desired character (no need to double click, as the window will close on your first click), and the character will be inserted into your post as an entity (in other words, encoded in the &xxx; format).

This can be super useful for Windows users who don’t have the Mac’s quick keyboard shortcuts, or even for Mac users who may not be familiar with all of the character shortcuts.

It’s also not restricted to WordPress. I use the Concrete5 CMS for a number of different site, and it also uses the TinyMCE WSYIWYG editor, with the same special characters functionality. I would expect that many other CMS systems and web applications that use this technology will also have similar (or even identical) tools, allowing you to maintain the quality and integrity of your typography.

Conclusion

As suggested by the title, these are just a few small and simple hints for improving your web typography, and using them will really only effect the very small details of your text. That being said, however, if you’re like me, the little things are every bit as important as the big ones, since it’s often these exact details that help make a good design into a great design. Hopefully, these simple tips will help you in that area.

And if you haven’t already picked up a copy of Thinking With Type, do yourself a favour and remedy that situation.

What do you think? Do you pay this close of attention do your typography? Do you use any other techniques to ensure that your text contains the proper characters?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd