Typography — prose

Typography — prose as one block: h2, h3, h4, paragraphs, a list, a quote, a figure with its caption, a rule, a closing paragraph.

Beta · Content blocks · packages/css/src/components/typography.css

.pui-typography — the site’s article body: h2 / h3 / h4, paragraphs, a list, a quote, a figure, a rule. Set data-canvas or the mobile breakpoint and it is the mobile article.

Typography — prose — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

A text property per block (H2, Paragraph 1–4, H3, Quote, H4, Caption); Has list, Has quote, Has figure, Has rule
720 wide here; the site’s article column is 856 — stated; the block fills its column
No states; one component for both canvases by mode
strong / b are Semibold 600 — inline emphasis is the design lead’s contrast: ‘the emphasis of the text is missing … the contrast is missing … keep my bold variation’ (request 17). R11 reads ‘no Semibold for a whole paragraph’, not for a phrase in one
A consumer’s page reset at the same specificity, loaded after the kit, beats the list and link rules by source order — this is the one component whose children are bare elements, so the adoption guide’s reset guard also excludes .pui-typography * (request 25); the block does not raise its own specificity
From a CMS: the block styles h2–h4, p, ul / ol, blockquote, figure + figcaption, hr, a, strong. A CMS’s own blocks — figure alignments and resizes, galleries, columns, button rows, downloads, covers, separators, embeds — are the page’s, on tokens (space/, radius/, font/weight/500 by name); a button in prose cannot carry the Button class

Use when long-form text on the site or in the docs — an article, a case study, a help page, a policy.

Do not use when on a product screen (a Card’s description, a Field’s text — those are components); on a slide (the Typography foundation’s slide roles and the deck’s own blocks).

Relates to Heading pair, Separator, Aspect ratio, Card, Bullet list.

Anti-patterns a heading below h4 · two rules in a row · a paragraph in Medium · a figure without its caption when the image is data · a size typed instead of a role · a fill changed on the instance.

Keywords: typography, prose, article, long-form, headings, paragraph, blockquote, list

A set of prose styles, not a registry item

Figma — page Typography — prose: Typography (1 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens typography.css.

<article class="pui-typography"><h2>…</h2><p>…</p><h3>…</h3><ul><li>…</li></ul><blockquote>…</blockquote>
  <figure><div class="pui-aspect-ratio">…</div><figcaption>…</figcaption></figure><hr>…</article>

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
`#544d4d` on `#ffffff`	8.24	4.5	text.muted on surface.page (promised)	ok
`#0b0202` on `#ffffff`	20.51	4.5	text.default on surface.page (promised)	ok

2 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Typography link	surface/page	shadow `#6a66e4` 2 px	`#ffffff`	4.53	ok
Typography link	surface/card	shadow `#6a66e4` 2 px	`#f2f2f7`	4.06	ok
Typography link	surface/sunken	shadow `#6a66e4` 2 px	`#f2f2f2`	4.05	ok

1 of 1 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).