> Markdown version of [Typography](https://vaadin.com/docs/next/styling/themes/aura/typography). Section index: [llms.txt](https://vaadin.com/docs/next/styling/llms.txt)

# Aura Typography

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

- `--aura-font-family`

  The font family used for the application. Set on the `<body>` element. Defaults to `--aura-font-family-instrument-sans`.

- `--aura-font-family-system` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  The system font stack, where the default sans-serif font of the operating system is used. Assign it to `--aura-font-family` to use it; don’t redefine the stack itself.

- `--aura-font-family-instrument-sans` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  A font stack using the Instrument Sans font by default, and falling back to the system font stack if the web font fails to load. Assign it to `--aura-font-family` to use it; don’t redefine the stack itself. To use a different font, set `--aura-font-family` to your own stack.

- `--aura-font-smoothing`

  Set to `auto` to disable grayscale/anti-aliased font smoothing and use the default sub-pixel anti-aliasing. Aura leaves this property unset, so its fallbacks apply: `antialiased` for `-webkit-font-smoothing` and `grayscale` for `-moz-osx-font-smoothing`.

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

- `--aura-base-font-size`

  A number without a unit (e.g., `16` instead of `16px`) that represents the medium font size in pixels. The default is `14`.

The base font size is used to compute the following font size properties, which are read-only. The font sizes are defined with the `rem` unit and rounded to the nearest full pixel size. To scale them all, set `--aura-base-font-size` rather than any of the individual properties.

- `--aura-font-size-xs` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Extra small font size. The default corresponds to `12px`.

- `--aura-font-size-s` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Small font size. The default corresponds to `13px`.

- `--aura-font-size-m` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Medium font size. The default corresponds to `14px`.

- `--aura-font-size-l` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Large font size. The default corresponds to `16px`.

- `--aura-font-size-xl` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Extra large font size. The default corresponds to `18px`.

Aura supports the [Dynamic Type feature on iOS and iPadOS](https://developer.apple.com/design/human-interface-guidelines/typography#Supporting-Dynamic-Type), which allows the user to set a font size preference in the OS settings.

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

- `--aura-base-line-height`

  A number without a unit (e.g., `1.5` instead of `24px`), relative to the corresponding font size. The default is `1.4`.

The base line height is used to compute the following line height properties, which are read-only. The line heights are defined with the `rem` unit and rounded to the nearest 2 pixels. Each line height is designed to be used together with the corresponding font size. To change them all, set `--aura-base-line-height` rather than any of the individual properties.

- `--aura-line-height-xs` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Extra small line height. The default corresponds to `16px`.

- `--aura-line-height-s` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Small line height. The default corresponds to `18px`.

- `--aura-line-height-m` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Medium line height. The default corresponds to `20px`.

- `--aura-line-height-l` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Large line height. The default corresponds to `22px`.

- `--aura-line-height-xl` [Read-only](https://vaadin.com/docs/next/styling/themes/aura.md#read-only-properties)

  Extra large line height. The default corresponds to `26px`.

## <a id="font-weight"></a>Font Weight

Static font weight properties.

- `--aura-font-weight-regular`

  Regular font weight. The default is `400`.

- `--aura-font-weight-medium`

  Medium font weight. The default is `500`. Used for input field labels, buttons, menu/nav/tab items, grid headers, etc.

- `--aura-font-weight-semibold`

  Semi-bold font weight. The default is `600`. Used for headings and dialog titles.