Typography

Scale

Typography scale for interface text.

  • text-basefont-size: 14px; line-height: 20px
  • text-smfont-size: 13px; line-height: 19px
  • text-xsfont-size: 12px; line-height: 17px

Note

Avoid overriding a step’s line-height with leading-* or text-sm/6, and avoid arbitrary sizes (text-[13px]) — if no scale step fits, treat it as a scale or design conversation rather than a one-off.

Prose

For rich text (user-generated content, comments, documents), use the <Prose /> component, which applies its own typographic rhythm. For one-off cases, use the scale below.

  • text-prose-h1font-size: 20px; line-height: 28px
  • text-prose-h2font-size: 17px; line-height: 24px
  • text-prose-h3font-size: 15px; line-height: 21px
  • text-prose-basefont-size: 14px; line-height: 23px
  • text-prose-prefont-size: 14px; line-height: 22px
  • text-prose-compact-basefont-size: 13px; line-height: 21px
  • text-prose-compact-prefont-size: 13px; line-height: 21px

Fonts

Sans (Muoto)

Font Weight

While Muoto is a variable font (see below), use only the following weights:

normal
font-normal
book
font-book
medium
font-medium

Use font-book (450) as the heaviest weight for interface text, including labels, buttons, headers, and table heads. Reserve font-medium (500) for prose content, where it styles strong text and prose h1 to h3. UI code should not exceed font-book; font-medium outside Prose or markdown contexts is a smell.

Playground