Material

Typography

Importing the style module

If you are not importing any element themes, and want to use the font properties, you need to import them manually.

Importing the typography modules imports the Roboto font from Google Fonts automatically.

Global typography styles

To easily apply basic typographic styles for your app, include the following style module in the global scope. It will set the font family, font size and line height for the body element, as well as specify consistent header styles.

If needed, you can include the style module in any other style scopes (i.e. shadow roots) as well.

Font family

The Roboto font is used by default. You can apply or change the font family using the --material-font-family custom property.

Font size

The following font sizes are available to use. The default font size for most elements is --material-body-font-size.

Custom properties

Font family
--material-font-family
Font size
--material-h1-font-size
--material-h2-font-size
--material-h3-font-size
--material-h4-font-size
--material-h5-font-size
--material-h6-font-size
--material-body-font-size
--material-small-font-size
--material-button-font-size
--material-caption-font-size