Typography shortcuts

Official groups typography by role: labels for single lines, prose for paragraphs, and headings for hierarchy. Choose colors, wrapping, and HTML heading levels separately.

Numbered scales

Each role provides 1x through 9x, with a -mono variant at every size. The 54 names share Standard’s font-size and letter-spacing scales. At a 16px root, their line heights are:

Step	Font size	Label line height	Prose line height	Heading line height
`1x`	12px	16px	20px	16px
`2x`	14px	20px	22px	20px
`3x`	16px	24px	26px	24px
`4x`	18px	26px	28px	24px
`5x`	20px	28px	30px	28px
`6x`	24px	30px	32px	30px
`7x`	28px	36px	36px	36px
`8x`	36px	40px	44px	40px
`9x`	60px	60px	68px	60px

Labels and prose use weight 400 and make strong descendants 600. Headings use weight 600 and make strong descendants 700. Mono variants select the theme’s monospace family. None of these roles adds a breakpoint.

html

<h2 class="heading-4x heading-6x@md text-balance">Build one coherent system</h2>
<p class="prose-3x text-pretty">Size, leading, and tracking move together.</p>
<span class="label-2x-mono">INV-0042</span>

cn merges all numbered typography roles as one group when their ordered conditions match. Importance takes precedence, then the last role wins. Atomic typography utilities remain separate.

Controls and descriptions

Use explicit roles for labels and paragraphs. Form components own their control metrics, including 16px text below sm and 14px from sm.

html

<label>
  <span class="label-2x font-weight:5x">Workspace name</span>
  <input class="input" name="workspace" />
</label>
<p class="prose-2x m:0">This name appears on the project home page.</p>

The old text-Nx, text-body, text-label, and related semantic shortcuts are removed. Select the current role and add margins or emphasis explicitly.

Wrapping and local resets

Class	Effect
`text-balance`	Balanced wrapping with an emergency break for long words
`text-pretty`	Better paragraph line breaks with the same long-word protection
`plain-list`	Removes list marker, margin, and padding
`heading-inherit`	Descendant headings inherit size, weight, and line height
`text-truncate`	One-line clipping with an ellipsis

html

<h2 class="text-balance">A heading that fits its available width</h2>
<p class="text-pretty">Longer explanatory text can wrap without widening its container.</p>

Do not use text-truncate when the hidden remainder is needed to understand the content unless the full text is also available. plain-list changes visual markers, not the list’s content; use real ul/li structure, and check screen-reader list announcements when markers are removed. heading-inherit applies to nested headings, so use it only when the heading should share the surrounding text metrics.

Storybook specimen · Next: Official components