Typography

var(--set-typography-font-family-default)

Default font family. Use as the system's standard typeface.

var(--set-typography-font-stretch-normal)

Normal font width. Use as the system's standard type width.

var(--set-typography-font-stretch-semi-condensed)

Semi-condensed font width. A subtly narrower alternative to normal.

var(--set-typography-font-stretch-condensed)

Condensed font width. Use where horizontal space is tight (e.g. badges, avatars).

var(--set-typography-font-stretch-ultra-condensed)

Ultra-condensed font width. The narrowest width; use sparingly for dense numeric/marker contexts.

var(--set-typography-font-variation-settings-default)

Default font-variation-settings. Restate after every font shorthand.

var(--set-typography-font-variation-settings-italic)

Font-variation-settings for italic text. Adds the slant axis that WebKit drops when font-variation-settings is set — apply wherever font-style: italic is used.

var(--set-typography-font-weight-regular)

Regular font weight. Use as the system's standard text weight.

var(--set-typography-font-weight-regular-plus)

Slightly heavier regular font weight. Use for subtly emphasised text where bold would be too strong.

var(--set-typography-font-weight-medium)

Medium font weight. Use for medium text emphasis (e.g. medium headings).

var(--set-typography-font-weight-bold)

Bold font weight. Use for strong text emphasis (semantic strong/b elements, small headings).

var(--set-typography-prose-link-default-decoration-line)

Default decoration line for prose links.

var(--set-typography-prose-link-default-decoration-offset)

Default decoration offset for prose links, in em.

var(--set-typography-prose-link-default-decoration-thickness)

Default decoration thickness for prose links.

var(--set-typography-prose-link-hover-decoration-line)

Decoration line for prose links on hover.

var(--set-typography-prose-link-hover-decoration-offset)

Decoration offset for prose links on hover, in em.

var(--set-typography-prose-link-active-decoration-offset)

Decoration offset for prose links during active (pressed) state, in em.

var(--set-typography-text-body-xs-font)

Extra small body text. Use for the smallest body copy (microtext).

var(--set-typography-text-body-xs-font-stretch)

Font width paired with the body xs composite.

var(--set-typography-text-body-sm-font)

Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent.

var(--set-typography-text-body-sm-font-stretch)

Font width paired with the body sm composite.

var(--set-typography-text-heading-xs-font)

Extra small heading (h6-equivalent). Use for subsection headings.

var(--set-typography-text-heading-xs-font-stretch)

Font width paired with the heading xs composite.

var(--set-typography-text-body-md-font)

Default body text size.

var(--set-typography-text-body-md-font-stretch)

Font width paired with the body md composite.

var(--set-typography-text-heading-sm-font)

Small heading (h5-equivalent). Use for subsection headings.

var(--set-typography-text-heading-sm-font-stretch)

Font width paired with the heading sm composite.

var(--set-typography-text-body-lg-font)

Large body text. Use for emphasised copy (intro paragraphs, lede text).

var(--set-typography-text-body-lg-font-stretch)

Font width paired with the body lg composite.

var(--set-typography-text-heading-md-font)

Medium heading (h4-equivalent). Use for subsection headings.

var(--set-typography-text-heading-md-font-stretch)

Font width paired with the heading md composite.

var(--set-typography-text-heading-lg-font)

Large heading (h3-equivalent). Use for subsection headings and component-level titles (cards, panels).

var(--set-typography-text-heading-lg-font-stretch)

Font width paired with the heading lg composite.

var(--set-typography-text-heading-xl-font)

Extra large heading (h2-equivalent). Use for section headings.

var(--set-typography-text-heading-xl-font-stretch)

Font width paired with the heading xl composite.

var(--set-typography-text-heading-2xl-font)

2xl heading (h1-equivalent). Use for page titles.

var(--set-typography-text-heading-2xl-font-stretch)

Font width paired with the heading 2xl composite.

var(--set-typography-text-heading-3xl-font)

Display heading (3xl). Use for hero/marketing headings.

var(--set-typography-text-heading-3xl-font-stretch)

Font width paired with the heading 3xl composite.

var(--set-typography-text-heading-4xl-font)

Display heading (4xl). Use for larger hero/marketing headings.

var(--set-typography-text-heading-4xl-font-stretch)

Font width paired with the heading 4xl composite.

var(--set-typography-text-heading-5xl-font)

Display heading (5xl). Use for the largest hero/marketing headings.

var(--set-typography-text-heading-5xl-font-stretch)

Font width paired with the heading 5xl composite.

var(--set-typography-text-body-responsive-xs-font)

Extra small body text. Use for the smallest body copy (microtext).

