Material

Typography

The theme defines font styles you can use in your app to achieve a consistent typographic style.

If you wish to use the Roboto font, you need to import that yourself. You can include the following snippet in your app to easily import it from Google Fonts:

Font size

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

Global style modules

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 (it doesn’t override header margins).

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

Custom properties

Font family
--material-font-family
Font size
--material-display2-font-size
--material-display1-font-size
--material-headline-font-size
--material-title-font-size
--material-subhead-font-size
--material-body-font-size
--material-small-font-size
--material-caption-font-size
--material-icon-font-size