Docs

Docs

Aura Typography

Tables of Aura style properties related to displaying and formatting text.

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. Assign it to --aura-font-family to use it; don’t redefine the stack itself.

--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. 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.

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

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

--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, 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

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.