An important typography tweak we should remember

Hanging punctuation is an area of typographic design which has suffered at the hands of lot of web designers. It’s a term which refers to glyph positioning to create the illusion of a uniform edge of text.

It’s most commonly used for pull-quotes, but I feel the most neglected is that of bulleted lists. I have tried to put on the differences.

Examples of Hanging Punctuation

Lists — Without Hanging bullets

Left body of type is pretty much destroyed, aesthetically, when punctuation isn’t hung. The eye looks for straight lines everywhere, when type is indented in this way, it destroys the flow of text.

With Hanging bullets

With hanging punctuation the flow of text on the left hand side is uninterrupted. The bullets, glyphs or numbers sit in the gutter to highlight the list. This representation of a list is more sophisticated visually and more legible.

Pull-quotes — Without Hanging Punctuation

Nothing is more irritating than badly typeset quotes. The interruption to flow is considerable and the overall effect is pretty unsightly

With Hanging Punctuation

Quotation marks should be ‘hung’ – See diagram above. In this example the quotation marks are hung either side of the quote. Once again this allows uninterrupted reading for the audience.