I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Rich Web Typography With Mac OS X Keyboard Shortcuts

css / typography

Estimated reading time: 1 minute, 45 seconds

In previous articles on writing for the web I’ve talked about workflow for body copy, emphasizing the use of Microsoft Word (or any other intelligent word processor) for both basic proofing and the automatic creation of “smart” typography in text: the generation of curly quotes and apostrophes, em and en dashes, etc.

While this would continue to be my suggested best practice, there are times when you will only need to insert a small amount of text into a web page – correcting a paragraph in an editing tool, for example, or making a few content changes in a CMS – during which using a word processor is unrealistic. If you still want to retain rich typography in what you type, what’s the solution?

CharacterDescriptionKeyboard Shortcut
(ellipsis)Option + ;
(em dash)Option + Shift + -
(curly left single quote) Option + ]
(curly right single quote)Option + Shift + ]
(curly left double quote)Option + [
(curly right double quote)Option + Shift + [

On the Mac side, the answer is easy: use keyboard shortcuts. A few of the most common, and useful, are shown in the first table; more shortcuts are available at

As you can see, there are some odd keyboard inconsistencies for single and double smart quotes. Rather than sticking with the default (and often typing the wrong character by mistake as a result), I prefer to remap the keyboard bindings, using a tiny file first suggested by Don Reese:

Place the following text, saved as DefaultKeyBinding.dict, in /Users/<name>/Library/KeyBindings/ on your Mac:

      "~[" = ("insertText:", "‘"); 
      "~]" = ("insertText:", "’");
      "~{" = ("insertText:", "“");
      "~}" = ("insertText:", "”");

You will need to quit and restart any applications before using the new mappings, which now become:

CharacterKeyboard Shortcut
Option + [
Option + ]
Option + Shift + [
Option + Shift + ]

Mac OS X 10.7+

Mac OS X 10.7+ hides the Library folder by default. To make it visible, start up the Terminal and enter this line:

chflags nohidden ~/Library/

You may also need to create the KeyBindings folder inside the Library folder.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.