Using Hanging Punctuation

01
of 05

Examples of Hanging Punctuation

Hanging Punctuation examples
Hanging punctuation hangs the quote marks outside the text edge in the bottom example. Text is fully justified with hanging punctuation on left and right. Blue represents area outside the text frame. © J. Bear

Attention to typographic detail is one aspect of design that separates the amateurs from the pros. Today's software makes some of these details of typography easier than ever to accomplish. Hanging punctuation, commonly used for pull-quotes, creates the illusion of a uniform edge for the text, with the punctuation outside the margins. It's also called optical alignment or hung punctuation.

Beyond punctuation, optical margin adjustments may be used to make subtle shifts to allow for the shapes of letters and serifs, such as extending the edge of initial caps outside the outer margin.

There are no hard and fast rules on when you should or shouldn't use hanging punctuation. It is common for bullet lists, pull-quotes, some headlines, and other bits of quoted text but any text can benefit from its use. You can use hanging punctuation with flush-left, flush-right, or full-justified text.

  1. this page
  2. Technical Alignment Close-up Without Hanging Punctuation
  3. Optical Alignment Close-up With Hanging Punctuation
  4. Automatic Hanging Punctuation Create Hanging Punctuation Automatically
  5. Manual Hanging Punctuation When Your Software Doesn't Have Automatic Options

The quotation used in these illustrations is by Stephen B. Leacock. For more quotations on creativity see About.com Quotations.

02
of 05

Technical Alignment

Technically aligned but not optically aligned.
Left-aligned text without hanging punctuation. Blue represents area outside of the text frame. Blue circle highlights the empty space left by the non-hanging punctuation. © J. Bear

The eye craves order and alignment. However, technically aligned text doesn't always look as if it is perfectly aligned because of the shape and size of characters in text, especially punctuation.

Without hanging punctuation the quotation mark in this left-aligned example lines up with the left edge of each line of text but its size and shape leaves an unsightly gap in the first line of text.

  1. Introduction Hanging Punctuation
  2. this page
  3. Optical Alignment Close-up With Hanging Punctuation
  4. Automatic Hanging Punctuation Create Hanging Punctuation Automatically
  5. Manual Hanging Punctuation When Your Software Doesn't Have Automatic Options

03
of 05

Optical Alignment

Hanging punctuation.
Aligning the text but hanging the punctuation just looks better. Blue area represents area outside of the text frame. That's where the hanging punctuation sits. © J. Bear

Hanging punctuation and optical alignment makes text edges look more orderly and balanced. At typical body copy sizes, optical misalignment is rarely noticeable. However, at the larger text sizes used for pull-quotes and headlines the use of hanging punctuation adds a touch of refinement to the layout. Ignoring the quotation marks and aligning the rest of the text just looks better. Pushing the quotation mark outside the left edge eliminates awkward white space.

Depending on the software you may have separate options for optical alignment or optical margin alignment and hanging punctuation. With the optical alignment option the software also extends certain letters such as A, O, or W slightly outside the margin for a more visually aligned appearance.

Use Your Eyes

But keep in mind that the software options are only a starting point. Use your eyes to find the best placement of the text and punctuation. That's why it's called

optical

or

visual

alignment. At fonts.com, Ilene Strizver writes about Visual Alignment. Not specifically about hanging punctuation, the article shows examples and explains that it is "

always, always, always

use your eyes as the final arbiter of good alignment."

  1. Introduction Hanging Punctuation
  2. Technical Alignment Close-up Without Hanging Punctuation
  3. this page
  4. Automatic Hanging Punctuation Create Hanging Punctuation Automatically
  5. Manual Hanging Punctuation When Your Software Doesn't Have Automatic Options

04
of 05

Creating Hanging Punctuation

Hanging punctuation in Photoshop
Even Photoshop has hanging punctuation options, although page layout apps such as InDesign, Ventura, and QuarkXPress 8 offer more control over the hanging punctuation. © J. Bear

It may take extra time to hang your punctuation, especially if your software has no automatic alignment options, but the results are noticeable.

In some programs, such as Corel Ventura, Adobe Creative Suite applications, and QuarkXPress 8, hanging punctuation is an automated function. However, even with the assistance of the software, the default settings are not always optimal. It may be necessary to fine-tune your text after using these tools. Also, the appearance of your hanging punctuation may change a little or a lot if you change the typeface, font size, or text alignment.

InDesign

  1. With text selected, choose Type > Story to open the Story palette
  2. Check the Optical Margin Adjustment box
  3. Enter an amount of overhang (how much the punctuation and serifs will fall outside the margin edges)
    Note: Start by setting the overhang the same as the text size then adjust as necessary.

Photoshop & Illustrator

With your cursor in your text block, check off Hang Punctuation or Roman Hanging Punctuation (may vary by version) from the Paragraph palette's fly-out menu. It will apply to left, right, or both margins depending on the text alignment selected for that text.

QuarkXPress 8

  1. Select your text
  2. Go to Style > Formats.
  3. Open Paragraph Attributes > Formats
  4. From the Hanging Character Set drop-down menu, choose Hanging Punctuation or Punctuation Margin Alignment
    You can use the edit options to fine-tune your hanging punctuation and apply your hanging punctuation settings to a style sheet.

  1. Introduction Hanging Punctuation
  2. Technical Alignment Close-up Without Hanging Punctuation
  3. Optical Alignment Close-up With Hanging Punctuation
  4. this page
  5. Manual Hanging Punctuation When Your Software Doesn't Have Automatic Options

05
of 05

Manually Creating Hanging Punctuation

Fake Hanging Punctuation
Fake hanging punctuation on the right with invisible characters. Blue represents the area that would be outside of the text frame if you had real hanging punctuation options. Here, it simply shows alignment and the "invisible" punctuation. © J. Bear

For software without automatic options for hanging punctuation it requires some manual manipulation of the text. You can use kerning or invisible characters to create the hanging punctuation effect.

Manually Hanging Punctuation on Left Margin

Method 1

  1. Add a space in front of the left quotation mark
  2. Kern the space to the left (negative kern value) until it moves outside the margin
    Note: The quotation mark may not show up on screen once kerned but it will print.

Method 2

  1. Apply a hanging indent to the paragraph so that the quotation mark extends to the left of the optical margin for the remainder of the text.
  2. Or, create a paragraph style or style sheet with a hanging indent.

Manually Hanging Punctuation on Right Margin

For right-aligned or fully justified text, to manually hang the punctuation along the right edge of the text insert the same punctuation (quotation mark, period, etc.) at the end of each line. Reverse the punctuation to make it invisible (except for the last real punctuation). Depending on the font, this can be tricky to do.

The above illustration shows what you see and what you normally don't see (the reversed characters are shown on a blue background).

The next time you set type, especially pull-quotes, add that extra bit of polish with hanging punctuation.

  1. Introduction Hanging Punctuation
  2. Technical Alignment Close-up Without Hanging Punctuation
  3. Optical Alignment Close-up With Hanging Punctuation
  4. Automatic Hanging Punctuation Create Hanging Punctuation Automatically
  5. this page