Docs

Documentation versions (currently viewingVaadin 25 (prerelease))

Aura Typography

Tables of Aura style properties related to displaying and formatting text.
Note
Read-Only Properties
Properties which are marked “read-only” aren’t technically read-only. While you can override their values, the intention is to use them only to set values of other properties.

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

The system font stack, where the default sans-serif font of the operating system is used.

--aura-font-family-instrument-sans Read-only

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.

--aura-font-smoothing

Set to auto to disable grayscale/anti-aliased font smoothing and use the default sub-pixel anti-aliasing.

Font Size

--aura-base-font-size

A number without a unit (i.e., not a CSS length value) that represents the M size in pixels.

The base font size is used to compute the following font size properties, which are defined with the rem unit and rounded to the nearest pixel size.

--aura-font-size-xs, --aura-font-size-s, --aura-font-size-m, --aura-font-size-l, --aura-font-size-xl.

Aura supports the dynamic font sizing feature on iOS and iPadOS, which allows the user to set a font size preference in the OS settings.

Line Height

--aura-base-line-height

A number without a unit (i.e., not a CSS length value), relative to the corresponding font size.

The base line height is used to compute the following line height properties. The line heights are defined with the rem unit and rounded to the nearest 2 pixels.

--aura-line-height-xs, --aura-line-height-s, --aura-line-height-m, --aura-line-height-l, --aura-line-height-xl.

Font Weight

Static font weight properties.

--aura-font-weight-regular, --aura-font-weight-medium, --aura-font-weight-semibold.