Typography

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.

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: the default typeface is Roboto Flex, then Roboto. If you do not change it, load one of them. For example, from fonts.google.com.

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

• All tokens

<h2 class="brand">Inbox</h2>
<p class="plain">Three new messages.</p>

@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;
}

.brand {
  margin: 0;
  font-family: var(--md-ref-typeface-brand);
}

.plain {
  margin: 0;
  font-family: var(--md-ref-typeface-plain);
}

A typescale is a collection of font styles: font-family, font-size, line-height, and font-weight. They are organized into roles that describe their purpose.

Material's applying type guidelines explains when to use each typescale role.

The type scale is applied with the font shorthand tokens and their -axes and -tracking companions, which also work inside shadow roots.

<h1>Welcome back</h1>

h1 {
  margin: 0;
  font: var(--md-sys-typescale-display-md);
  font-variation-settings: var(--md-sys-typescale-display-md-axes);
  letter-spacing: var(--md-sys-typescale-display-md-tracking);
}

The scale has five roles (display, headline, title, body, label), each in sm, md, and lg, plus emphasized styles per role. Tokens follow --md-sys-typescale-<role>-<size>-<property> with the properties font, size, line-height, weight, tracking, and axes; the bare --md-sys-typescale-<role>-<size> is the combined font shorthand.

Language height. Line heights adapt to the script. Set --md-sys-language-height-scale (1, 1.07, 1.3, or 2) on :root to change the default; text in languages such as Arabic, Thai, or Urdu picks up its height from :lang().

<p class="body">Your draft was saved to the inbox.</p>

:root {
  --md-sys-typescale-body-md-size: 1.25rem;
  --md-sys-typescale-body-md-line-height: 1.75rem;
}

.body {
  margin: 0;
  font-size: var(--md-sys-typescale-body-md-size);
  line-height: var(--md-sys-typescale-body-md-line-height);
}