Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

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

<custom-style>
  <style>
    html {
      --material-font-family: "Helvetica Neue", Arial, sans-serif;
    }
  </style>
</custom-style>

Font size

<div class="font-size-h1">H1</div>
<div class="font-size-h2">H2</div>
<div class="font-size-h3">H3</div>
<div class="font-size-h4">H4</div>
<div class="font-size-h5">H5</div>
<div class="font-size-h6">H6</div>
<div class="font-size-body">Body</div>
<div class="font-size-small">Small</div>
<div class="font-size-button">Button</div>
<div class="font-size-caption">Caption</div>

<custom-style>
  <style>
    .font-size-h1 {
      font-size: var(--material-h1-font-size);
    }

    .font-size-h2 {
      font-size: var(--material-h2-font-size);
    }

    .font-size-h3 {
      font-size: var(--material-h3-font-size);
    }

    .font-size-h4 {
      font-size: var(--material-h4-font-size);
    }

    .font-size-h5 {
      font-size: var(--material-h5-font-size);
    }

    .font-size-h6 {
      font-size: var(--material-h6-font-size);
    }

    .font-size-body {
      font-size: var(--material-body-font-size);
    }

    .font-size-small {
      font-size: var(--material-small-font-size);
    }

    .font-size-button {
      font-size: var(--material-button-font-size);
    }

    .font-size-caption {
      font-size: var(--material-caption-font-size);
    }
  </style>
</custom-style>

A5B2698C-9775-4CB3-A2E5-E902922ECB25