# Typography [Typography](https://m3.material.io/styles/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](https://m3.material.io/styles/typography/fonts) 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](https://fonts.google.com/share?selection.family=Roboto:wght@400;500;700). ### Tokens Typefaces can be set using [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Tokens follow the naming convention `--md-ref-typeface-`. Typeface | Token -------- | ------------------------- Brand | `--md-ref-typeface-brand` Plain | `--md-ref-typeface-plain` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-ref-typeface.scss) ```css @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](https://m3.material.io/styles/typography/type-scale-tokens) 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](https://m3.material.io/styles/typography/applying-type) 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--`. ```ts 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`

Large display

Body text

`; } } ``` ### Tokens Typescales can be set using [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). 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---`. 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](https://github.com/material-components/material-web/blob/main/tokens/_md-sys-typescale.scss) ```css :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---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); > } > ```