Typography
Use typography to make content readable and beautiful
Overview · Fonts · Type scale & tokens · Applying type · Editorial treatments
Type scale
A type scale is a selection of type styles used across a product to ensure consistency.
M3 type scale
Material 3 has one type scale containing two sets of type styles: 15 baseline and 15 emphasized. Both of these style sets follow the same scale from Display Large to Label Small.
The emphasized styles were added in the expressive update. They have a higher weight and other minor adjustments compared to the baseline styles, and are best applied to bold, selection, and other areas of emphasis. Baseline and emphasized styles are meant to be used together.
The scale is a range of contrasting styles that support the needs of various product contexts and content. No single product will use all the styles. Instead, select styles from the scale that are most appropriate.
Type scale tokens
Each of the 30 styles has a single token that captures all the default properties. Tokens are separated into the baseline and emphasized sets. Each axis and property, such as font, line height, size, tracking, and weight, also has an individual token for greater customization. Learn more about design tokens
Baseline type style tokens
Design tokens
Token table
Machine-readable relationship table
Typography tokens · 1 token set · 228 tokens · live token table · DSDB TYPOGRAPHY.20543ce18892f7d9
- Default context: Platform: Android · Audience: 3P · Font: Static
- Not configurable here (group default used): Theme: Light · Motion scheme: Standard · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
- Reference chain: aliases from the token to its source value (
token → alias → … → value). "—" means the token holds a literal value.
Type scale · md.sys.typescale · 228 tokens
Default typography tokens combining font, weight, size, tracking, and line height in the type scale.
| Group | Token | Type | Reference chain | Resolved value |
|---|---|---|---|---|
| Display styles › Display Large | md.sys.typescale.display-large | Typography | composite font names: md.sys.typescale.display-large.font → md.ref.typeface.brandfont weight: md.sys.typescale.display-large.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.display-large.sizeline height: md.sys.typescale.display-large.line-heightfont tracking: md.sys.typescale.display-large.tracking | Roboto · weight 400 · size 57pt · line height 64pt · tracking -0.25pt |
| Display styles › Display Large | md.sys.typescale.display-large.font | Font names | md.ref.typeface.brand | Roboto |
| Display styles › Display Large | md.sys.typescale.display-large.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Display styles › Display Large | md.sys.typescale.display-large.size | Font size | — | 57pt |
| Display styles › Display Large | md.sys.typescale.display-large.tracking | Font tracking | — | -0.25pt |
| Display styles › Display Large | md.sys.typescale.display-large.line-height | Line height | — | 64pt |
| Display styles › Display Large | md.sys.typescale.display-large.wght | Axis value | — | wght 400 |
| Display styles › Display Large | md.sys.typescale.display-large.grad | Axis value | — | GRAD 0 |
| Display styles › Display Large | md.sys.typescale.display-large.wdth | Axis value | — | wdth 100 |
| Display styles › Display Large | md.sys.typescale.display-large.rond | Axis value | — | ROND 0 |
| Display styles › Display Large | md.sys.typescale.display-large.opsz | Axis value | — | opsz 57 |
| Display styles › Display Large | md.sys.typescale.display-large.crsv | Axis value | — | CRSV 0 |
| Display styles › Display Large | md.sys.typescale.display-large.slnt | Axis value | — | slnt 0 |
| Display styles › Display Large | md.sys.typescale.display-large.fill | Axis value | — | FILL 0 |
| Display styles › Display Large | md.sys.typescale.display-large.hexp | Axis value | — | HEXP 0 |
| Display styles › Display Medium | md.sys.typescale.display-medium | Typography | composite font names: md.sys.typescale.display-medium.font → md.ref.typeface.brandfont weight: md.sys.typescale.display-medium.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.display-medium.sizeline height: md.sys.typescale.display-medium.line-heightfont tracking: md.sys.typescale.display-medium.tracking | Roboto · weight 400 · size 45pt · line height 52pt · tracking 0pt |
| Display styles › Display Medium | md.sys.typescale.display-medium.font | Font names | md.ref.typeface.brand | Roboto |
| Display styles › Display Medium | md.sys.typescale.display-medium.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Display styles › Display Medium | md.sys.typescale.display-medium.size | Font size | — | 45pt |
| Display styles › Display Medium | md.sys.typescale.display-medium.tracking | Font tracking | — | 0pt |
| Display styles › Display Medium | md.sys.typescale.display-medium.line-height | Line height | — | 52pt |
| Display styles › Display Medium | md.sys.typescale.display-medium.wght | Axis value | — | wght 400 |
| Display styles › Display Medium | md.sys.typescale.display-medium.grad | Axis value | — | GRAD 0 |
| Display styles › Display Medium | md.sys.typescale.display-medium.wdth | Axis value | — | wdth 100 |
| Display styles › Display Medium | md.sys.typescale.display-medium.rond | Axis value | — | ROND 0 |
| Display styles › Display Medium | md.sys.typescale.display-medium.opsz | Axis value | — | opsz 45 |
| Display styles › Display Medium | md.sys.typescale.display-medium.crsv | Axis value | — | CRSV 0 |
| Display styles › Display Medium | md.sys.typescale.display-medium.slnt | Axis value | — | slnt 0 |
| Display styles › Display Medium | md.sys.typescale.display-medium.fill | Axis value | — | FILL 0 |
| Display styles › Display Medium | md.sys.typescale.display-medium.hexp | Axis value | — | HEXP 0 |
| Display styles › Display Small | md.sys.typescale.display-small | Typography | composite font names: md.sys.typescale.display-small.font → md.ref.typeface.brandfont weight: md.sys.typescale.display-small.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.display-small.sizeline height: md.sys.typescale.display-small.line-heightfont tracking: md.sys.typescale.display-small.tracking | Roboto · weight 400 · size 36pt · line height 44pt · tracking 0pt |
| Display styles › Display Small | md.sys.typescale.display-small.font | Font names | md.ref.typeface.brand | Roboto |
| Display styles › Display Small | md.sys.typescale.display-small.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Display styles › Display Small | md.sys.typescale.display-small.size | Font size | — | 36pt |
| Display styles › Display Small | md.sys.typescale.display-small.tracking | Font tracking | — | 0pt |
| Display styles › Display Small | md.sys.typescale.display-small.line-height | Line height | — | 44pt |
| Display styles › Display Small | md.sys.typescale.display-small.wght | Axis value | — | wght 400 |
| Display styles › Display Small | md.sys.typescale.display-small.grad | Axis value | — | GRAD 0 |
| Display styles › Display Small | md.sys.typescale.display-small.wdth | Axis value | — | wdth 100 |
| Display styles › Display Small | md.sys.typescale.display-small.rond | Axis value | — | ROND 0 |
| Display styles › Display Small | md.sys.typescale.display-small.opsz | Axis value | — | opsz 36 |
| Display styles › Display Small | md.sys.typescale.display-small.crsv | Axis value | — | CRSV 0 |
| Display styles › Display Small | md.sys.typescale.display-small.slnt | Axis value | — | slnt 0 |
| Display styles › Display Small | md.sys.typescale.display-small.fill | Axis value | — | FILL 0 |
| Display styles › Display Small | md.sys.typescale.display-small.hexp | Axis value | — | HEXP 0 |
| Headline styles › Headline Large | md.sys.typescale.headline-large | Typography | composite font names: md.sys.typescale.headline-large.font → md.ref.typeface.brandfont weight: md.sys.typescale.headline-large.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.headline-large.sizeline height: md.sys.typescale.headline-large.line-heightfont tracking: md.sys.typescale.headline-large.tracking | Roboto · weight 400 · size 32pt · line height 40pt · tracking 0pt |
| Headline styles › Headline Large | md.sys.typescale.headline-large.font | Font names | md.ref.typeface.brand | Roboto |
| Headline styles › Headline Large | md.sys.typescale.headline-large.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.size | Font size | — | 32pt |
| Headline styles › Headline Large | md.sys.typescale.headline-large.tracking | Font tracking | — | 0pt |
| Headline styles › Headline Large | md.sys.typescale.headline-large.line-height | Line height | — | 40pt |
| Headline styles › Headline Large | md.sys.typescale.headline-large.wght | Axis value | — | wght 400 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.grad | Axis value | — | GRAD 0 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.wdth | Axis value | — | wdth 100 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.rond | Axis value | — | ROND 0 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.opsz | Axis value | — | opsz 32 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.crsv | Axis value | — | CRSV 0 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.slnt | Axis value | — | slnt 0 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.fill | Axis value | — | FILL 0 |
| Headline styles › Headline Large | md.sys.typescale.headline-large.hexp | Axis value | — | HEXP 0 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium | Typography | composite font names: md.sys.typescale.headline-medium.font → md.ref.typeface.brandfont weight: md.sys.typescale.headline-medium.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.headline-medium.sizeline height: md.sys.typescale.headline-medium.line-heightfont tracking: md.sys.typescale.headline-medium.tracking | Roboto · weight 400 · size 28pt · line height 36pt · tracking 0pt |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.font | Font names | md.ref.typeface.brand | Roboto |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.size | Font size | — | 28pt |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.tracking | Font tracking | — | 0pt |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.line-height | Line height | — | 36pt |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.wght | Axis value | — | wght 400 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.grad | Axis value | — | GRAD 0 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.wdth | Axis value | — | wdth 100 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.rond | Axis value | — | ROND 0 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.opsz | Axis value | — | opsz 28 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.crsv | Axis value | — | CRSV 0 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.slnt | Axis value | — | slnt 0 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.fill | Axis value | — | FILL 0 |
| Headline styles › Headline Medium | md.sys.typescale.headline-medium.hexp | Axis value | — | HEXP 0 |
| Headline styles › Headline Small | md.sys.typescale.headline-small | Typography | composite font names: md.sys.typescale.headline-small.font → md.ref.typeface.brandfont weight: md.sys.typescale.headline-small.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.headline-small.sizeline height: md.sys.typescale.headline-small.line-heightfont tracking: md.sys.typescale.headline-small.tracking | Roboto · weight 400 · size 24pt · line height 32pt · tracking 0pt |
| Headline styles › Headline Small | md.sys.typescale.headline-small.font | Font names | md.ref.typeface.brand | Roboto |
| Headline styles › Headline Small | md.sys.typescale.headline-small.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.size | Font size | — | 24pt |
| Headline styles › Headline Small | md.sys.typescale.headline-small.tracking | Font tracking | — | 0pt |
| Headline styles › Headline Small | md.sys.typescale.headline-small.line-height | Line height | — | 32pt |
| Headline styles › Headline Small | md.sys.typescale.headline-small.wght | Axis value | — | wght 400 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.grad | Axis value | — | GRAD 0 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.wdth | Axis value | — | wdth 100 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.rond | Axis value | — | ROND 0 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.opsz | Axis value | — | opsz 24 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.crsv | Axis value | — | CRSV 0 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.slnt | Axis value | — | slnt 0 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.fill | Axis value | — | FILL 0 |
| Headline styles › Headline Small | md.sys.typescale.headline-small.hexp | Axis value | — | HEXP 0 |
| Title styles › Title Large | md.sys.typescale.title-large | Typography | composite font names: md.sys.typescale.title-large.font → md.ref.typeface.brandfont weight: md.sys.typescale.title-large.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.title-large.sizeline height: md.sys.typescale.title-large.line-heightfont tracking: md.sys.typescale.title-large.tracking | Roboto · weight 400 · size 22pt · line height 28pt · tracking 0pt |
| Title styles › Title Large | md.sys.typescale.title-large.font | Font names | md.ref.typeface.brand | Roboto |
| Title styles › Title Large | md.sys.typescale.title-large.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Title styles › Title Large | md.sys.typescale.title-large.size | Font size | — | 22pt |
| Title styles › Title Large | md.sys.typescale.title-large.tracking | Font tracking | — | 0pt |
| Title styles › Title Large | md.sys.typescale.title-large.line-height | Line height | — | 28pt |
| Title styles › Title Large | md.sys.typescale.title-large.wght | Axis value | — | wght 400 |
| Title styles › Title Large | md.sys.typescale.title-large.grad | Axis value | — | GRAD 0 |
| Title styles › Title Large | md.sys.typescale.title-large.wdth | Axis value | — | wdth 100 |
| Title styles › Title Large | md.sys.typescale.title-large.rond | Axis value | — | ROND 0 |
| Title styles › Title Large | md.sys.typescale.title-large.opsz | Axis value | — | opsz 22 |
| Title styles › Title Large | md.sys.typescale.title-large.crsv | Axis value | — | CRSV 0 |
| Title styles › Title Large | md.sys.typescale.title-large.slnt | Axis value | — | slnt 0 |
| Title styles › Title Large | md.sys.typescale.title-large.fill | Axis value | — | FILL 0 |
| Title styles › Title Large | md.sys.typescale.title-large.hexp | Axis value | — | HEXP 0 |
| Title styles › Title Medium | md.sys.typescale.title-medium | Typography | composite font names: md.sys.typescale.title-medium.font → md.ref.typeface.plainfont weight: md.sys.typescale.title-medium.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.title-medium.sizeline height: md.sys.typescale.title-medium.line-heightfont tracking: md.sys.typescale.title-medium.tracking | Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.15pt |
| Title styles › Title Medium | md.sys.typescale.title-medium.font | Font names | md.ref.typeface.plain | Roboto |
| Title styles › Title Medium | md.sys.typescale.title-medium.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Title styles › Title Medium | md.sys.typescale.title-medium.size | Font size | — | 16pt |
| Title styles › Title Medium | md.sys.typescale.title-medium.tracking | Font tracking | — | 0.15pt |
| Title styles › Title Medium | md.sys.typescale.title-medium.line-height | Line height | — | 24pt |
| Title styles › Title Medium | md.sys.typescale.title-medium.wght | Axis value | — | wght 500 |
| Title styles › Title Medium | md.sys.typescale.title-medium.grad | Axis value | — | GRAD 0 |
| Title styles › Title Medium | md.sys.typescale.title-medium.wdth | Axis value | — | wdth 100 |
| Title styles › Title Medium | md.sys.typescale.title-medium.rond | Axis value | — | ROND 0 |
| Title styles › Title Medium | md.sys.typescale.title-medium.opsz | Axis value | — | opsz 16 |
| Title styles › Title Medium | md.sys.typescale.title-medium.crsv | Axis value | — | CRSV 0 |
| Title styles › Title Medium | md.sys.typescale.title-medium.slnt | Axis value | — | slnt 0 |
| Title styles › Title Medium | md.sys.typescale.title-medium.fill | Axis value | — | FILL 0 |
| Title styles › Title Medium | md.sys.typescale.title-medium.hexp | Axis value | — | HEXP 0 |
| Title styles › Title Small | md.sys.typescale.title-small | Typography | composite font names: md.sys.typescale.title-small.font → md.ref.typeface.plainfont weight: md.sys.typescale.title-small.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.title-small.sizeline height: md.sys.typescale.title-small.line-heightfont tracking: md.sys.typescale.title-small.tracking | Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt |
| Title styles › Title Small | md.sys.typescale.title-small.font | Font names | md.ref.typeface.plain | Roboto |
| Title styles › Title Small | md.sys.typescale.title-small.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Title styles › Title Small | md.sys.typescale.title-small.size | Font size | — | 14pt |
| Title styles › Title Small | md.sys.typescale.title-small.tracking | Font tracking | — | 0.1pt |
| Title styles › Title Small | md.sys.typescale.title-small.line-height | Line height | — | 20pt |
| Title styles › Title Small | md.sys.typescale.title-small.wght | Axis value | — | wght 500 |
| Title styles › Title Small | md.sys.typescale.title-small.grad | Axis value | — | GRAD 0 |
| Title styles › Title Small | md.sys.typescale.title-small.wdth | Axis value | — | wdth 100 |
| Title styles › Title Small | md.sys.typescale.title-small.rond | Axis value | — | ROND 0 |
| Title styles › Title Small | md.sys.typescale.title-small.opsz | Axis value | — | opsz 14 |
| Title styles › Title Small | md.sys.typescale.title-small.crsv | Axis value | — | CRSV 0 |
| Title styles › Title Small | md.sys.typescale.title-small.slnt | Axis value | — | slnt 0 |
| Title styles › Title Small | md.sys.typescale.title-small.fill | Axis value | — | FILL 0 |
| Title styles › Title Small | md.sys.typescale.title-small.hexp | Axis value | — | HEXP 0 |
| Body styles › Body Large | md.sys.typescale.body-large | Typography | composite font names: md.sys.typescale.body-large.font → md.ref.typeface.plainfont weight: md.sys.typescale.body-large.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.body-large.sizeline height: md.sys.typescale.body-large.line-heightfont tracking: md.sys.typescale.body-large.tracking | Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt |
| Body styles › Body Large | md.sys.typescale.body-large.font | Font names | md.ref.typeface.plain | Roboto |
| Body styles › Body Large | md.sys.typescale.body-large.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Body styles › Body Large | md.sys.typescale.body-large.size | Font size | — | 16pt |
| Body styles › Body Large | md.sys.typescale.body-large.tracking | Font tracking | — | 0.5pt |
| Body styles › Body Large | md.sys.typescale.body-large.line-height | Line height | — | 24pt |
| Body styles › Body Large | md.sys.typescale.body-large.wght | Axis value | — | wght 400 |
| Body styles › Body Large | md.sys.typescale.body-large.grad | Axis value | — | GRAD 0 |
| Body styles › Body Large | md.sys.typescale.body-large.wdth | Axis value | — | wdth 100 |
| Body styles › Body Large | md.sys.typescale.body-large.rond | Axis value | — | ROND 0 |
| Body styles › Body Large | md.sys.typescale.body-large.opsz | Axis value | — | opsz 16 |
| Body styles › Body Large | md.sys.typescale.body-large.crsv | Axis value | — | CRSV 0 |
| Body styles › Body Large | md.sys.typescale.body-large.slnt | Axis value | — | slnt 0 |
| Body styles › Body Large | md.sys.typescale.body-large.fill | Axis value | — | FILL 0 |
| Body styles › Body Large | md.sys.typescale.body-large.hexp | Axis value | — | HEXP 0 |
| Body styles › Body Medium | md.sys.typescale.body-medium | Typography | composite font names: md.sys.typescale.body-medium.font → md.ref.typeface.plainfont weight: md.sys.typescale.body-medium.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.body-medium.sizeline height: md.sys.typescale.body-medium.line-heightfont tracking: md.sys.typescale.body-medium.tracking | Roboto · weight 400 · size 14pt · line height 20pt · tracking 0.25pt |
| Body styles › Body Medium | md.sys.typescale.body-medium.font | Font names | md.ref.typeface.plain | Roboto |
| Body styles › Body Medium | md.sys.typescale.body-medium.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Body styles › Body Medium | md.sys.typescale.body-medium.size | Font size | — | 14pt |
| Body styles › Body Medium | md.sys.typescale.body-medium.tracking | Font tracking | — | 0.25pt |
| Body styles › Body Medium | md.sys.typescale.body-medium.line-height | Line height | — | 20pt |
| Body styles › Body Medium | md.sys.typescale.body-medium.wght | Axis value | — | wght 400 |
| Body styles › Body Medium | md.sys.typescale.body-medium.grad | Axis value | — | GRAD 0 |
| Body styles › Body Medium | md.sys.typescale.body-medium.wdth | Axis value | — | wdth 100 |
| Body styles › Body Medium | md.sys.typescale.body-medium.rond | Axis value | — | ROND 0 |
| Body styles › Body Medium | md.sys.typescale.body-medium.opsz | Axis value | — | opsz 14 |
| Body styles › Body Medium | md.sys.typescale.body-medium.crsv | Axis value | — | CRSV 0 |
| Body styles › Body Medium | md.sys.typescale.body-medium.slnt | Axis value | — | slnt 0 |
| Body styles › Body Medium | md.sys.typescale.body-medium.fill | Axis value | — | FILL 0 |
| Body styles › Body Medium | md.sys.typescale.body-medium.hexp | Axis value | — | HEXP 0 |
| Body styles › Body Small | md.sys.typescale.body-small | Typography | composite font names: md.sys.typescale.body-small.font → md.ref.typeface.plainfont weight: md.sys.typescale.body-small.weight → md.ref.typeface.weight-regularfont size: md.sys.typescale.body-small.sizeline height: md.sys.typescale.body-small.line-heightfont tracking: md.sys.typescale.body-small.tracking | Roboto · weight 400 · size 12pt · line height 16pt · tracking 0.4pt |
| Body styles › Body Small | md.sys.typescale.body-small.font | Font names | md.ref.typeface.plain | Roboto |
| Body styles › Body Small | md.sys.typescale.body-small.weight | Font weight | md.ref.typeface.weight-regular | 400 |
| Body styles › Body Small | md.sys.typescale.body-small.size | Font size | — | 12pt |
| Body styles › Body Small | md.sys.typescale.body-small.tracking | Font tracking | — | 0.4pt |
| Body styles › Body Small | md.sys.typescale.body-small.line-height | Line height | — | 16pt |
| Body styles › Body Small | md.sys.typescale.body-small.wght | Axis value | — | wght 400 |
| Body styles › Body Small | md.sys.typescale.body-small.grad | Axis value | — | GRAD 0 |
| Body styles › Body Small | md.sys.typescale.body-small.wdth | Axis value | — | wdth 100 |
| Body styles › Body Small | md.sys.typescale.body-small.rond | Axis value | — | ROND 0 |
| Body styles › Body Small | md.sys.typescale.body-small.opsz | Axis value | — | opsz 12 |
| Body styles › Body Small | md.sys.typescale.body-small.crsv | Axis value | — | CRSV 0 |
| Body styles › Body Small | md.sys.typescale.body-small.slnt | Axis value | — | slnt 0 |
| Body styles › Body Small | md.sys.typescale.body-small.fill | Axis value | — | FILL 0 |
| Body styles › Body Small | md.sys.typescale.body-small.hexp | Axis value | — | HEXP 0 |
| Label styles › Label Large | md.sys.typescale.label-large | Typography | composite font names: md.sys.typescale.label-large.font → md.ref.typeface.plainfont weight: md.sys.typescale.label-large.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.label-large.sizeline height: md.sys.typescale.label-large.line-heightfont tracking: md.sys.typescale.label-large.tracking | Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt |
| Label styles › Label Large | md.sys.typescale.label-large.font | Font names | md.ref.typeface.plain | Roboto |
| Label styles › Label Large | md.sys.typescale.label-large.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Label styles › Label Large | md.sys.typescale.label-large.weight.prominent (deprecated) | Font weight | md.ref.typeface.weight-bold | 700 |
| Label styles › Label Large | md.sys.typescale.label-large.size | Font size | — | 14pt |
| Label styles › Label Large | md.sys.typescale.label-large.tracking | Font tracking | — | 0.1pt |
| Label styles › Label Large | md.sys.typescale.label-large.line-height | Line height | — | 20pt |
| Label styles › Label Large | md.sys.typescale.label-large.wght | Axis value | — | wght 500 |
| Label styles › Label Large | md.sys.typescale.label-large.grad | Axis value | — | GRAD 0 |
| Label styles › Label Large | md.sys.typescale.label-large.wdth | Axis value | — | wdth 100 |
| Label styles › Label Large | md.sys.typescale.label-large.rond | Axis value | — | ROND 0 |
| Label styles › Label Large | md.sys.typescale.label-large.opsz | Axis value | — | opsz 14 |
| Label styles › Label Large | md.sys.typescale.label-large.crsv | Axis value | — | CRSV 0 |
| Label styles › Label Large | md.sys.typescale.label-large.slnt | Axis value | — | slnt 0 |
| Label styles › Label Large | md.sys.typescale.label-large-fill | Axis value | — | FILL 0 |
| Label styles › Label Large | md.sys.typescale.label-large.hexp | Axis value | — | HEXP 0 |
| Label styles › Label Medium | md.sys.typescale.label-medium | Typography | composite font names: md.sys.typescale.label-medium.font → md.ref.typeface.plainfont weight: md.sys.typescale.label-medium.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.label-medium.sizeline height: md.sys.typescale.label-medium.line-heightfont tracking: md.sys.typescale.label-medium.tracking | Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt |
| Label styles › Label Medium | md.sys.typescale.label-medium.font | Font names | md.ref.typeface.plain | Roboto |
| Label styles › Label Medium | md.sys.typescale.label-medium.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Label styles › Label Medium | md.sys.typescale.label-medium.weight.prominent (deprecated) | Font weight | md.ref.typeface.weight-bold | 700 |
| Label styles › Label Medium | md.sys.typescale.label-medium.size | Font size | — | 12pt |
| Label styles › Label Medium | md.sys.typescale.label-medium.tracking | Font tracking | — | 0.5pt |
| Label styles › Label Medium | md.sys.typescale.label-medium.line-height | Line height | — | 16pt |
| Label styles › Label Medium | md.sys.typescale.label-medium.wght | Axis value | — | wght 500 |
| Label styles › Label Medium | md.sys.typescale.label-medium.grad | Axis value | — | GRAD 0 |
| Label styles › Label Medium | md.sys.typescale.label-medium.wdth | Axis value | — | wdth 100 |
| Label styles › Label Medium | md.sys.typescale.label-medium.rond | Axis value | — | ROND 0 |
| Label styles › Label Medium | md.sys.typescale.label-medium.opsz | Axis value | — | opsz 12 |
| Label styles › Label Medium | md.sys.typescale.label-medium.crsv | Axis value | — | CRSV 0 |
| Label styles › Label Medium | md.sys.typescale.label-medium.slnt | Axis value | — | slnt 0 |
| Label styles › Label Medium | md.sys.typescale.label-medium.fill | Axis value | — | FILL 0 |
| Label styles › Label Medium | md.sys.typescale.label-medium.hexp | Axis value | — | HEXP 0 |
| Label styles › Label Medium | md.sys.typescale.label-medium.text-transform (deprecated) | Text transform | — | text transform none |
| Label styles › Label Small | md.sys.typescale.label-small | Typography | composite font names: md.sys.typescale.label-small.font → md.ref.typeface.plainfont weight: md.sys.typescale.label-small.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.label-small.sizeline height: md.sys.typescale.label-small.line-heightfont tracking: md.sys.typescale.label-small.tracking | Roboto · weight 500 · size 11pt · line height 16pt · tracking 0.5pt |
| Label styles › Label Small | md.sys.typescale.label-small.font | Font names | md.ref.typeface.plain | Roboto |
| Label styles › Label Small | md.sys.typescale.label-small.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Label styles › Label Small | md.sys.typescale.label-small.size | Font size | — | 11pt |
| Label styles › Label Small | md.sys.typescale.label-small.tracking | Font tracking | — | 0.5pt |
| Label styles › Label Small | md.sys.typescale.label-small.line-height | Line height | — | 16pt |
| Label styles › Label Small | md.sys.typescale.label-small.wght | Axis value | — | wght 500 |
| Label styles › Label Small | md.sys.typescale.label-small.grad | Axis value | — | GRAD 0 |
| Label styles › Label Small | md.sys.typescale.label-small.wdth | Axis value | — | wdth 100 |
| Label styles › Label Small | md.sys.typescale.label-small.rond | Axis value | — | ROND 0 |
| Label styles › Label Small | md.sys.typescale.label-small.opsz | Axis value | — | opsz 11 |
| Label styles › Label Small | md.sys.typescale.label-small.crsv | Axis value | — | CRSV 0 |
| Label styles › Label Small | md.sys.typescale.label-small.slnt | Axis value | — | slnt 0 |
| Label styles › Label Small | md.sys.typescale.label-small.fill | Axis value | — | FILL 0 |
| Label styles › Label Small | md.sys.typescale.label-small.hexp | Axis value | — | HEXP 0 |
Emphasized type styles
The M3 type scale has 15 emphasized type styles. Use both baseline and emphasized type styles together to achieve expressive experiences. Material recommends using emphasized styles for selection, actions, headlines, and other editorial treatments.
Emphasized type style tokens
Design tokens
Token table
Machine-readable relationship table
Typography tokens · 1 token set · 225 tokens · live token table · DSDB TYPOGRAPHY.20543ce18892f7d9
- Default context: Platform: Android · Audience: 3P · Font: Static
- Not configurable here (group default used): Theme: Light · Motion scheme: Standard · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
- Reference chain: aliases from the token to its source value (
token → alias → … → value). "—" means the token holds a literal value.
Type scale - Emphasized · md.sys.typescale.emphasized · 225 tokens
Emphasized typography tokens combining font, weight, size, tracking, and line height in the emphasized type scale.
| Group | Token | Type | Reference chain | Resolved value |
|---|---|---|---|---|
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium | Typography | composite font names: md.sys.typescale.emphasized.display-medium.font → md.ref.typeface.brandfont weight: md.sys.typescale.emphasized.display-medium.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.display-medium.sizeline height: md.sys.typescale.emphasized.display-medium.line-heightfont tracking: md.sys.typescale.emphasized.display-medium.tracking | Roboto · weight 500 · size 45pt · line height 52pt · tracking 0pt |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.font | Font names | md.ref.typeface.brand | Roboto |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.line-height | Line height | — | 52pt |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.size | Font size | — | 45pt |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.tracking | Font tracking | — | 0pt |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.wght | Axis value | — | wght 500 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.grad | Axis value | — | GRAD 0 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.wdth | Axis value | — | wdth 100 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.rond | Axis value | — | ROND 0 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.opsz | Axis value | — | opsz 45 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.crsv | Axis value | — | CRSV 0 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.slnt | Axis value | — | slnt 0 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.fill | Axis value | — | FILL 0 |
| Emphasized Display styles › Emphasized Display Medium | md.sys.typescale.emphasized.display-medium.hexp | Axis value | — | HEXP 0 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.font | Font names | md.ref.typeface.brand | Roboto |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.line-height | Line height | — | 64pt |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.size | Font size | — | 57pt |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.tracking | Font tracking | — | -0.25pt |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.wght | Axis value | — | wght 500 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.grad | Axis value | — | GRAD 0 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.wdth | Axis value | — | wdth 100 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.rond | Axis value | — | ROND 0 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.opsz | Axis value | — | opsz 57 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.crsv | Axis value | — | CRSV 0 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.slnt | Axis value | — | slnt 0 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.fill | Axis value | — | FILL 0 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large.hexp | Axis value | — | HEXP 0 |
| Emphasized Display styles › Emphasized Display Large | md.sys.typescale.emphasized.display-large | Typography | composite font names: md.sys.typescale.emphasized.display-large.font → md.ref.typeface.brandfont weight: md.sys.typescale.emphasized.display-large.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.display-large.sizeline height: md.sys.typescale.emphasized.display-large.line-heightfont tracking: md.sys.typescale.emphasized.display-large.tracking | Roboto · weight 500 · size 57pt · line height 64pt · tracking -0.25pt |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.font | Font names | md.ref.typeface.brand | Roboto |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.line-height | Line height | — | 44pt |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.size | Font size | — | 36pt |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.tracking | Font tracking | — | 0pt |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.wght | Axis value | — | wght 500 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.grad | Axis value | — | GRAD 0 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.wdth | Axis value | — | wdth 100 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.rond | Axis value | — | ROND 0 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.opsz | Axis value | — | opsz 36 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.crsv | Axis value | — | CRSV 0 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.slnt | Axis value | — | slnt 0 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.fill | Axis value | — | FILL 0 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small.hexp | Axis value | — | HEXP 0 |
| Emphasized Display styles › Emphasized Display Small | md.sys.typescale.emphasized.display-small | Typography | composite font names: md.sys.typescale.emphasized.display-small.font → md.ref.typeface.brandfont weight: md.sys.typescale.emphasized.display-small.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.display-small.sizeline height: md.sys.typescale.emphasized.display-small.line-heightfont tracking: md.sys.typescale.emphasized.display-small.tracking | Roboto · weight 500 · size 36pt · line height 44pt · tracking 0pt |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.font | Font names | md.ref.typeface.brand | Roboto |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.line-height | Line height | — | 36pt |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.size | Font size | — | 28pt |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.tracking | Font tracking | — | 0pt |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.wght | Axis value | — | wght 500 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.grad | Axis value | — | GRAD 0 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.wdth | Axis value | — | wdth 100 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.rond | Axis value | — | ROND 0 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.opsz | Axis value | — | opsz 28 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.crsv | Axis value | — | CRSV 0 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.slnt | Axis value | — | slnt 0 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.fill | Axis value | — | FILL 0 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium.hexp | Axis value | — | HEXP 0 |
| Emphasized Headline styles › Emphasized Headline Medium | md.sys.typescale.emphasized.headline-medium | Typography | composite font names: md.sys.typescale.emphasized.headline-medium.font → md.ref.typeface.brandfont weight: md.sys.typescale.emphasized.headline-medium.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.headline-medium.sizeline height: md.sys.typescale.emphasized.headline-medium.line-heightfont tracking: md.sys.typescale.emphasized.headline-medium.tracking | Roboto · weight 500 · size 28pt · line height 36pt · tracking 0pt |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small | Typography | composite font names: md.sys.typescale.emphasized.headline-small.font → md.ref.typeface.brandfont weight: md.sys.typescale.emphasized.headline-small.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.headline-small.sizeline height: md.sys.typescale.emphasized.headline-small.line-heightfont tracking: md.sys.typescale.emphasized.headline-small.tracking | Roboto · weight 500 · size 24pt · line height 32pt · tracking 0pt |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.font | Font names | md.ref.typeface.brand | Roboto |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.line-height | Line height | — | 32pt |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.size | Font size | — | 24pt |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.tracking | Font tracking | — | 0pt |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.wght | Axis value | — | wght 500 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.grad | Axis value | — | GRAD 0 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.wdth | Axis value | — | wdth 100 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.rond | Axis value | — | ROND 0 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.opsz | Axis value | — | opsz 24 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.crsv | Axis value | — | CRSV 0 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.slnt | Axis value | — | slnt 0 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.fill | Axis value | — | FILL 0 |
| Emphasized Headline styles › Emphasized Headline Small | md.sys.typescale.emphasized.headline-small.hexp | Axis value | — | HEXP 0 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.font | Font names | md.ref.typeface.brand | Roboto |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.line-height | Line height | — | 40pt |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.size | Font size | — | 32pt |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.tracking | Font tracking | — | 0pt |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.wght | Axis value | — | wght 500 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.grad | Axis value | — | GRAD 0 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.wdth | Axis value | — | wdth 100 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.rond | Axis value | — | ROND 0 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.opsz | Axis value | — | opsz 32 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.crsv | Axis value | — | CRSV 0 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.slnt | Axis value | — | slnt 0 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.fill | Axis value | — | FILL 0 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large.hexp | Axis value | — | HEXP 0 |
| Emphasized Headline styles › Emphasized Headline Large | md.sys.typescale.emphasized.headline-large | Typography | composite font names: md.sys.typescale.emphasized.headline-large.font → md.ref.typeface.brandfont weight: md.sys.typescale.emphasized.headline-large.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.headline-large.sizeline height: md.sys.typescale.emphasized.headline-large.line-heightfont tracking: md.sys.typescale.emphasized.headline-large.tracking | Roboto · weight 500 · size 32pt · line height 40pt · tracking 0pt |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.line-height | Line height | — | 24pt |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.size | Font size | — | 16pt |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.weight | Font weight | md.ref.typeface.weight-bold | 700 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.tracking | Font tracking | — | 0.15pt |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.wght | Axis value | — | wght 600 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.grad | Axis value | — | GRAD 0 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.wdth | Axis value | — | wdth 100 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.rond | Axis value | — | ROND 0 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.opsz | Axis value | — | opsz 16 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.crsv | Axis value | — | CRSV 0 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.slnt | Axis value | — | slnt 0 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.fill | Axis value | — | FILL 0 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium.hexp | Axis value | — | HEXP 0 |
| Emphasized Title styles › Emphasized Title Medium | md.sys.typescale.emphasized.title-medium | Typography | composite font names: md.sys.typescale.emphasized.title-medium.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.title-medium.weight → md.ref.typeface.weight-boldfont size: md.sys.typescale.emphasized.title-medium.sizeline height: md.sys.typescale.emphasized.title-medium.line-heightfont tracking: md.sys.typescale.emphasized.title-medium.tracking | Roboto · weight 700 · size 16pt · line height 24pt · tracking 0.15pt |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.line-height | Line height | — | 20pt |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.size | Font size | — | 14pt |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.weight | Font weight | md.ref.typeface.weight-bold | 700 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.tracking | Font tracking | — | 0.1pt |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.wght | Axis value | — | wght 600 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.grad | Axis value | — | GRAD 0 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.wdth | Axis value | — | wdth 100 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.rond | Axis value | — | ROND 0 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.opsz | Axis value | — | opsz 14 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.crsv | Axis value | — | CRSV 0 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.slnt | Axis value | — | slnt 0 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.fill | Axis value | — | FILL 0 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small.hexp | Axis value | — | HEXP 0 |
| Emphasized Title styles › Emphasized Title Small | md.sys.typescale.emphasized.title-small | Typography | composite font names: md.sys.typescale.emphasized.title-small.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.title-small.weight → md.ref.typeface.weight-boldfont size: md.sys.typescale.emphasized.title-small.sizeline height: md.sys.typescale.emphasized.title-small.line-heightfont tracking: md.sys.typescale.emphasized.title-small.tracking | Roboto · weight 700 · size 14pt · line height 20pt · tracking 0.1pt |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.font | Font names | md.ref.typeface.brand | Roboto |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.line-height | Line height | — | 28pt |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.size | Font size | — | 22pt |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.tracking | Font tracking | — | 0pt |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.wght | Axis value | — | wght 500 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.grad | Axis value | — | GRAD 0 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.wdth | Axis value | — | wdth 100 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.rond | Axis value | — | ROND 0 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.opsz | Axis value | — | opsz 22 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.crsv | Axis value | — | CRSV 0 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.slnt | Axis value | — | slnt 0 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.fill | Axis value | — | FILL 0 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large.hexp | Axis value | — | HEXP 0 |
| Emphasized Title styles › Emphasized Title Large | md.sys.typescale.emphasized.title-large | Typography | composite font names: md.sys.typescale.emphasized.title-large.font → md.ref.typeface.brandfont weight: md.sys.typescale.emphasized.title-large.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.title-large.sizeline height: md.sys.typescale.emphasized.title-large.line-heightfont tracking: md.sys.typescale.emphasized.title-large.tracking | Roboto · weight 500 · size 22pt · line height 28pt · tracking 0pt |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.line-height | Line height | — | 20pt |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.size | Font size | — | 14pt |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.tracking | Font tracking | — | 0.25pt |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.wght | Axis value | — | wght 500 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.grad | Axis value | — | GRAD 0 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.wdth | Axis value | — | wdth 100 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.rond | Axis value | — | ROND 0 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.opsz | Axis value | — | opsz 14 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.crsv | Axis value | — | CRSV 0 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.slnt | Axis value | — | slnt 0 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.fill | Axis value | — | FILL 0 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium.hexp | Axis value | — | HEXP 0 |
| Emphasized Body styles › Emphasized Body Medium | md.sys.typescale.emphasized.body-medium | Typography | composite font names: md.sys.typescale.emphasized.body-medium.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.body-medium.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.body-medium.sizeline height: md.sys.typescale.emphasized.body-medium.line-heightfont tracking: md.sys.typescale.emphasized.body-medium.tracking | Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.25pt |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.line-height | Line height | — | 16pt |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.size | Font size | — | 12pt |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.tracking | Font tracking | — | 0.4pt |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.wght | Axis value | — | wght 500 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.grad | Axis value | — | GRAD 0 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.wdth | Axis value | — | wdth 100 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.rond | Axis value | — | ROND 0 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.opsz | Axis value | — | opsz 12 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.crsv | Axis value | — | CRSV 0 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.slnt | Axis value | — | slnt 0 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.fill | Axis value | — | FILL 0 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small.hexp | Axis value | — | HEXP 0 |
| Emphasized Body styles › Emphasized Body Small | md.sys.typescale.emphasized.body-small | Typography | composite font names: md.sys.typescale.emphasized.body-small.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.body-small.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.body-small.sizeline height: md.sys.typescale.emphasized.body-small.line-heightfont tracking: md.sys.typescale.emphasized.body-small.tracking | Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.4pt |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.line-height | Line height | — | 24pt |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.size | Font size | — | 16pt |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.weight | Font weight | md.ref.typeface.weight-medium | 500 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.tracking | Font tracking | — | 0.5pt |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.wght | Axis value | — | wght 500 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.grad | Axis value | — | GRAD 0 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.wdth | Axis value | — | wdth 100 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.rond | Axis value | — | ROND 0 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.opsz | Axis value | — | opsz 16 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.crsv | Axis value | — | CRSV 0 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.slnt | Axis value | — | slnt 0 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.fill | Axis value | — | FILL 0 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large.hexp | Axis value | — | HEXP 0 |
| Emphasized Body styles › Emphasized Body Large | md.sys.typescale.emphasized.body-large | Typography | composite font names: md.sys.typescale.emphasized.body-large.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.body-large.weight → md.ref.typeface.weight-mediumfont size: md.sys.typescale.emphasized.body-large.sizeline height: md.sys.typescale.emphasized.body-large.line-heightfont tracking: md.sys.typescale.emphasized.body-large.tracking | Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.5pt |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.line-height | Line height | — | 16pt |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.size | Font size | — | 12pt |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.weight | Font weight | md.ref.typeface.weight-bold | 700 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.tracking | Font tracking | — | 0.5pt |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.wght | Axis value | — | wght 600 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.grad | Axis value | — | GRAD 0 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.wdth | Axis value | — | wdth 100 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.rond | Axis value | — | ROND 0 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.opsz | Axis value | — | opsz 12 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.crsv | Axis value | — | CRSV 0 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.slnt | Axis value | — | slnt 0 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.fill | Axis value | — | FILL 0 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium.hexp | Axis value | — | HEXP 0 |
| Emphasized Label styles › Emphasized Label Medium | md.sys.typescale.emphasized.label-medium | Typography | composite font names: md.sys.typescale.emphasized.label-medium.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.label-medium.weight → md.ref.typeface.weight-boldfont size: md.sys.typescale.emphasized.label-medium.sizeline height: md.sys.typescale.emphasized.label-medium.line-heightfont tracking: md.sys.typescale.emphasized.label-medium.tracking | Roboto · weight 700 · size 12pt · line height 16pt · tracking 0.5pt |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.line-height | Line height | — | 16pt |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.size | Font size | — | 11pt |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.weight | Font weight | md.ref.typeface.weight-bold | 700 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.tracking | Font tracking | — | 0.5pt |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.wght | Axis value | — | wght 600 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.grad | Axis value | — | GRAD 0 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.wdth | Axis value | — | wdth 100 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.rond | Axis value | — | ROND 0 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.opsz | Axis value | — | opsz 11 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.crsv | Axis value | — | CRSV 0 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.slnt | Axis value | — | slnt 0 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.fill | Axis value | — | FILL 0 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small.hexp | Axis value | — | HEXP 0 |
| Emphasized Label styles › Emphasized Label Small | md.sys.typescale.emphasized.label-small | Typography | composite font names: md.sys.typescale.emphasized.label-small.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.label-small.weight → md.ref.typeface.weight-boldfont size: md.sys.typescale.emphasized.label-small.sizeline height: md.sys.typescale.emphasized.label-small.line-heightfont tracking: md.sys.typescale.emphasized.label-small.tracking | Roboto · weight 700 · size 11pt · line height 16pt · tracking 0.5pt |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.font | Font names | md.ref.typeface.plain | Roboto |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.line-height | Line height | — | 20pt |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.size | Font size | — | 14pt |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.weight | Font weight | md.ref.typeface.weight-bold | 700 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.tracking | Font tracking | — | 0.1pt |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.wght | Axis value | — | wght 600 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.grad | Axis value | — | GRAD 0 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.wdth | Axis value | — | wdth 100 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.rond | Axis value | — | ROND 0 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.opsz | Axis value | — | opsz 14 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.crsv | Axis value | — | CRSV 0 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.slnt | Axis value | — | slnt 0 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.fill | Axis value | — | FILL 0 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large.hexp | Axis value | — | HEXP 0 |
| Emphasized Label styles › Emphasized Label Large | md.sys.typescale.emphasized.label-large | Typography | composite font names: md.sys.typescale.emphasized.label-large.font → md.ref.typeface.plainfont weight: md.sys.typescale.emphasized.label-large.weight → md.ref.typeface.weight-boldfont size: md.sys.typescale.emphasized.label-large.sizeline height: md.sys.typescale.emphasized.label-large.line-heightfont tracking: md.sys.typescale.emphasized.label-large.tracking | Roboto · weight 700 · size 14pt · line height 20pt · tracking 0.1pt |
Where emphasized styles can be used
Components
When used in components, emphasized type styles can communicate hierarchy or importance, such as an active or selected component, or an unread message. The emphasized styles work well with:
- Badges
- Buttons (for primary actions)
- Extended FAB
- Selected list items
- Selected menu items
Material components don’t use emphasized type styles by default. To use an emphasized type style, swap the baseline token for the emphasized token of the same style. For example:
- Baseline:
md.sys.typescale.display-large - Emphasized:
md.sys.typescale.emphasized.display-large
Weight
Use the emphasized styles on text that already uses weight (such as medium, bold) to communicate hierarchy.
Context
Use emphasized styles to draw attention to specifics aspects of components, such as selected states, unread messages, or key interactions.
Emphasized context and weight can be used at the same time.
- Weight: Apply emphasized styles to text already bolded for an expressive style
- Context: Apply emphasized styles to text in selective places to better communicate hierarchy or state
Customize the typeface
The M3 type scale has the option to set different typefaces at different sizes.
- The brand typeface is used for larger type styles, like Headline and Display, to focus on expression.
- The plain typeface is used for smaller type styles, like Body and Label, to focus on readability.
- Roboto is the default for both typefaces.
Consider replacing Roboto with different typefaces to boost brand expression in your product. On emphasized styles, this can help important text stand out even more.
Roboto can be replaced with another font, like Roboto Flex
Brand and plain typeface tokens
Design tokens
Token table
Machine-readable relationship table
Typography tokens · 1 token set · 28 tokens · live token table · DSDB TYPOGRAPHY.20543ce18892f7d9
- Default context: Platform: Android · Audience: 3P · Font: Static
- Not configurable here (group default used): Theme: Light · Motion scheme: Standard · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
- Reference chain: aliases from the token to its source value (
token → alias → … → value). "—" means the token holds a literal value.
Fonts & weights · md.ref.typeface · 28 tokens
Font and weight tokens
| Group | Token | Type | Reference chain | Resolved value |
|---|---|---|---|---|
| Brand | md.ref.typeface.brand | Font names | — | Roboto |
| Plain | md.ref.typeface.plain | Font names | — | Roboto |
| Variable | md.ref.typeface.variable.brand | Font names | — | Roboto Flex |
| Variable | md.ref.typeface.variable.plain | Font names | — | Roboto Flex |
| Weight | md.ref.typeface.weight-regular | Font weight | — | 400 |
| Weight | md.ref.typeface.weight-medium | Font weight | — | 500 |
| Weight | md.ref.typeface.weight-semibold | Font weight | — | 600 |
| Weight | md.ref.typeface.weight-bold | Font weight | — | 700 |
| Variable wght | md.ref.typeface.variable.wght-medium | Axis value | — | wght 500 |
| Variable wght | md.ref.typeface.variable.wght-semibold | Axis value | — | wght 600 |
| Variable wght | md.ref.typeface.variable.wght-bold | Axis value | — | wght 700 |
| Variable wght | md.ref.typeface.variable.wght-regular | Axis value | — | wght 400 |
| Roundness | md.ref.typeface.emphasized.rond | Axis value | — | ROND 0 |
| Line height | md.ref.typeface.display-medium.line-height | Line height | — | 52pt |
| Line height | md.ref.typeface.display-small.line-height | Line height | — | 44pt |
| Line height | md.ref.typeface.headline-large.line-height | Line height | — | 40pt |
| Line height | md.ref.typeface.headline-medium.line-height | Line height | — | 36pt |
| Line height | md.ref.typeface.headline-small.line-height | Line height | — | 32pt |
| Line height | md.ref.typeface.title-large.line-height | Line height | — | 28pt |
| Line height | md.ref.typeface.title-medium.line-height | Line height | — | 24pt |
| Line height | md.ref.typeface.title-small.line-height | Line height | — | 20pt |
| Line height | md.ref.typeface.label-large.line-height | Line height | — | 20pt |
| Line height | md.ref.typeface.label-medium.line-height | Line height | — | 16pt |
| Line height | md.ref.typeface.label-small.line-height | Line height | — | 16pt |
| Line height | md.ref.typeface.body-large.line-height | Line height | — | 24pt |
| Line height | md.ref.typeface.body-medium.line-height | Line height | — | 20pt |
| Line height | md.ref.typeface.body-small.line-height | Line height | — | 16pt |
| Line height | md.ref.typeface.display-large.line-height | Line height | — | 64pt |
Language height support
The type scale can adapt line height automatically based on language height category: small, medium, large, and extra large.
Development considerations:
- It’s recommended to default to medium language height, as most languages fall in that category, and switch to other sizes based on detected language.
- Material components that use vertical padding should adapt to language height automatically. Components with fixed heights are built for small values and may not adapt by default.
- Ignoring language height can lead to overlapping text and broken UI elements, leading to major internationalization issues and failing readability standards.
Line heights for styles like display large can automatically adapt to language height category
Language script categories
- Small (base): Cyrillic, Greek, Hebrew, Latin-based languages (except Vietnamese)
- Medium (~7% taller): Amharic, Arabic, Armenian, Bangla, Chinese, Gujarati, Hindi, Japanese, Kannada, Khmer, Korean, Lao, Malayalam, Odia, Punjabi, Sinhala, Tamil, Thai, Vietnamese, most other languages.
- Large (~30% taller): Burmese, Telugu
- Extra large (~100% taller): Nastaliq
Language height tokens
To view the language height tokens:
- Open the line height folder (Note: Other tokens like fonts and weights are in the same token set)
- Change the language height context at the top of the token module
Design tokens
Token table
Machine-readable relationship table
Typography tokens · 1 token set · 28 tokens · live token table · DSDB TYPOGRAPHY.20543ce18892f7d9
- Default context: Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS weight setting: Default · Language height: Small
- Not configurable here (group default used): Theme: Light · Motion scheme: Standard · iOS dark theme elevation: None
- Other contexts: Language height: Medium, Large, Extra large. "Other contexts" lists values that differ from the default when only that one context changes.
- Reference chain: aliases from the token to its source value (
token → alias → … → value). "—" means the token holds a literal value.
Fonts & weights · md.ref.typeface · 28 tokens
Font and weight tokens
| Group | Token | Type | Reference chain | Resolved value | Other contexts |
|---|---|---|---|---|---|
| Brand | md.ref.typeface.brand | Font names | — | Roboto | — |
| Plain | md.ref.typeface.plain | Font names | — | Roboto | — |
| Variable | md.ref.typeface.variable.brand | Font names | — | Roboto Flex | — |
| Variable | md.ref.typeface.variable.plain | Font names | — | Roboto Flex | — |
| Weight | md.ref.typeface.weight-regular | Font weight | — | 400 | — |
| Weight | md.ref.typeface.weight-medium | Font weight | — | 500 | — |
| Weight | md.ref.typeface.weight-semibold | Font weight | — | 600 | — |
| Weight | md.ref.typeface.weight-bold | Font weight | — | 700 | — |
| Variable wght | md.ref.typeface.variable.wght-medium | Axis value | — | wght 500 | — |
| Variable wght | md.ref.typeface.variable.wght-semibold | Axis value | — | wght 600 | — |
| Variable wght | md.ref.typeface.variable.wght-bold | Axis value | — | wght 700 | — |
| Variable wght | md.ref.typeface.variable.wght-regular | Axis value | — | wght 400 | — |
| Roundness | md.ref.typeface.emphasized.rond | Axis value | — | ROND 0 | — |
| Line height | md.ref.typeface.display-medium.line-height | Line height | — | 52pt | Medium: 56ptLarge: 71ptExtra large: 99pt |
| Line height | md.ref.typeface.display-small.line-height | Line height | — | 44pt | Medium: 47ptLarge: 57ptExtra large: 80pt |
| Line height | md.ref.typeface.headline-large.line-height | Line height | — | 40pt | Medium: 42ptLarge: 50ptExtra large: 75pt |
| Line height | md.ref.typeface.headline-medium.line-height | Line height | — | 36pt | Medium: 38ptLarge: 45ptExtra large: 66pt |
| Line height | md.ref.typeface.headline-small.line-height | Line height | — | 32pt | Medium: 35ptLarge: 41ptExtra large: 59pt |
| Line height | md.ref.typeface.title-large.line-height | Line height | — | 28pt | Medium: 31ptLarge: 36ptExtra large: 53pt |
| Line height | md.ref.typeface.title-medium.line-height | Line height | — | 24pt | Medium: 27ptLarge: 31ptExtra large: 42pt |
| Line height | md.ref.typeface.title-small.line-height | Line height | — | 20pt | Medium: 23ptLarge: 26ptExtra large: 36pt |
| Line height | md.ref.typeface.label-large.line-height | Line height | — | 20pt | Medium: 23ptLarge: 26ptExtra large: 36pt |
| Line height | md.ref.typeface.label-medium.line-height | Line height | — | 16pt | Medium: 18ptLarge: 21ptExtra large: 30pt |
| Line height | md.ref.typeface.label-small.line-height | Line height | — | 16pt | Medium: 18ptLarge: 21ptExtra large: 29pt |
| Line height | md.ref.typeface.body-large.line-height | Line height | — | 24pt | Medium: 27ptLarge: 31ptExtra large: 41pt |
| Line height | md.ref.typeface.body-medium.line-height | Line height | — | 20pt | Medium: 23ptLarge: 26ptExtra large: 35pt |
| Line height | md.ref.typeface.body-small.line-height | Line height | — | 16pt | Medium: 18ptLarge: 21ptExtra large: 30pt |
| Line height | md.ref.typeface.display-large.line-height | Line height | — | 64pt | Medium: 73ptLarge: 89ptExtra large: 120pt |
Customizing type styles
To customize existing type styles, follow these steps:
- If using a different typeface, change the brand and plain typeface tokens.
- Adjust properties like line height and letter spacing to refine the appearance. Avoid changing the type size; this can affect how components render and reflow.
- Repeat for both baseline and emphasized type styles. Try to keep emphasized styles visually consistent, like all wider than baseline.
Heavier fonts may require wider letter spacing, while fonts with long ascenders and descenders will require different line heights. Axes can be further adjusted as necessary.
Note: Customizing the M3 type scale or individual styles may prevent you from receiving typography token updates from Material.
Adjust variable axes, like weight and width, to customize fonts like Roboto Flex
Different typefaces can be used for baseline and emphasized type styles.
Custom typefaces can be used together, like Baskervville and Jacquard
Customizing your type scale
When different sizes from the defaults are needed, such as for different devices, you can customize the type scale by adding or removing styles, and even swapping out Roboto for a font of your choice.
Material Design uses the Major Second type scale with 14 as its key base size. This anchors to the most essential style used most often for typesetting body text.
The Material Design type scale uses the Major Second scale (1.125)
Sizes on the rendered type scale should aim to provide impactful contrast between sizes by avoiding small differences.
Material’s default typescale of 15 styles allows distinction between each
Your product likely will not need all 15 default styles from the Material Design type scale. In this example, five sizes are chosen for a reduced set while the rest are removed.
If the default sizes from the Material Design type scale do not meet your needs, values can be changed instead. Here the default size of display medium is adjusted to another size from the Major Second type scale.
Font size units
The following units are used to express font size on Android and the web.
| Platform | Android | Web |
|---|---|---|
| Font size unit | sp | rem |
| Conversion ratio | 1.0 | 0.0625 |
Web browsers calculate the REM (the root em size) based on the root element size. The default for modern web browsers is 16px, so the conversion is SP_SIZE/16 = rem.
Example conversions
| Android | Web |
|---|---|
| 10sp | 0.625rem |
| 12sp | 0.75rem |
| 24sp | 1.5rem |
| 60sp | 3.75rem |
Letter spacing units
The following units are for spacing letters in a UI.
| Platform | Android | Web |
|---|---|---|
| Letter spacing unit | em | rem |
| Conversion ratio | (Tracking value in px / font size in sp) = letter spacing | (Tracking value in px / font size in sp) = letter spacing |
Letter spacing examples
| Android | Web |
|---|---|
| (.2 tracking / 16sp font size) = 0.0125 em | (.2 tracking / 16px font size) = 0.0125 rem |