Material Typography

The Material theme defines a set of CSS custom properties you can use to apply consistent typographic styles across your application.

Font Family

--material-font-family: "Roboto", sans-serif

Font Size

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

--material-h1-font-size: 6rem

--material-h2-font-size: 3.75rem

--material-h3-font-size: 3rem

--material-h4-font-size: 2.125rem

--material-h5-font-size: 1.5rem

--material-h6-font-size: 1.25rem

--material-body-font-size: 1rem

--material-small-font-size: 0.875rem

--material-button-font-size: 0.875rem

--material-caption-font-size: 0.75rem

Examples

Font family

HTML

  1. <custom-style>
  2.   <style>
  3.     html {
  4.       --material-font-family: "Helvetica Neue", Arial, sans-serif;
  5.     }
  6.   </style>
  7. </custom-style>

Font size

HTML

  1. <div class="font-size-h1">H1</div>
  2. <div class="font-size-h2">H2</div>
  3. <div class="font-size-h3">H3</div>
  4. <div class="font-size-h4">H4</div>
  5. <div class="font-size-h5">H5</div>
  6. <div class="font-size-h6">H6</div>
  7. <div class="font-size-body">Body</div>
  8. <div class="font-size-small">Small</div>
  9. <div class="font-size-button">Button</div>
  10. <div class="font-size-caption">Caption</div>
  12. <custom-style>
  13.   <style>
  14.     .font-size-h1 {
  15.       font-size: var(--material-h1-font-size);
  16.     }
  18.     .font-size-h2 {
  19.       font-size: var(--material-h2-font-size);
  20.     }
  22.     .font-size-h3 {
  23.       font-size: var(--material-h3-font-size);
  24.     }
  26.     .font-size-h4 {
  27.       font-size: var(--material-h4-font-size);
  28.     }
  30.     .font-size-h5 {
  31.       font-size: var(--material-h5-font-size);
  32.     }
  34.     .font-size-h6 {
  35.       font-size: var(--material-h6-font-size);
  36.     }
  38.     .font-size-body {
  39.       font-size: var(--material-body-font-size);
  40.     }
  42.     .font-size-small {
  43.       font-size: var(--material-small-font-size);
  44.     }
  46.     .font-size-button {
  47.       font-size: var(--material-button-font-size);
  48.     }
  50.     .font-size-caption {
  51.       font-size: var(--material-caption-font-size);
  52.     }
  53.   </style>
  54. </custom-style>