Paragraphs

Block spacing and a measure cap on p, and the two places that cap is deliberately removed.

base/typography.css styles p and nothing else.

p {
  margin-block: var(--spacing-typography);
  max-width: var(--max-width-paragraph);
}
TokenRole
--spacing-typographyThe rhythm between blocks. Blockquotes and nested lists read the same token, so prose keeps one spacing unit
--max-width-paragraphThe measure cap, in ch or rem, so a paragraph wraps before it becomes hard to read

The measure cap is opt-out, not opt-in

--max-width-paragraph applies to every p on the page, including ones inside a layout that already constrains its width. Two files in this layer undo it where it would be wrong:

  • base/address.css sets margin-block: 0 and text-wrap: unset on its inner paragraphs, because an address is a block of short lines rather than prose.
  • base/figure.css sets margin-block: 0 on paragraphs inside a figure, since the figure owns the gap between its own children.

Do the same in your own components when a paragraph is a layout element rather than a piece of running text:

.card p {
  max-width: none;
}

Wrapping

text-wrap: pretty and overflow-wrap: break-word come from the reset. Pretty wrapping is what prevents a single-word last line, and it costs nothing on short paragraphs.

Table of contents