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>.

• 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. They are organized into roles that describe their purpose.

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

Classes ​

Typescales can be applied to an element using the classes from the typescale stylesheet.

Class names follow the naming convention .md-typescale-<scale>-<size>.

import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';

// `typescaleStyles.styleSheet` is a `CSSStyleSheet` that can be added to a
// document or shadow root's `adoptedStyleSheets` to use the `.md-typescale-*`
// classes.
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);

// `typescaleStyles` can also be added to a `LitElement` component's styles.
class App extends LitElement {
  static styles = [typescaleStyles, css`...`];

  render() {
    return html`
      <h1 class="md-typescale-display-large">Large display</h1>
      <p class="md-typescale-body-medium">Body text</p>
    `;
  }
}

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>.

• 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.

css

: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);
}