> Markdown version of [Typography](https://vaadin.com/docs/v24/styling/legacy/material-theme/typography). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)

# Material Typography (deprecated since V24.7)

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.

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

The Roboto font is used, if available. 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 |

`2B9EEBFC-C546-4C88-8DAA-DFCB833A15E0`