var(--set-typography-text-body-responsive-xs-font-stretch)

Font width paired with the body responsive xs composite.

var(--set-typography-text-body-responsive-sm-font)

Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent.

var(--set-typography-text-body-responsive-sm-font-stretch)

Font width paired with the body responsive sm composite.

var(--set-typography-text-heading-responsive-xs-font)

Extra small heading (h6-equivalent). Use for subsection headings.

var(--set-typography-text-heading-responsive-xs-font-stretch)

Font width paired with the heading responsive xs composite.

var(--set-typography-text-body-responsive-md-font)

Default body text size.

var(--set-typography-text-body-responsive-md-font-stretch)

Font width paired with the body responsive md composite.

var(--set-typography-text-heading-responsive-sm-font)

Small heading (h5-equivalent). Use for subsection headings.

var(--set-typography-text-heading-responsive-sm-font-stretch)

Font width paired with the heading responsive sm composite.

var(--set-typography-text-body-responsive-lg-font)

Large body text. Use for emphasised copy (intro paragraphs, lede text).

var(--set-typography-text-body-responsive-lg-font-stretch)

Font width paired with the body responsive lg composite.

var(--set-typography-text-heading-responsive-md-font)

Medium heading (h4-equivalent). Use for subsection headings.

var(--set-typography-text-heading-responsive-md-font-stretch)

Font width paired with the heading responsive md composite.

var(--set-typography-text-heading-responsive-lg-font)

Large heading (h3-equivalent). Use for subsection headings and component-level titles (cards, panels).

var(--set-typography-text-heading-responsive-lg-font-stretch)

Font width paired with the heading responsive lg composite.

var(--set-typography-text-heading-responsive-xl-font)

Extra large heading (h2-equivalent). Use for section headings.

var(--set-typography-text-heading-responsive-xl-font-stretch)

Font width paired with the heading responsive xl composite.

var(--set-typography-text-heading-responsive-2xl-font)

2xl heading (h1-equivalent). Use for page titles.

var(--set-typography-text-heading-responsive-2xl-font-stretch)

Font width paired with the heading responsive 2xl composite.

var(--set-typography-text-heading-responsive-3xl-font)

Display heading (3xl). Use for hero/marketing headings.

var(--set-typography-text-heading-responsive-3xl-font-stretch)

Font width paired with the heading responsive 3xl composite.

var(--set-typography-text-heading-responsive-4xl-font)

Display heading (4xl). Use for larger hero/marketing headings.

var(--set-typography-text-heading-responsive-4xl-font-stretch)

Font width paired with the heading responsive 4xl composite.

var(--set-typography-text-heading-responsive-5xl-font)

Display heading (5xl). Use for the largest hero/marketing headings.

var(--set-typography-text-heading-responsive-5xl-font-stretch)

Font width paired with the heading responsive 5xl composite.

var(--set-typography-word-spacing-default)

Default word spacing (in em). Tightens the space between words to suit the system's typeface.

var(--set-typography-word-spacing-monospaced)

Word spacing for monospaced text (0em). Monospace glyphs carry their own even advance, so tightening word spacing would break the grid — apply to code, tabular data, and other mono contexts.

var(--set-typography-leading-700)

Default leading dimension. A block size representing the line-height; divide by font size to derive a line-height ratio. An escape hatch for aligning line-heights across elements with different font sizes (e.g. a small counter beside a large heading) — reach for text composites or typeStep pairs first.

var(--set-typography-leading-750)

Leading step 750.

var(--set-typography-leading-775)

Leading step 775.

var(--set-typography-leading-800)

Leading step 800.

var(--set-typography-leading-850)

Leading step 850.

var(--set-typography-leading-900)

Leading step 900.

var(--set-typography-leading-925)

Leading step 925.

var(--set-typography-leading-950)

Leading step 950.

var(--set-typography-leading-1000)

Leading step 1000.

var(--set-typography-leading-1200)

Leading step 1200.

var(--set-typography-leading-1300)

Leading step 1300.

var(--set-typography-paragraph-spacing-sm)

Tighter paragraph spacing. Use in dense layouts or compact prose.

var(--set-typography-paragraph-spacing-default)

Default vertical spacing between paragraphs.

var(--set-typography-paragraph-spacing-lg)

Looser paragraph spacing. Use in editorial layouts where extra breathing room aids reading.

var(--set-typography-measure-tight)

Tighter measure (line length, in em). A more constrained alternative to the default.

var(--set-typography-measure-default)

Default measure (line length, in em). Use as the comfortable maximum width to keep line lengths readable.

var(--set-typography-metric-default-cap-balance)

