Mushilu-San UI Typography
Applies the library type scale to headings, body text, quotes and code.
Selector: mui-typography
import { Typography } from '@mushilu-san/ui/data-display';Loading example…
Overview
variant picks the style: h1 to h4 for headings, p, lead, large, small and muted for body text, and code and blockquote.
h1–h4) are exposed as role="heading" with the matching aria-level, so screen readers see the outline.
When to use
Headings and body text that should match the type scale without a custom class. Consistent text styles across many pages.
When not to use
A one-off piece of text with a unique style. Write it in your own stylesheet.
Guidelines
Do
Wrap a heading variant in a native <h1>–<h4>so the page outline stays correct.Use largeorleadfor emphasis that is not a heading.
Don't
Do not rely on variant="h1"alone to mark a page heading.Do not pick a heading variant only for its size.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — (no role) | role="heading" and aria-level. Other variants have no role. |
Text contrast depends on the surrounding surface. mutedtext must still meet 4.5:1 against its background.
API
Typography
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'muted' | 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'lead' | 'large' | 'small' | 'code' | 'blockquote' | 'p' | Type style: `h1`–`h4`, `p`, `lead`, `large`, `small`, `muted`, `code` or `blockquote`. Default `p`. |
CSS parts
::part(root)
Tokens
--mui-font-sans--mui-font-size-base--mui-font-weight-medium--mui-color-text--mui-color-text-muted