Typography
The sizes and line heights text is set at. Body text is 14px on a 20px line, and that is the size most of the system uses.
Scale
Each role shown at its own size.
| Role | Size | Line height | Weight | Used for |
|---|---|---|---|---|
| Heading xxlarge | 35px | 40px | 600 | A page title at the largest step. |
| Heading xlarge | 29px | 32px | 600 | A page title. |
| Heading large | 24px | 28px | 600 | A page header, a drawer title. |
| Heading medium | 20px | 24px | 600 | A modal title, a section heading. |
| Heading small | 16px | 20px | 600 | A panel title. |
| Body | 14px | 20px | 400 | Running text, labels, menu items. |
| Body large | 16px | 24px | 400 | The value inside a field. |
| Body small | 12px | 16px | 400 | Field labels, helper text, badges. |
Weights
Three weights, and no more.
| Weight | Value | Used for |
|---|---|---|
| Regular | 400 | Running text, menu items, lozenges. |
| Medium | 500 | Button labels, tabs, the current rail item. |
| Semibold | 600 | Headings and field labels. |