Hanging Punctuation on the Web

This technique was first developed and implemented by the Russian design firm Art. Lebedev Studio. Strangely, it was never documented.

For a left-aligned text block with two inline quotations, we’d have this HTML

<p>Sed egestas purus, enim et tique
<span class="l">amet,</span>
<span class="r">&#8220;Felis</span>
nisi ut tristique enim!&#8221;
Vel faucibus et
<span class="l">enim:</span>
<span class="r">&#8220;Et</span>

and this CSS

.l {
margin-right: 0.4em;
.r {
margin-left: -0.4em;
p {
padding-left: 0.4em;

See it in action! (Try bumping up the text size.)

Inline quotation marks occuring at the start of a line will be hung; this is due to the negative left margin of span.r.

Inline quotation marks not occuring at the start of a line will be unaffected; in such a case, span.l and span.r are side by side, and their respective margins will cancel each other out.

The left padding on p is for IE, which can’t quite get the hang of elements being pulled outside their containing block.



Yuan Qing is a student/graphic designer in Singapore, and this is his tumblelog.

Have a look at my work, and do say hello!


By Date