Content & typography

Text rhythm and readable measures. Surfaces do not silently change paragraph or heading sizes.

Basic structure

div.content > heading + paragraphs + links

Try it AlignmentText sizeBody paragraph size

Example heading

Example introductory text using the Lede role.

Body copy has a shared size and rhythm. Strong text, emphasis and links keep their ordinary meaning.

First list item.
Second list item.

HTML

<div class="content"><h2>Example heading</h2><p class="lede">Example introductory text using the Lede role.</p><p>Body copy has a shared size and rhythm. <strong>Strong text</strong>, <em>emphasis</em> and <a href="#options">links</a> keep their ordinary meaning.</p><ul><li>First list item.</li><li>Second list item.</li></ul></div>

Options

Class or attribute	What it does
`is-solo`	Centered content with a capped width.
`is-small / is-medium / is-large`	Explicit body sizes: 14 / 18 / 24px. Default body is 18px.
`text-left / text-center / text-right`	Text alignment; independent of layout.
`measure-sm / measure-md / measure-lg`	32 / 44 / 60rem line-length caps.
`like-h1 … like-h6`	Heading presentation without changing semantic level.
`is-size-1 … is-size-8`	Size-only utilities; 6/7/8 are 18/16/14px for individual paragraphs.
`lede / meta / eyebrow`	Introduction, metadata, and short overline roles.