Role by scale
Every role at every step of the type scale. The pixel figures are approximate: the larger steps are fluid and grow with the screen.
| scale | display | body | label | voice | data |
|---|---|---|---|---|---|
| text-caption13px | Intent | Intent | Intent | Intent | Intent |
| text-meta14px | |||||
| text-body17px | Intent | Intent | Intent | Intent | Intent |
| text-lead21px | Intent | Intent | Intent | Intent | Intent |
| text-h426px | Intent | Intent | Intent | Intent | Intent |
| text-h333px | Intent | Intent | Intent | Intent | Intent |
| text-h241px | Aa | Aa | Aa | Aa | Aa |
| text-h152px | Aa | Aa | Aa | Aa | Aa |
| text-display52–65px | Aa | Aa | Aa | Aa | Aa |
| text-hero41–96px | Aa | Aa | Aa | Aa | Aa |
Usage
Tokens it uses
| --text-caption | … |
|---|---|
| --text-meta | … |
| --text-body | … |
| --text-lead | … |
| --text-h4 | … |
| --text-h3 | … |
| --text-h2 | … |
| --text-h1 | … |
| --text-display | … |
| --text-hero | … |
Values are read live from the stylesheet, so they follow the site theme.