I am available for freelance work - HIRE ME

Simple Tips for Improving Web Typography

posted by Matt Ward on Jan 25, 2011.

There are plenty of different things to consider when it comes to typography on the web. In this post, we will be looking at Ellen Lupton’s Thinking with Type, and considering some things things that we can do to avoid some of the small-but-important typographic crimes that she outlines in her appendix.

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

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:

em-dash shift-option-hyphen
en-dash option-hyphen
- standard hyphen (hyphen key)
single open quote option-]
single close quote shift-option-]
double open quote option-[
double close quote shift-option-[
ellipsis option-;
( ) en space option-space bar
dagger option t
double dagger shift-option-7
© copyright symbol option-g
® register symbol option-r
é accent aigu option-e + e
è accent grave option-` + e
à accent grave option-` + a
ù accent grave option-` + u
ç cedille option-c
ü umlaut option-u + u
ö umlaut option-u + i

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

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?

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Jan 25, 2011

Keri says:

I have a love affair with em-dashes—I use them all the time =) A shortcut on Windows is ALT+0151. Hold down the ALT key while you type 0-1-5-1, and when you release ALT, the em-dash will magically appear.

Thanks for another great article. I’ll have to get that book!

Jan 25, 2011

Rob Chant says:

Great article, and I really must buy that book! This kind of thing is one of my own bugbears, and my own CMS does a lot to correct these types of mistakes automatically. This is the reference I often use:

http://www.recedinghairline.co.uk/files/c1c3be2fda2b218e858029a4bde7e96c-397.html

As a geeky point of note, the em dash should actually have an i-space on either side of it.

Jan 25, 2011

James says:

It may be useful to give a table of the html entities of the special characters as often pasting in from word can end up giving invalid characters in the browser.

Jan 25, 2011

Red says:

Hey, I have that book! And yes, it has taught me a ton on typography. In fact I would even consider it as my de facto teacher and authority on the subject

Jan 25, 2011

William Melvin says:

Very good article concerning these commonly disregarded elements in Typography. I will have to check that book out. another good one is “The Complete Typographer” by Christopher Perfect. Also I love that you gave me a table of shortcuts, although I know most of them there are some I didn’t know!

Jan 25, 2011

Matt Ward says:

I’ll have to check out The Complete Typographer. Always love new design-related books! And no problem about the table. There are all kinds of awesome shortcuts on the Mac. Just old down option and start hitting keys. It’s amazing what you can do ;)

Jan 26, 2011

Gaël Poupard says:

Here is a perfect table of the html entities, it may be very useful!

http://www.entitycode.com/

Jan 27, 2011

Gundars says:

I was about to share the same link. I use http://www.entitycode.com/#common-content very often.

Jan 27, 2011

Luis Nell says:

I love OSX Snow Leopard for providing the neat „Replace“ feature (sorry for the 6699 quotes, system language is german) via the context menu. You can turn on intelligent quotation-marks and dashes—more text replacements via the System-Preferences.

Jan 27, 2011

monye favour says:

i really feel the content of d book how great it would be of help to me but i know it wil cost me quite a fortune to get it. dat i cant afford 4 now cos am takin care of myself. but i believe wil get it wen d time comes….tanx 4 d wisdom impactacted to get all dis in a book!!

Jan 28, 2011

H says:

Why don’t you use space between your em-dashes? I mean, in Norway we write:
«Blablabla — blablabla». Maybe we have different rules there. Just curious :)

Jan 28, 2011

James Hunt says:

As a web developer I must advise against copying from Microsoft Word. If you do this you will copy a lot of unnecessary code thats will cause many issues* in different browsers.

Just a warning.

*layout/styling/validation

Jan 28, 2011

Matt Ward says:

Hi James,
Fair warning. I’ve found that WordPress is pretty good a stripping out most of that excess code, but then I am generally copying from OpenOffice instead of Word itself. But yes, it is definitely something to be aware of. Thanks.

Jan 28, 2011

jcubic says:

I hate when people use “Proper quotation marks” in source code — some design blogs do this. So when I copy sniped of code from these sites I must change “ and ” to ” and ‘ ’ to ‘ — some people that don’t know it, may wonder why the code is not working.

Feb 17, 2011

Jonathan Crouch says:

Hi

Yes, I was going to add my own warning about copying and pasting from Word .docs etc.

One character that never ‘pastes’ well is the £ symbol in text.

I invariably end up going back and editing the source code. That and speech marks etc.

Be very aware.

Cheers for the interesting post though – definitely one to make you re-evaluate your own work.

Jonathan.

Mar 27, 2011

Robert says:

Can anyone help me with an answer to a question?

Dec 1, 2011

Wishjuh says:

You don’t have to remember all the shortcuts for the Mac with Lion. Just hold down a key f.e. the “e” and wait for extra options for that letter to pop-up.

Leave a Comment

Copyright © Echo Enduring Media 2009-2014