Design AtlasAligning every character in a paragraph to the exact same vertical line at the left or right edge can still look uneven if that line starts or ends with a quotation mark or hyphen. A quotation mark's actual ink occupies only part of its character width — the rest is whitespace — so lining it up at the same coordinate as solid letters makes its visual weight read as sitting further inward.
Optical margin alignment nudges these marks slightly outside the text box's literal boundary, realigning the edge the eye actually perceives. It's a long-standing hand-adjustment in print typesetting, common in high-end book design and newspaper composition.
CSS's `hanging-punctuation` property tried to standardize this (`first` hangs an opening quote at a paragraph's start, `last` hangs closing punctuation at a line's end), but browser support is quite limited (mainly Safari). The demo checks live with `CSS.supports` whether the property actually works here, and shows the effect either way using a manual negative-`text-indent` trick — one that works in every browser regardless.
When to use
Worth it for pull quotes that open with a quotation mark, or bullet lists, where punctuation's visual weight is noticeable. Skip it for ordinary UI text — the effect is too subtle to matter there.