Typography

Examples

.customLabel {
  --component-typography-label-tracking: var(--type-tracking-body);
  --component-typography-label-font-family: var(--type-family-body);
}

Props

Any native prop not listed here goes to the root element unchanged.

Without variant, the look comes from the element: h1–h6 take the variant of the same name; code, kbd and samp take code; small takes small; span, strong, em, mark, s, abbr, cite, q and time take inherit; every other element takes body. An explicit variant wins. The heading level, and so the role, comes only from as. inherit and code set no size, so on h1–h6 the plain heading's size for that level shows through.

Component tokens

Accessibility

• The level comes from as and the look from variant, so keep the page outline logical whatever the size.
• success, warning and error carry meaning, so the wording must state the status on its own (WCAG 1.4.1); the color is an extra.
• On glass, use only the default or muted tone: the others aren't contrast-checked there.
• Don't set tone on text inside a Link, or on mark: those pairings aren't contrast-checked, and a recolored link may lose what sets it apart.
• The label look's uppercase is CSS only, so write the source text in normal case: some screen readers spell out words typed in capitals.
• abbr's title isn't reliably announced or shown, so spell the abbreviation out on first use.
• Sizes are in rem, so text follows the browser's text size and zoom.
• Long words break instead of overflowing in block layout, so nothing scrolls sideways at 320 CSS px (WCAG 1.4.10). In a flex or grid item, also let it shrink (min-inline-size: 0).