> Markdown version of [Typography](https://vaadin.com/docs/v14/flow/styling/lumo/typography). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Lumo Typography

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

## <a id="font-family"></a>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.

- \--lumo-font-family: `-apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`

## <a id="font-size-and-line-height"></a>Font Size and Line Height

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

##### Font size

- - \--lumo-font-size-xxxl: `2.5rem`
  - \--lumo-font-size-xxl: `1.75rem`
  - \--lumo-font-size-xl: `1.375rem`
  - \--lumo-font-size-l: `1.125rem`
  - \--lumo-font-size-m: `1rem`
  - \--lumo-font-size-s: `0.875rem`
  - \--lumo-font-size-xs: `0.8125rem`
  - \--lumo-font-size-xxs: `0.75rem`

##### Line-height

- - \--lumo-line-height-m: `1.625`
  - \--lumo-line-height-s: `1.375`
  - \--lumo-line-height-xs: `1.25`

## <a id="examples"></a>Examples

```html
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p>Plain text.</p>
<p><a href="">Link</a></p>
<p theme="font-size-s">Small size text.</p>
<p theme="font-size-xs">Extra small size text.</p>
```

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

```html
<!-- Add directly to index.html or use a separate HTML import -->
<custom-style>
  <style>
    html {
      --lumo-font-family: "Open Sans", sans-serif;
    }
  </style>
</custom-style>
```

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

```html
<div class="font-size-xxxl">Font size XXXL</div>
<div class="font-size-xxl">Font size XXL</div>
<div class="font-size-xl">Font size XL</div>
<div class="font-size-l">Font size L</div>
<div class="font-size-m">Font size M</div>
<div class="font-size-s">Font size S</div>
<div class="font-size-xs">Font size XS</div>
<div class="font-size-xxs">Font size XXS</div>

<custom-style>
  <style>
    .font-size-xxxl {
      font-size: var(--lumo-font-size-xxxl);
    }
    .font-size-xxl {
      font-size: var(--lumo-font-size-xxl);
    }
    .font-size-xl {
      font-size: var(--lumo-font-size-xl);
    }
    .font-size-l {
      font-size: var(--lumo-font-size-l);
    }
    .font-size-m {
      font-size: var(--lumo-font-size-m);
    }
    .font-size-s {
      font-size: var(--lumo-font-size-s);
    }
    .font-size-xs {
      font-size: var(--lumo-font-size-xs);
    }
    .font-size-xxs {
      font-size: var(--lumo-font-size-xxs);
    }
  </style>
</custom-style>
```

`CC0A259F-E134-4C37-8806-B33586E66799`