Typography responsiveness unclear

[wpplumber]

It was excellent to read the M3 docs, thank you M3 team.

My question is there any reference to know where to use the Display, Headline, Title, Body, Label across devices because it seem incomplete by having only Display for large, medium and small.

i.e while designing a website page for mobile and using Display it seems not complete without having info about line height and leading..

Any tools available to do the conversion or produce the Typography?

[asyncLiz]

Check out How do I use --md-sys-* custom properties in my styles?

tl;dr, you can use Sass to generate the custom properties, then use the token variables in your CSS.

@use '@material/web/color/typography';

:root {
  @include typography.theme;
}

.display-large {
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-size);
  line-height: var(--md-sys-typescale-line-height);
  font-weight: var(--md-sys-typescale-weight);
}

We're tracking a better non-Sass API for using typescales in #1050