> Markdown version of [Material](https://vaadin.com/docs/v14/ds/foundation/typography/material). Section index: [llms.txt](https://vaadin.com/docs/v14/ds/llms.txt)

# Material Typography

See the Material Design documentation for [the type system](https://material.io/design/typography/the-type-system.html), to learn about creating and applying a consistent typographic theme.

`material-tokens.ts`

```typescript
// Import all Material CSS custom properties into the global style scope
// tag::color[]
import '@vaadin/vaadin-material-styles/color';
// end::color[]
// tag::typography[]
import '@vaadin/vaadin-material-styles/typography';
// end::typography[]
// prettier-ignore
```

## <a id="font-family"></a>Font Family

If available, the Roboto font is used. You should either include Roboto locally in your project, or import it from [Google Fonts](https://fonts.google.com/specimen/Roboto).

| Description                              | CSS Custom Property    |
| ---------------------------------------- | ---------------------- |
| **Main font** Headings, body and UI text | --material-font-family |

## <a id="font-size"></a>Font Size

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

| Description   | CSS Custom Property          |
| ------------- | ---------------------------- |
| **Heading 1** | --material-h1-font-size      |
| **Heading 2** | --material-h2-font-size      |
| **Heading 3** | --material-h3-font-size      |
| **Heading 4** | --material-h4-font-size      |
| **Heading 5** | --material-h5-font-size      |
| **Heading 6** | --material-h6-font-size      |
| **Body**      | --material-body-font-size    |
| **Small**     | --material-small-font-size   |
| **Button**    | --material-button-font-size  |
| **Caption**   | --material-caption-font-size |

`0975AF57-9257-4E5E-8A7D-9777E359BF7B`