22 named type styles. Each rendered at actual size with its specification.
| Style | Size | Weight | CSS Weight | Line Break | Underline |
|---|---|---|---|---|---|
| display | 48px | bold | 700 | heading | — |
| heading1 | 32px | bold | 700 | heading | — |
| heading2 | 24px | bold | 700 | heading | — |
| heading3 | 18px | bold | 700 | heading | — |
| subtitle1 | 16px | bold | 700 | heading | — |
| subtitle2 | 14px | bold | 700 | heading | — |
| subtitle3 | 12px | bold | 700 | heading | — |
| body1Regular | 16px | normal | 400 | paragraph | — |
| body1SemiBold | 16px | semiBold | 600 | paragraph | — |
| body2Regular | 14px | normal | 400 | paragraph | — |
| body2SemiBold | 14px | semiBold | 600 | paragraph | — |
| buttonLarge | 16px | bold | 700 | heading | — |
| buttonMedium | 14px | bold | 700 | heading | — |
| buttonSmall | 12px | bold | 700 | heading | — |
| link1 | 14px | medium | 500 | heading | — |
| link1U | 14px | medium | 500 | heading | yes |
| link2 | 12px | medium | 500 | heading | — |
| link2U | 12px | medium | 500 | heading | yes |
| captionRegular | 12px | normal | 400 | heading | — |
| captionSemiBold | 12px | semiBold | 600 | heading | — |
| captionBold | 12px | bold | 700 | heading | — |
| overline | 10px | medium | 500 | heading | — |
{
"typography": {
"style": "body1SemiBold" // predefined style
}
}
// Or with overrides:
{
"typography": {
"style": "body1Regular",
"fontSize": 18, // override size
"fontWeight": "bold" // override weight
}
}