Bottom padding to vertically balance a filled single-line cell (e.g. inline code), in em.

var(--set-typography-metric-default-cell-height)

Character cell height (full line box), in em.

var(--set-typography-metric-default-cell-width)

Character cell width (advance), in em.

var(--set-typography-metric-default-side-bearing-pair)

Both facing sidebearings combined — one inter-letter gap (2× single); basis for word-spacing, in em.

var(--set-typography-metric-default-side-bearing-single)

A single per-side sidebearing, in em.

var(--set-typography-type-step-50-font-size)

Type-step 50 font size. Smallest step.

var(--set-typography-type-step-50-font-stretch)

Type-step 50 font stretch.

var(--set-typography-type-step-50-line-height)

Type-step 50 line height.

var(--set-typography-type-step-100-font-size)

Type-step 100 font size. Tight-leading variant.

var(--set-typography-type-step-100-font-stretch)

Type-step 100 font stretch.

var(--set-typography-type-step-100-line-height)

Type-step 100 line height. Tight leading.

var(--set-typography-type-step-150-font-size)

Type-step 150 font size. Loose-leading variant of step 100.

var(--set-typography-type-step-150-font-stretch)

Type-step 150 font stretch.

var(--set-typography-type-step-150-line-height)

Type-step 150 line height. Loose leading.

var(--set-typography-type-step-200-font-size)

Default type-step font size. Type-steps are size/leading pairs for explicit typographic control without a full text composite (body/heading).

var(--set-typography-type-step-200-font-stretch)

Type-step 200 font stretch.

var(--set-typography-type-step-200-line-height)

Default type-step line height.

var(--set-typography-type-step-300-font-size)

Type-step 300 font size.

var(--set-typography-type-step-300-font-stretch)

Type-step 300 font stretch.

var(--set-typography-type-step-300-line-height)

Type-step 300 line height.

var(--set-typography-type-step-400-font-size)

Type-step 400 font size. Tight-leading variant.

var(--set-typography-type-step-400-font-stretch)

Type-step 400 font stretch.

var(--set-typography-type-step-400-line-height)

Type-step 400 line height. Tight leading.

var(--set-typography-type-step-450-font-size)

Type-step 450 font size. Loose-leading variant of step 400.

var(--set-typography-type-step-450-font-stretch)

Type-step 450 font stretch.

var(--set-typography-type-step-450-line-height)

Type-step 450 line height. Loose leading.

var(--set-typography-type-step-500-font-size)

Type-step 500 font size.

var(--set-typography-type-step-500-font-stretch)

Type-step 500 font stretch.

var(--set-typography-type-step-500-line-height)

Type-step 500 line height.

var(--set-typography-type-step-600-font-size)

Type-step 600 font size.

var(--set-typography-type-step-600-font-stretch)

Type-step 600 font stretch.

var(--set-typography-type-step-600-line-height)

Type-step 600 line height.

var(--set-typography-type-step-700-font-size)

Type-step 700 font size.

var(--set-typography-type-step-700-font-stretch)

Type-step 700 font stretch.

var(--set-typography-type-step-700-line-height)

Type-step 700 line height.

var(--set-typography-type-step-800-font-size)

Type-step 800 font size.

var(--set-typography-type-step-800-font-stretch)

Type-step 800 font stretch.

var(--set-typography-type-step-800-line-height)

Type-step 800 line height.

var(--set-typography-type-step-900-font-size)

Type-step 900 font size.

var(--set-typography-type-step-900-font-stretch)

Type-step 900 font stretch.

var(--set-typography-type-step-900-line-height)

Type-step 900 line height.

var(--set-typography-type-step-1000-font-size)

Type-step 1000 font size.

var(--set-typography-type-step-1000-font-stretch)

Type-step 1000 font stretch.

var(--set-typography-type-step-1000-line-height)

Type-step 1000 line height.

var(--set-typography-type-step-1100-font-size)

Type-step 1100 font size.

var(--set-typography-type-step-1100-font-stretch)

Type-step 1100 font stretch.

var(--set-typography-type-step-1100-line-height)

Type-step 1100 line height.

var(--set-typography-type-step-1200-font-size)

Type-step 1200 font size.

var(--set-typography-type-step-1200-font-stretch)

Type-step 1200 font stretch.

var(--set-typography-type-step-1200-line-height)

Type-step 1200 line height.

var(--set-typography-type-step-1300-font-size)

Type-step 1300 font size. Largest step.

var(--set-typography-type-step-1300-font-stretch)

Type-step 1300 font stretch.

var(--set-typography-type-step-1300-line-height)

Type-step 1300 line height.