CSS utility classes map to density typography tokens. Display and headline use Saans; label and body use Google Sans Flex; code uses Google Sans Code.
Display
Saans — marketing / hero
Display L
.ds-type-display-l --type-display-l-*
Display S
.ds-type-display-s --type-display-s-*
Headline
Saans — section titles
Headline XL
.ds-type-headline-xl --type-headline-xl-*
Headline L
.ds-type-headline-l --type-headline-l-*
Headline M
.ds-type-headline-m --type-headline-m-*
Headline S
.ds-type-headline-s --type-headline-s-*
Headline XS
.ds-type-headline-xs --type-headline-xs-*
Label
Google Sans Flex — UI labels
Label XL short
.ds-type-label-xl-short --type-label-xl-*
Label XL tall
.ds-type-label-xl-tall --type-label-xl-*
Label L short
.ds-type-label-l-short --type-label-l-*
Label L tall
.ds-type-label-l-tall --type-label-l-*
Label M short
.ds-type-label-m-short --type-label-m-*
Label M tall
.ds-type-label-m-tall --type-label-m-*
Label S short
.ds-type-label-s-short --type-label-s-*
Label S tall
.ds-type-label-s-tall --type-label-s-*
Label XS short
.ds-type-label-xs-short --type-label-xs-*
Label XS tall
.ds-type-label-xs-tall --type-label-xs-*
Body
Google Sans Flex — paragraphs and UI copy
Body XL short
.ds-type-body-xl-short --type-body-xl-*
Body XL tall
.ds-type-body-xl-tall --type-body-xl-*
Body L short
.ds-type-body-l-short --type-body-l-*
Body L tall
.ds-type-body-l-tall --type-body-l-*
Body M short
.ds-type-body-m-short --type-body-m-*
Body M tall
.ds-type-body-m-tall --type-body-m-*
Body S short
.ds-type-body-s-short --type-body-s-*
Body S tall
.ds-type-body-s-tall --type-body-s-*
Body XS short
.ds-type-body-xs-short --type-body-xs-*
Body XS tall
.ds-type-body-xs-tall --type-body-xs-*
Code
Google Sans Code — monospace
code-xl-short
.ds-type-code-xl-short --type-code-xl-*
code-xl-tall
.ds-type-code-xl-tall --type-code-xl-*
code-l-short
.ds-type-code-l-short --type-code-l-*
code-l-tall
.ds-type-code-l-tall --type-code-l-*
code-m-short
.ds-type-code-m-short --type-code-m-*
code-m-tall
.ds-type-code-m-tall --type-code-m-*
code-s-short
.ds-type-code-s-short --type-code-s-*
code-s-tall
.ds-type-code-s-tall --type-code-s-*
code-xs-short
.ds-type-code-xs-short --type-code-xs-*
code-xs-tall
.ds-type-code-xs-tall --type-code-xs-*