Typography
Last Updated: September 2026Text component honoring the type scale.
Source CodeAnatomy
link- 1Variant
- 2Color
- 3Host
Variants
linkDisplay & supportive
Largest display and supportive styles for hero-like product moments.
Headings
heading-xl through heading-s — pick the host with render for semantics.
Body
body-l / body-m / body-s for paragraphs and descriptions.
Labels
label-l through label-xs for control labels and dense UI.
Numeric
Tabular numeric styles from numeric-lg down to numeric-xxs.
Usage Guidelines
linkWhen to use
- •For all product UI text that should follow the design-system type scale.
- •When you need consistent heading, body, label, or numeric styles.
- •To apply semantic color or truncate overflowing single-line text.
When not to use
- •For raw marketing pages that intentionally break the product type scale.
- •When you only need a one-off CSS class — prefer Typography for consistency.
- •As a layout container — it styles text, not structure beyond the host element.
Use render to match the visual style to the correct heading level.
Don't style a heading as heading-* while leaving the default span host.
Use color tokens for hierarchy instead of inventing one-off hex values.
Don't let long strings blow out layout — set truncate in constrained widths.
Behaviors
linkVariant is the size API
- •There is no separate size prop — scale is entirely via the required variant.
- •Variants cover display, supportive, overline, headings, body, labels, and numerics.
Alignment, color, truncate
- •align: left | center | right (optional).
- •color applies Color token classes; omit to inherit.
- •truncate adds a single-line ellipsis (needs a bounded width).
Polymorphism
- •Default element is span.
- •Pass render={<h1 />} (or other elements) to change semantics without changing style.
Content Guidelines
linkCopy
- •Use sentence case for UI labels and body copy.
- •Keep headings short; put detail in body variants.
- •Use synthetic or de-identified examples only — never real PHI/PII.
Scale
- •Prefer body-m for default reading text; reserve display for rare emphasis.
- •Use numeric-* for metrics so figures align in tables and score cards.
Accessibility
linkText & Labels
- •Choose a render host that matches document outline (h1–h6) for headings.
- •Color alone should not convey meaning — pair with text or icons.
ARIA attributes
- •Typography does not set ARIA roles; the host element carries semantics.
- •For truncated text, ensure the full string is available (title/tooltip) when needed.
Keyboard Support
- •Not interactive by default — no keyboard behavior.
WCAG Compliance Standards
FAQs
linkIs there a size prop?
No. Pass the required variant (e.g. body-m, heading-l, numeric-md). That is the type scale API.
How do I render a real heading?
Use render={<h2 />} (or another level) while keeping the visual variant you need.
How do I truncate?
Set truncate and constrain the parent width. Truncation is single-line ellipsis only.