/typography-audit

Use Hanging Punctuation Where Feasible

Hanging punctuation moves quotation marks and other punctuation into the margin to align the left edge optically, creating a cleaner edge. Web support is limited, so apply it only to the left edge of blockquotes and display text, where it has the most impact.

Incorrect (punctuation disrupts left alignment):

<blockquote>
  <p>"Good typography is invisible."</p>
</blockquote>

blockquote {
  /* Quote mark pushes text inward */
}

Correct (hanging punctuation on blockquotes):

/* hanging-punctuation is not Baseline: Safari ships it, Chrome and
   Firefox do not, so the fallback has to be scoped or it double-shifts. */
blockquote p {
  hanging-punctuation: first last;
}

@supports not (hanging-punctuation: first) {
  blockquote p {
    text-indent: -0.4em;
  }
}

Applying it across all body text is impractical to maintain on the web.