2023-09-22 23:05:50 -07:00
|
|
|
<!-- catalog-only-start --><!-- ---
|
|
|
|
|
name: Typography
|
|
|
|
|
title: Typography
|
|
|
|
|
order: 3
|
|
|
|
|
-----><!-- catalog-only-end -->
|
|
|
|
|
|
2023-09-08 13:51:40 -07:00
|
|
|
# Typography
|
|
|
|
|
|
|
|
|
|
<!-- go/mwc-typography -->
|
|
|
|
|
|
|
|
|
|
<!--*
|
|
|
|
|
# Document freshness: For more information, see go/fresh-source.
|
2025-11-25 13:00:41 -08:00
|
|
|
freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
|
2023-09-08 13:51:40 -07:00
|
|
|
tag: 'docType:howTo'
|
|
|
|
|
*-->
|
|
|
|
|
|
|
|
|
|
<!-- [TOC] -->
|
|
|
|
|
|
|
|
|
|
[Typography](https://m3.material.io/styles/typography)<!-- {.external} --> 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
|
|
|
|
|
|
|
|
|
|
<!-- go/md-ref-typeface -->
|
|
|
|
|
|
|
|
|
|
A [typeface](https://m3.material.io/styles/typography/fonts)<!-- {.external} --> 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/--*)<!-- {.external} -->.
|
|
|
|
|
Tokens follow the naming convention `--md-ref-typeface-<token>`.
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
<!-- {.external} -->
|
|
|
|
|
|
|
|
|
|
```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
|
|
|
|
|
|
|
|
|
|
<!-- go/md-sys-typescale -->
|
|
|
|
|
|
|
|
|
|
A
|
|
|
|
|
[typescale](https://m3.material.io/styles/typography/type-scale-tokens)<!-- {.external} -->
|
|
|
|
|
is a collection of font styles: `font-family`, `font-size`, `line-height`, and
|
2024-03-28 10:37:42 -07:00
|
|
|
`font-weight`. They are organized into roles that describe their purpose.
|
|
|
|
|
|
|
|
|
|
Material's
|
|
|
|
|
[applying type guidelines](https://m3.material.io/styles/typography/applying-type)<!-- {.external} -->
|
|
|
|
|
explains when to use each typescale role.
|
2023-09-08 13:51:40 -07:00
|
|
|
|
2024-03-06 10:13:57 -08:00
|
|
|
### Classes
|
|
|
|
|
|
|
|
|
|
<!-- go/md-typescale -->
|
|
|
|
|
|
|
|
|
|
Typescales can be applied to an element using the classes from the typescale
|
|
|
|
|
stylesheet.
|
|
|
|
|
|
|
|
|
|
Class names follow the naming convention `.md-typescale-<scale>-<size>`.
|
|
|
|
|
|
|
|
|
|
```ts
|
2024-03-20 13:42:34 -07:00
|
|
|
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
|
2024-03-06 10:13:57 -08:00
|
|
|
|
|
|
|
|
// `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>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-09-08 13:51:40 -07:00
|
|
|
### Tokens
|
|
|
|
|
|
|
|
|
|
Typescales can be set using
|
|
|
|
|
[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->.
|
|
|
|
|
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](https://github.com/material-components/material-web/blob/main/tokens/_md-sys-typescale.scss)
|
|
|
|
|
<!-- {.external} -->
|
|
|
|
|
|
|
|
|
|
```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.
|
|
|
|
|
>
|
2025-06-23 10:17:24 -07:00
|
|
|
> Use `--md-sys-typescale-<scale>-<size>-font` to change the typeface that a
|
|
|
|
|
> font is mapped to. This is useful for custom typefaces.
|
2023-09-08 13:51:40 -07:00
|
|
|
>
|
|
|
|
|
> ```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);
|
|
|
|
|
> }
|
|
|
|
|
> ```
|
|
|
|
|
|
|
|
|
|
<!--#include file="../../googlers/theming-typography.md" -->
|
