Hanging Quotes: The Mark of the Professional Designer

June 24, 2011

Leave Me Hanging

I’m struck by how often I notice quote marks that are not hanging when they are the first character in a line of text. I see this everywhere—in print, on the Web; anywhere text lives. It’s giving me heartburn.

Why Do Hanging Quotes Matter?

Typesetting details like hanging quotes contribute to an overall sense of competent design. Good typography is about paying attention to alignments, punctuation, scale, and the relatedness of the elements on the page to faciliate easier reading and comprehension.

Quote marks are smaller than normal characters and sit above the baseline, so they have less “weight”, or appear lighter optically. Thus, they interupt the imaginary line that runs flush left of text blocks. Consider the following example:

Compared to the alignment on the right, notice how the “B” on the left appears slightly off.

There’s No Excuse

Industry standard software such as InDesign makes hanging quotes a breeze.

1. Make sure your “Story” palette is viewable by going to Window > Type & Tables > Story.
2. Select a text box.
3. Go to your “Story” palette and check “Optical Margin Alignment”.
4. Rejoice. In the olden days, hanging quotes required more steps.

Hanging Quotes for the Web

I use the blockquote tag set with a negative text-indent.

1. blockquote {
2. text-indent: -5px; /* Fixed size */
3. }
4. blockquote {
5. text-indent: -.357em; /* Relative size if containing block default is 14px */
6. }

Did you notice this method also optically aligns the em dash? Sweet.

Compare with the text below:

Noticing the details of good typography moves your design from good to polished, and contributes to the unspoken, often unquantifiable value of readability. You don’t notice it when it works, but you sure do when it doesn’t. So, for the love of God, hang your quotes.