Typography
Typography helps make writing legible and beautiful.
star "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
, andfont-weight
tokens.
Typeface
Link to “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.
priority_high if you do not change the typeface, be sure to load the default 'Roboto' font. For example, from fonts.google.com.
Tokens
Link to “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 |
@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
Link to “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
Link to “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
Link to “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 |
:root {
--md-sys-typescale-body-medium-size: 1rem;
--md-sys-typescale-body-medium-line-height: 1.5rem;
/* ... */
}
star 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.content_copy check :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); }