Quire Ink
/find

Letterforms, and the making of pages

Hanging punctuation, and the margin nobody notices

A quotation mark at the start of a line makes the margin look dented. The fix is four hundred years old.

Set a paragraph that begins with a quotation mark and look at the left edge from a distance. The first line is indented by the width of the mark, and because a quote is mostly white space the eye reads the whole line as starting late.

Hanging punctuation pushes the mark out into the margin so the LETTERS line up rather than the characters. Gutenberg's compositors did it by hand, and it is the single cheapest improvement available to a page of quoted text.

The CSS is one property and it is not everywhere

hanging-punctuation: first last does the whole job in Safari and nothing at all in Chrome or Firefox at the time of writing, which is why almost no page on the web has it.

The fallback is a negative text-indent on the offending element, applied by hand. It is not worth doing for body text and it is very much worth doing for a pull quote, because a pull quote is large enough that the dent is obvious.

The other half of the rule

The same applies to the right edge in justified text, and to hyphens at a line break. Both hang. Both are off by default. Both are invisible until someone shows you, and permanently visible afterwards.