> Markdown version of [Typography](https://vaadin.com/docs/v23/styling/lumo/design-tokens/typography). Section index: [llms.txt](https://vaadin.com/docs/v23/styling/llms.txt)

# Lumo Typography

Lumo’s typography consists of a set of [CSS Custom Properties](https://vaadin.com/docs/v23/styling/custom-theme/css-custom-properties.md) for:

- Font family

- Font size

- Line height

You can use these CSS custom properties to apply consistent typographic styles across your application.

You can enable the built-in [Lumo compact mode variant](https://vaadin.com/docs/v23/styling/lumo/variants/compact.md) to reduce the font size and the sizing and spacing of all components, allowing you to place more components on the screen.

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

The system font stack is used by default:

- Segoe UI on Windows

- Roboto on Android and Chrome OS

- San Francisco on macOS, iOS, and iPadOS

On other systems, Helvetica and Arial are used as fallbacks.

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

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

The following font sizes are available to use. `M` is the standard size, and is used by most elements by default.

<!-- vale Vaadin.Abbr = NO -->

| Description                                     | CSS Custom Property   |
| ----------------------------------------------- | --------------------- |
| **XXXL** Heading text                           | --lumo-font-size-xxxl |
| **XXL** Heading text                            | --lumo-font-size-xxl  |
| **XL** Heading text                             | --lumo-font-size-xl   |
| **L** Heading text                              | --lumo-font-size-l    |
| **M** Body/UI text                              | --lumo-font-size-m    |
| **S** Label text                                | --lumo-font-size-s    |
| **XS** Help text, field validation text, badges | --lumo-font-size-xs   |
| **XXS** Small badges                            | --lumo-font-size-xxs  |

<!-- vale Vaadin.Abbr = YES -->

## <a id="lumo-line-height"></a>Lumo Line Height

The following line heights are available to use. `M` is the standard size, and is used by most elements by default.

| Description | CSS Custom Property   |
| ----------- | --------------------- |
| **M**       | --lumo-line-height-m  |
| **S**       | --lumo-line-height-s  |
| **XS**      | --lumo-line-height-xs |

`5B833A4F-22A1-4628-97EF-32B1DF6C94CE`