Typography

Fifteen type roles in five groups, display to label, each with an emphasized style. Components set type through the role tokens; the typeface is Google Sans Flex.

Each role is five custom properties, --m3e-sys-typescale-<role>-{font, weight, size, line-height, tracking}, and its emphasized style adds -emphasized after the role. Sizes are emitted in rem (1rem = 16sp), so they follow the reader's browser font size. The samples below are set with those tokens.

.title {
  font-family: var(--m3e-sys-typescale-title-large-font);
  font-weight: var(--m3e-sys-typescale-title-large-weight);
  font-size: var(--m3e-sys-typescale-title-large-size);
  line-height: var(--m3e-sys-typescale-title-large-line-height);
  letter-spacing: var(--m3e-sys-typescale-title-large-tracking);
}

The type scale

display large 57/64 sp · 400
display medium 45/52 sp · 400
display small 36/44 sp · 400
headline large 32/40 sp · 400
headline medium 28/36 sp · 400
headline small 24/32 sp · 400
title large 22/28 sp · 400
title medium 16/24 sp · 500
title small 14/20 sp · 500
body large 16/24 sp · 400
body medium 14/20 sp · 400
body small 12/16 sp · 400
label large 14/20 sp · 500
label medium 12/16 sp · 500
label small 11/16 sp · 500

Values

Role	Size / line (sp)	Weight	Tracking (sp)	Emphasized weight	Emphasized tracking
`display-large`	57/64	400	−0.2	500	0
`display-medium`	45/52	400	0	500	0
`display-small`	36/44	400	0	500	0
`headline-large`	32/40	400	0	500	0
`headline-medium`	28/36	400	0	500	0
`headline-small`	24/32	400	0	500	0
`title-large`	22/28	400	0	500	0
`title-medium`	16/24	500	0.2	700	0.15
`title-small`	14/20	500	0.1	700	0.1
`body-large`	16/24	400	0.5	500	0.15
`body-medium`	14/20	400	0.2	500	0.25
`body-small`	12/16	400	0.4	500	0.4
`label-large`	14/20	500	0.1	700	0.1
`label-medium`	12/16	500	0.5	700	0.5
`label-small`	11/16	500	0.5	700	0.5

The emphasized styles keep the size and line height. Their weights are 500, or 700 for label and the smaller titles, and some tracking changes. Compose marks its emphasized block as provisional (TypeScaleTokens.kt L249), so it is re-checked at each source pin bump.

Typeface

Compose's tokens name the platform sans-serif; m3exp-web uses Google Sans Flex (DECISIONS D1), self-hosted and variable, with optical sizing left to font-optical-sizing: auto. It ships in three profiles of different axes and sizes; the fonts and icons guide covers them, the rounded profile and the licenses.

Sources

Sizes, line heights, tracking and weights: TypeScaleTokens.kt, TypographyTokens.kt and TypefaceTokens.kt at the pinned commit, generated by m3e-codegen (FOUNDATIONS_SPEC §2).
Typeface: DECISIONS D1, D11 and D15; google/fonts ofl/googlesansflex.