Typography shortcuts

Official’s typography shortcuts pair type metrics without choosing a font family, color, or HTML heading level. Numbered scales and semantic roles have different contracts: numbered scales have no implicit breakpoints, while several semantic roles retain responsive metrics.

Numbered scales

For each N from 1 to 9, text-Nx combines font-size:Nx, letter-spacing:Nx, and line-height:Nx. The corresponding heading-Nx shares size and tracking but uses the following leading:

Heading	Line height
`heading-1x`	`line-height:1x`
`heading-2x`	`calc(var(--spacing) * 4.5)`
`heading-3x`	`calc(var(--spacing) * 5.5)`
`heading-4x`	`line-height:3x`
`heading-5x`	`line-height:4x`
`heading-6x` through `heading-9x`	The corresponding `line-height:Nx`

html

<h2 class="heading-4x heading-6x@md font-weight:6x text-balance">Build one coherent system</h2>
<p class="text-3x text-pretty">Size, leading, and tracking move together.</p>

Choose emphasis with font-weight:* and responsive changes explicitly. Only heading 2x and 3x leading follow the spacing scale; the other heading values refer to Standard’s line-height scale. A heading class is presentation, so retain a semantic heading level appropriate to the document.

Semantic roles

These roles remain useful for controls and content. Most start larger for small screens and step down at Standard’s sm breakpoint.

Class	Metrics and purpose
`text-body`	`3x/4x` size/leading, then `2x/3x` at `sm`
`text-control`	`3x/3x`, then `2x/2x` at `sm`
`text-dense`	`2x/2x`, then `1x/1x` at `sm`
`text-caption`	`1x/2x`, unchanged at `sm`
`text-label`	`text-control` plus `5x` font weight
`text-description`	`text-body` with paragraph margin reset
`text-field`	`text-control` with inherited font family
`text-eyebrow`	`1x/2x`, uppercase, 0.12em letter spacing

html

<label>
  <span class="text-label">Workspace name</span>
  <input class="text-field" name="workspace" />
</label>
<p class="text-description">This name appears on the project home page.</p>

text-field keeps the parent font family even if form preflight is disabled. Pair these roles with explicit colors and, for the input, border and focus styles that work in the application’s themes.

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