Docs

Docs

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 (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. The font sizes are defined with the rem unit and rounded to the nearest full pixel size.

--aura-font-size-xs Read-only

Extra small font size. The default corresponds to 11px.

--aura-font-size-s Read-only

Small font size. The default corresponds to 13px.

--aura-font-size-m Read-only

Medium font size. The default corresponds to 14px.

--aura-font-size-l Read-only

Large font size. The default corresponds to 16px.

--aura-font-size-xl Read-only

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

Aura supports the Dynamic Type 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 (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. 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.

--aura-line-height-xs Read-only

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

--aura-line-height-s Read-only

Small line height. The default corresponds to 18px.

--aura-line-height-m Read-only

Medium line height. The default corresponds to 20px.

--aura-line-height-l Read-only

Large line height. The default corresponds to 22px.

--aura-line-height-xl Read-only

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

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.

Updated –