Style

Material Design 3 type scale tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Display styles
Display Large
Display Large tokens
TokenValue
Display Largemd.sys.typescale.variable.display-large
Roboto Flex · 57pt · weight 400 · line height 64pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Display Large font namemd.sys.typescale.variable.display-large.font
Roboto Flex
Display Large font sizemd.sys.typescale.variable.display-large.size
57pt
Display Large font trackingmd.sys.typescale.variable.display-large.tracking
0pt
Display Large line heightmd.sys.typescale.variable.display-large.line-height
64pt
Display Large weightmd.sys.typescale.variable.display-large.weight
400
Display Large wghtmd.sys.typescale.variable.display-large.wght
AxisValue: Tag: wght · Value: 400
Display Large gradmd.sys.typescale.variable.display-large.grad
AxisValue: Tag: GRAD
Display Large wdthmd.sys.typescale.variable.display-large.wdth
AxisValue: Tag: wdth · Value: 100
Display Large rondmd.sys.typescale.variable.display-large.rond
AxisValue: Tag: ROND
Display Large opszmd.sys.typescale.variable.display-large.opsz
—
Display Large crsvmd.sys.typescale.variable.display-large.crsv
AxisValue: Tag: CRSV
Display Large slntmd.sys.typescale.variable.display-large.slnt
AxisValue: Tag: slnt
Display Medium
Display Medium tokens
TokenValue
Display Mediummd.sys.typescale.variable.display-medium
Roboto Flex · 45pt · weight 400 · line height 52pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Display Medium font namemd.sys.typescale.variable.display-medium.font
Roboto Flex
Display Medium font sizemd.sys.typescale.variable.display-medium.size
45pt
Display Medium font trackingmd.sys.typescale.variable.display-medium.tracking
0pt
Display Medium line heightmd.sys.typescale.variable.display-medium.line-height
52pt
Display Medium weightmd.sys.typescale.variable.display-medium.weight
400
Display Medium wghtmd.sys.typescale.variable.display-medium.wght
AxisValue: Tag: wght · Value: 400
Display Medium gradmd.sys.typescale.variable.display-medium.grad
AxisValue: Tag: GRAD
Display Medium wdthmd.sys.typescale.variable.display-medium.wdth
AxisValue: Tag: wdth · Value: 100
Display Medium rondmd.sys.typescale.variable.display-medium.rond
AxisValue: Tag: ROND
Display Medium opszmd.sys.typescale.variable.display-medium.opsz
—
Display Medium crsvmd.sys.typescale.variable.display-medium.crsv
AxisValue: Tag: CRSV
Display Medium slntmd.sys.typescale.variable.display-medium.slnt
AxisValue: Tag: slnt
Display Small
Display Small tokens
TokenValue
Display Smallmd.sys.typescale.variable.display-small
Roboto Flex · 36pt · weight 400 · line height 44pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Display Small font namemd.sys.typescale.variable.display-small.font
Roboto Flex
Display Small font sizemd.sys.typescale.variable.display-small.size
36pt
Display Small font trackingmd.sys.typescale.variable.display-small.tracking
0pt
Display Small line heightmd.sys.typescale.variable.display-small.line-height
44pt
Display Small weightmd.sys.typescale.variable.display-small.weight
400
Display Small wghtmd.sys.typescale.variable.display-small.wght
AxisValue: Tag: wght · Value: 400
Display Small gradmd.sys.typescale.variable.display-small.grad
AxisValue: Tag: GRAD
Display Small wdthmd.sys.typescale.variable.display-small.wdth
AxisValue: Tag: wdth · Value: 100
Display Small rondmd.sys.typescale.variable.display-small.rond
AxisValue: Tag: ROND
Display Small opszmd.sys.typescale.variable.display-small.opsz
—
Display Small crsvmd.sys.typescale.variable.display-small.crsv
AxisValue: Tag: CRSV
Display Small slntmd.sys.typescale.variable.display-small.slnt
AxisValue: Tag: slnt
Headline styles
Headline Large
Headline Large tokens
TokenValue
Headline Largemd.sys.typescale.variable.headline-large
Roboto Flex · 32pt · weight 400 · line height 40pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Headline Large font namemd.sys.typescale.variable.headline-large.font
Roboto Flex
Headline Large font sizemd.sys.typescale.variable.headline-large.size
32pt
Headline Large font trackingmd.sys.typescale.variable.headline-large.tracking
0pt
Headline Large line heightmd.sys.typescale.variable.headline-large.line-height
40pt
Headline Large weightmd.sys.typescale.variable.headline-large.weight
400
Headline Large wghtmd.sys.typescale.variable.headline-large.wght
AxisValue: Tag: wght · Value: 400
Headline Large gradmd.sys.typescale.variable.headline-large.grad
AxisValue: Tag: GRAD
Headline Large wdthmd.sys.typescale.variable.headline-large.wdth
AxisValue: Tag: wdth · Value: 100
Headline Large rondmd.sys.typescale.variable.headline-large.rond
AxisValue: Tag: ROND
Headline Large opszmd.sys.typescale.variable.headline-large.opsz
—
Headline Large crsvmd.sys.typescale.variable.headline-large.crsv
AxisValue: Tag: CRSV
Headline Large slntmd.sys.typescale.variable.headline-large.slnt
AxisValue: Tag: slnt
Headline Medium
Headline Medium tokens
TokenValue
Headline Mediummd.sys.typescale.variable.headline-medium
Roboto Flex · 28pt · weight 400 · line height 36pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Headline Medium font namemd.sys.typescale.variable.headline-medium.font
Roboto Flex
Headline Medium font sizemd.sys.typescale.variable.headline-medium.size
28pt
Headline Medium font trackingmd.sys.typescale.variable.headline-medium.tracking
0pt
Headline Medium line heightmd.sys.typescale.variable.headline-medium.line-height
36pt
Headline Medium weightmd.sys.typescale.variable.headline-medium.weight
400
Headline Medium wghtmd.sys.typescale.variable.headline-medium.wght
AxisValue: Tag: wght · Value: 400
Headline Medium gradmd.sys.typescale.variable.headline-medium.grad
AxisValue: Tag: GRAD
Headline Medium wdthmd.sys.typescale.variable.headline-medium.wdth
AxisValue: Tag: wdth · Value: 100
Headline Medium rondmd.sys.typescale.variable.headline-medium.rond
AxisValue: Tag: ROND
Headline Medium opszmd.sys.typescale.variable.headline-medium.opsz
—
Headline Medium crsvmd.sys.typescale.variable.headline-medium.crsv
AxisValue: Tag: CRSV
Headline Medium slntmd.sys.typescale.variable.headline-medium.slnt
AxisValue: Tag: slnt
Headline Small
Headline Small tokens
TokenValue
Headline Smallmd.sys.typescale.variable.headline-small
Roboto Flex · 24pt · weight 400 · line height 32pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Headline Small font namemd.sys.typescale.variable.headline-small.font
Roboto Flex
Headline Small font sizemd.sys.typescale.variable.headline-small.size
24pt
Headline Small font trackingmd.sys.typescale.variable.headline-small.tracking
0pt
Headline Small line heightmd.sys.typescale.variable.headline-small.line-height
32pt
Headline Small weightmd.sys.typescale.variable.headline-small.weight
400
Headline Small wghtmd.sys.typescale.variable.headline-small.wght
AxisValue: Tag: wght · Value: 400
Headline Small gradmd.sys.typescale.variable.headline-small.grad
AxisValue: Tag: GRAD
Headline Small wdthmd.sys.typescale.variable.headline-small.wdth
AxisValue: Tag: wdth · Value: 100
Headline Small rondmd.sys.typescale.variable.headline-small.rond
AxisValue: Tag: ROND
Headline Small opszmd.sys.typescale.variable.headline-small.opsz
—
Headline Small crsvmd.sys.typescale.variable.headline-small.crsv
AxisValue: Tag: CRSV
Headline Small slntmd.sys.typescale.variable.headline-small.slnt
AxisValue: Tag: slnt
Title styles
Title Large
Title Large tokens
TokenValue
Title Largemd.sys.typescale.variable.title-large
Roboto Flex · 22pt · weight 400 · line height 28pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Title Large font namemd.sys.typescale.variable.title-large.font
Roboto Flex
Title Large font sizemd.sys.typescale.variable.title-large.size
22pt
Title Large font trackingmd.sys.typescale.variable.title-large.tracking
0pt
Title Large line heightmd.sys.typescale.variable.title-large.line-height
28pt
Title Large weightmd.sys.typescale.variable.title-large.weight
400
Title Large wghtmd.sys.typescale.variable.title-large.wght
AxisValue: Tag: wght · Value: 400
Title Large gradmd.sys.typescale.variable.title-large.grad
AxisValue: Tag: GRAD
Title Large wdthmd.sys.typescale.variable.title-large.wdth
AxisValue: Tag: wdth · Value: 100
Title Large rondmd.sys.typescale.variable.title-large.rond
AxisValue: Tag: ROND
Title Large opszmd.sys.typescale.variable.title-large.opsz
—
Title Large crsvmd.sys.typescale.variable.title-large.crsv
AxisValue: Tag: CRSV
Title Large slntmd.sys.typescale.variable.title-large.slnt
AxisValue: Tag: slnt
Title Medium
Title Medium tokens
TokenValue
Title Mediummd.sys.typescale.variable.title-medium
Roboto Flex · 16pt · weight 500 · line height 24pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 500
Title Medium font namemd.sys.typescale.variable.title-medium.font
Roboto Flex
Title Medium font sizemd.sys.typescale.variable.title-medium.size
16pt
Title Medium font trackingmd.sys.typescale.variable.title-medium.tracking
0pt
Title Medium line heightmd.sys.typescale.variable.title-medium.line-height
24pt
Title Medium weightmd.sys.typescale.variable.title-medium.weight
500
Title Medium wghtmd.sys.typescale.variable.title-medium.wght
AxisValue: Tag: wght · Value: 500
Title Medium gradmd.sys.typescale.variable.title-medium.grad
AxisValue: Tag: GRAD
Title Medium wdthmd.sys.typescale.variable.title-medium.wdth
AxisValue: Tag: wdth · Value: 100
Title Medium rondmd.sys.typescale.variable.title-medium.rond
AxisValue: Tag: ROND
Title Medium opszmd.sys.typescale.variable.title-medium.opsz
—
Title Medium crsvmd.sys.typescale.variable.title-medium.crsv
AxisValue: Tag: CRSV
Title Medium slntmd.sys.typescale.variable.title-medium.slnt
AxisValue: Tag: slnt
Title Small
Title Small tokens
TokenValue
Title Smallmd.sys.typescale.variable.title-small
Roboto Flex · 14pt · weight 500 · line height 20pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 500
Title Small font namemd.sys.typescale.variable.title-small.font
Roboto Flex
Title Small font sizemd.sys.typescale.variable.title-small.size
14pt
Title Small font trackingmd.sys.typescale.variable.title-small.tracking
0pt
Title Small line heightmd.sys.typescale.variable.title-small.line-height
20pt
Title Small weightmd.sys.typescale.variable.title-small.weight
500
Title Small wghtmd.sys.typescale.variable.title-small.wght
AxisValue: Tag: wght · Value: 500
Title Small gradmd.sys.typescale.variable.title-small.grad
AxisValue: Tag: GRAD
Title Small wdthmd.sys.typescale.variable.title-small.wdth
AxisValue: Tag: wdth · Value: 100
Title Small rondmd.sys.typescale.variable.title-small.rond
AxisValue: Tag: ROND
Title Small opszmd.sys.typescale.variable.title-small.opsz
—
Title Small crsvmd.sys.typescale.variable.title-small.crsv
AxisValue: Tag: CRSV
Title Small slntmd.sys.typescale.variable.title-small.slnt
AxisValue: Tag: slnt
Body styles
Body Large
Body Large tokens
TokenValue
Body Largemd.sys.typescale.variable.body-large
Roboto Flex · 16pt · weight 400 · line height 24pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Body Large font namemd.sys.typescale.variable.body-large.font
Roboto Flex
Body Large font sizemd.sys.typescale.variable.body-large.size
16pt
Body Large font trackingmd.sys.typescale.variable.body-large.tracking
0pt
Body Large line heightmd.sys.typescale.variable.body-large.line-height
24pt
Body Large weightmd.sys.typescale.variable.body-large.weight
400
Body Large wghtmd.sys.typescale.variable.body-large.wght
AxisValue: Tag: wght · Value: 400
Body Large gradmd.sys.typescale.variable.body-large.grad
AxisValue: Tag: GRAD
Body Large wdthmd.sys.typescale.variable.body-large.wdth
AxisValue: Tag: wdth · Value: 100
Body Large rondmd.sys.typescale.variable.body-large.rond
AxisValue: Tag: ROND
Body Large opszmd.sys.typescale.variable.body-large.opsz
—
Body Large crsvmd.sys.typescale.variable.body-large.crsv
AxisValue: Tag: CRSV
Body Large slntmd.sys.typescale.variable.body-large.slnt
AxisValue: Tag: slnt
Body Medium
Body Medium tokens
TokenValue
Body Mediummd.sys.typescale.variable.body-medium
Roboto Flex · 14pt · weight 400 · line height 20pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Body Medium font namemd.sys.typescale.variable.body-medium.font
Roboto Flex
Body Medium font sizemd.sys.typescale.variable.body-medium.size
14pt
Body Medium font trackingmd.sys.typescale.variable.body-medium.tracking
0pt
Body Medium line heightmd.sys.typescale.variable.body-medium.line-height
20pt
Body Medium weightmd.sys.typescale.variable.body-medium.weight
400
Body Medium wghtmd.sys.typescale.variable.body-medium.wght
AxisValue: Tag: wght · Value: 400
Body Medium gradmd.sys.typescale.variable.body-medium.grad
AxisValue: Tag: GRAD
Body Medium wdthmd.sys.typescale.variable.body-medium.wdth
AxisValue: Tag: wdth · Value: 100
Body Medium rondmd.sys.typescale.variable.body-medium.rond
AxisValue: Tag: ROND
Body Medium opszmd.sys.typescale.variable.body-medium.opsz
—
Body Medium crsvmd.sys.typescale.variable.body-medium.crsv
AxisValue: Tag: CRSV
Body Medium slntmd.sys.typescale.variable.body-medium.slnt
AxisValue: Tag: slnt
Body Small
Body Small tokens
TokenValue
Body Smallmd.sys.typescale.variable.body-small
Roboto Flex · 12pt · weight 400 · line height 16pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 400
Body Small font namemd.sys.typescale.variable.body-small.font
Roboto Flex
Body Small font sizemd.sys.typescale.variable.body-small.size
12pt
Body Small font trackingmd.sys.typescale.variable.body-small.tracking
0pt
Body Small line heightmd.sys.typescale.variable.body-small.line-height
16pt
Body Small weightmd.sys.typescale.variable.body-small.weight
400
Body Small wghtmd.sys.typescale.variable.body-small.wght
AxisValue: Tag: wght · Value: 400
Body Small gradmd.sys.typescale.variable.body-small.grad
AxisValue: Tag: GRAD
Body Small wdthmd.sys.typescale.variable.body-small.wdth
AxisValue: Tag: wdth · Value: 100
Body Small rondmd.sys.typescale.variable.body-small.rond
AxisValue: Tag: ROND
Body Small opszmd.sys.typescale.variable.body-small.opsz
—
Body Small crsvmd.sys.typescale.variable.body-small.crsv
AxisValue: Tag: CRSV
Body Small slntmd.sys.typescale.variable.body-small.slnt
AxisValue: Tag: slnt
Label styles
Label Large
Label Large tokens
TokenValue
Label Largemd.sys.typescale.variable.label-large
Roboto Flex · 14pt · weight 500 · line height 20pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 500
Label Large font namemd.sys.typescale.variable.label-large.font
Roboto Flex
Label Large font sizemd.sys.typescale.variable.label-large.size
14pt
Label Large font trackingmd.sys.typescale.variable.label-large.tracking
0pt
Label Large line heightmd.sys.typescale.variable.label-large.line-height
20pt
Label Large weightmd.sys.typescale.variable.label-large.weight
500
Label Large wghtmd.sys.typescale.variable.label-large.wght
AxisValue: Tag: wght · Value: 500
Label Large gradmd.sys.typescale.variable.label-large.grad
AxisValue: Tag: GRAD
Label Large wdthmd.sys.typescale.variable.label-large.wdth
AxisValue: Tag: wdth · Value: 100
Label Large rondmd.sys.typescale.variable.label-large.rond
AxisValue: Tag: ROND
Label Large opszmd.sys.typescale.variable.label-large.opsz
—
Label Large crsvmd.sys.typescale.variable.label-large.crsv
AxisValue: Tag: CRSV
Label Large slntmd.sys.typescale.variable.label-large.slnt
AxisValue: Tag: slnt
Label Medium
Label Medium tokens
TokenValue
Label Mediummd.sys.typescale.variable.label-medium
Roboto Flex · 12pt · weight 500 · line height 16pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 500
Label Medium font namemd.sys.typescale.variable.label-medium.font
Roboto Flex
Label Medium font sizemd.sys.typescale.variable.label-medium.size
12pt
Label Medium font trackingmd.sys.typescale.variable.label-medium.tracking
0pt
Label Medium line heightmd.sys.typescale.variable.label-medium.line-height
16pt
Label Medium weightmd.sys.typescale.variable.label-medium.weight
500
Label Medium wghtmd.sys.typescale.variable.label-medium.wght
AxisValue: Tag: wght · Value: 500
Label Medium gradmd.sys.typescale.variable.label-medium.grad
AxisValue: Tag: GRAD
Label Medium wdthmd.sys.typescale.variable.label-medium.wdth
AxisValue: Tag: wdth · Value: 100
Label Medium rondmd.sys.typescale.variable.label-medium.rond
AxisValue: Tag: ROND
Label Medium opszmd.sys.typescale.variable.label-medium.opsz
—
Label Medium crsvmd.sys.typescale.variable.label-medium.crsv
AxisValue: Tag: CRSV
Label Medium slntmd.sys.typescale.variable.label-medium.slnt
AxisValue: Tag: slnt
Label Small
Label Small tokens
TokenValue
Label Smallmd.sys.typescale.variable.label-small
Roboto Flex · 11pt · weight 500 · line height 16pt · tracking 0pt · VariationAxes: CRSV: AxisValue: 0 · GRAD: AxisValue: 0 · ROND: AxisValue: 0 · Opsz: AxisValue: 0 · Slnt: AxisValue: 0 · Wdth: AxisValue: 100 · Wght: AxisValue: 500
Label Small font namemd.sys.typescale.variable.label-small.font
Roboto Flex
Label Small font sizemd.sys.typescale.variable.label-small.size
11pt
Label Small font trackingmd.sys.typescale.variable.label-small.tracking
0pt
Label Small line heightmd.sys.typescale.variable.label-small.line-height
16pt
Label Small weightmd.sys.typescale.variable.label-small.weight
500
Label Small wghtmd.sys.typescale.variable.label-small.wght
AxisValue: Tag: wght · Value: 500
Label Small gradmd.sys.typescale.variable.label-small.grad
AxisValue: Tag: GRAD
Label Small wdthmd.sys.typescale.variable.label-small.wdth
AxisValue: Tag: wdth · Value: 100
Label Small rondmd.sys.typescale.variable.label-small.rond
AxisValue: Tag: ROND
Label Small opszmd.sys.typescale.variable.label-small.opsz
—
Label Small crsvmd.sys.typescale.variable.label-small.crsv
AxisValue: Tag: CRSV
Label Small slntmd.sys.typescale.variable.label-small.slnt
AxisValue: Tag: slnt