material-components_material-web/docs/theming/typography.md

Typography

Typography helps make writing legible and beautiful.

Tip: "typeface" and "typescale" can be confusing. "face" refers to font-family and font-weight.

"scale" refers to a group of font-family, font-size, line-height, and font-weight tokens.

Typeface

A typeface is a font-family. In Material there are plain and brand typefaces.

Each typeface has normal, medium, and bold styles (defaults to 400, 500, and 700). All three weight styles need to be included for a font.

Important: if you do not change the typeface, be sure to load the default 'Roboto' font. For example, from fonts.google.com.

Tokens

Typefaces can be set using CSS custom properties. Tokens follow the naming convention --md-ref-typeface-<token>.

Typeface	Token
Brand	--md-ref-typeface-brand
Plain	--md-ref-typeface-plain

• All tokens

@import url('https://fonts.googleapis.com/css2?family=Open%20Sans:wght@400;500;700&display=swap');

:root {
  --md-ref-typeface-brand: 'Open Sans';
  --md-ref-typeface-plain: system-ui;
}

Typescale

A typescale is a collection of font styles: font-family, font-size, line-height, and font-weight.

Tokens

Typescales can be set using CSS custom properties. Each typescale has three sizes: small, medium, and large. Each size has four properties: font (family), size, line-height, and weight.

Tokens follow the naming convention --md-sys-typescale-<scale>-<size>-<property>.

Typescale	Tokens
Display	--md-sys-typescale-display-medium-font
	--md-sys-typescale-display-medium-size
	--md-sys-typescale-display-medium-line-height
	--md-sys-typescale-display-medium-weight
Headline	--md-sys-typescale-headline-medium-font
	--md-sys-typescale-headline-medium-size
	--md-sys-typescale-headline-medium-line-height
	--md-sys-typescale-headline-medium-weight
Title	--md-sys-typescale-title-medium-font
	--md-sys-typescale-title-medium-size
	--md-sys-typescale-title-medium-line-height
	--md-sys-typescale-title-medium-weight
Body	--md-sys-typescale-body-medium-font
	--md-sys-typescale-body-medium-size
	--md-sys-typescale-body-medium-line-height
	--md-sys-typescale-body-medium-weight
Label	--md-sys-typescale-label-medium-font
	--md-sys-typescale-label-medium-size
	--md-sys-typescale-label-medium-line-height
	--md-sys-typescale-label-medium-weight

• All tokens

:root {
  --md-sys-typescale-body-medium-size: 1rem;
  --md-sys-typescale-body-medium-line-height: 1.5rem;
  /* ... */
}

Tip: to change all font families across typescales, prefer setting --md-ref-typeface-brand and --md-ref-typeface-plain, which map to each typescale.

Use --md-sys-typescale-<scale>-font to change the typeface that a font is mapped to. This is useful for custom typefaces.

:root {
  --my-brand-font: 'Open Sans';
  --my-headline-font: 'Montserrat';
  --my-title-font: 'Montserrat';
  --my-plain-font: system-ui;

  --md-ref-typeface-brand: var(--my-brand-font);
  --md-ref-typeface-plain: var(--my-plain-font);

  --md-sys-typescale-headline-font: var(--my-headline-font);
  --md-sys-typescale-title-font: var(--my-title-font);
}