Why do quotation marks need a larger hang than capitals?

The ink of a quotation mark sits much further inside its advance width than the ink of a capital. A pointed capital like A overhangs by a few hundredths of an em, while an opening double quote needs about a third of an em to reach the same visual edge.

Where do the table's figures come from?

They are typical sidebearing fractions for text faces, not readings from the selected font. Treat them as starting points and adjust the amount for the face in front of you.

What does hanging-punctuation support look like in practice?

The property is written into the generated rule and works in Safari. Elsewhere it is ignored, and the negative indent is what produces the visual hang, so the effect does not depend on that support.

Does hanging a glyph change the layout?

No. The block keeps its width and only the ink moves outside it, so nothing after the block reflows. That is the difference between optical alignment and a true outdent into the margin.

Do I need the per-character overrides?

Only when the opening glyph varies. A single amount is enough for a fixed template, while a component that can start with a quote, a bullet or a numeral needs the data-first rules to hang each class correctly.

Optical Margin Alignment Preview

Alignment

Font familyLine (start with punctuation to see the hang)

Sizepx

Hang amountem

Optical alignmenthanging-punctuation

First character“ (U+201C)

Known sidebearingopening double quote

Applied offset-0.36em

Comparison

box edge

“Optical alignment is invisible when it is right and obvious when it is missing.”

optically hung

“Optical alignment is invisible when it is right and obvious when it is missing.”

The dashed rules mark the true text edge. Hanging punctuation moves ink, not layout: the box keeps its width, so no reflow happens downstream.

Measured hang amounts (em)

“-0.36emopening double quote
‘-0.26emopening single quote
A-0.06emcapital A — pointed apex
V-0.06emcapital V
T-0.04emcapital T — crossbar overhang
J-0.04emcapital J
1-0.08emlining 1 — flag overhang
•-0.30embullet
—-0.12emem dash

Figures are typical sidebearing fractions; a font's actual values differ, so keep the amount adjustable per face.

css output

.optical-margin {
  font-family: 'Fraunces', serif;
  font-size: 1.3750rem;
  hanging-punctuation: first last;   /* Safari-only; harmless elsewhere */
  /* the portable approach: measure once per glyph class and hang it */
  text-indent: -0.36em;
  padding-left: 0.36em;
}

/* per-glyph fine tuning */
.optical-margin[data-first="“"] { text-indent: -0.36em; }
.optical-margin[data-first="‘"] { text-indent: -0.26em; }
.optical-margin[data-first="A"], .optical-margin[data-first="V"] { text-indent: -0.06em; }

You Might Also Need

Pull Quote Designer

Design pull quotes

Text Box Shape Wrapper

Wrap text around shapes

Text Justification Previewer

Preview justified text

Paragraph Width Optimizer

Optimize characters per line

The optical margin alignment preview shows the same line aligned to its box edge and then hung by the amount a glyph's ink sits inside its advance width. You choose the face, paste a line, set the size and the hang amount, and the panel reports the first character's code point, whether it appears in the measured table and the offset that is applied.

What is Optical Margin Alignment Preview?

The optical margin alignment preview exists because a text block aligned on its box edge looks ragged wherever a glyph's ink starts inside its advance width. A quotation mark, a bullet, a pointed capital and the numeral 1 all open a visible notch, and hanging punctuation pulls that ink out to the true edge. The tool renders the box-edge and optically hung versions of the same line side by side, with dashed guides marking the edge, and reports which character is at the start and what hang it is given.

A measured table of starting values: the opening double quote at 0.36em, the single quote at 0.26em, the bullet at 0.30em, the em dash at 0.12em, the numeral 1 at 0.08em, and the capitals A, V, T and J between 0.06em and 0.04em.
Hang amount from 0 to 0.6em in hundredth steps, defaulting to 0.36em for a line that opens with a double quote.
An on and off switch that renders both states at once.
hanging-punctuation values of first last, first or none, written into the generated rule and noted as Safari-supported.
Line size from 12px to 64px, defaulting to 22px, with Fraunces as the default face.
Readouts: the first character, its code point, its label in the measured table or a note that it is not covered, and the applied offset.
Per-character overrides keyed on a data-first attribute, so a quote can hang further than a capital without changing the markup.

The portable construction is a negative text-indent paired with equal padding, so the hung ink sits outside the box while the block keeps its width and nothing downstream reflows. The measured table supplies per-glyph starting points rather than one value for everything, because the ink of a quotation mark sits much further inside its advance than the ink of a capital A. The generated rule writes the hanging-punctuation property first and leaves it in place for engines that support it, which is why the preview works even where that property is ignored: the indent does the visible work.

The sidebearing figures are typical fractions for text faces, not values read from the selected font's tables.
hanging-punctuation support is limited, which is why the negative indent is the portable path.
Only the first glyph is hung; a line that opens with two marks receives a single offset.
One amount applies to the whole line unless the per-character overrides are used, so different glyph classes need the extra rules.
The comparison is drawn at one size, while optical alignment at display sizes usually needs a different amount than at text sizes.

Use it on any block whose edge is judged by eye: a quotation opening with a mark, a list whose bullets appear to sit inside the margin, a heading that starts with a pointed capital. The adjustment is small and the panel is honest about where the numbers come from, so keep the amount adjustable per face rather than fixing it once. The designed quotation component is the pull quote designer's territory, and the contour case, where the text edge follows a shape rather than a glyph, is what the text box shape wrapper builds.

How to use Optical Margin Alignment Preview

Choose the face and paste the line, starting it with the punctuation or capital that should hang.
Set the size and switch optical alignment on to see the hung version beside the box-edge version.
Adjust the hang amount, or take the value for the starting character from the measured table.
Copy the rule, including the hanging-punctuation declaration and the per-character overrides, and keep the amount adjustable per face.

When to use Optical Margin Alignment Preview vs related tools

Use it wherever a text edge is judged visually and a glyph's ink refuses to reach it: a pull quote that opens with a mark, a bulleted list, a display heading that starts with a capital. The difference is a fraction of an em, and that is exactly why it is worth measuring rather than guessing. A designed quotation belongs to the pull quote designer, while the case where the edge follows an image or a shape is the text box shape wrapper. When a whole block of ragged-right text has an uneven edge, the fix is usually the measure, and that is what the text justification previewer and the paragraph width optimizer examine.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.