Headings

Headings 1-6 are predetermined font treatments that are based on increments in the typographic scale.

Heading sizes & weights

Desktop sizes are two steps up from mobile sizes. This applies to font size, line height, and paragraph spacing.

For example, a font size was Base6 (20px or 2rem) on mobile, the desktop size would be Base8 (25px or 2.5rem).

Each image below shows the heading font and line height displayed with a "/" between them.

Heading 1

Specs

• font-weight: 700

• font-size: Base12 (mobile), Base 14 (desktop)

• line-height: Base14 (mobile), Base16 (desktop)

• paragraph-spacing: 0

Heading 2

Specs

• font-weight: 300

• font-size: Base10 (mobile), Base12 (desktop)

• line-height: Base12 (mobile), Base14 (desktop)

• paragraph-spacing: 0

Heading 3

Specs

• font-weight: 700

• font-size: Base6 (mobile), Base8 (desktop)

• line-height: Base8 (mobile), Base10 (desktop)

• paragraph-spacing: 0

Heading 4

Specs

• font-weight: 700

• font-size: Base4 (mobile), Base6 (desktop)

• line-height: Base6 (mobile), Base8 (desktop)

• paragraph-spacing: 0

Heading 5

Specs

• font-weight: 700

• font-size: Base2 (mobile), Base4 (desktop)

• line-height: Base4 (mobile), Base6 (desktop)

• paragraph-spacing: 0

Heading 6

Specs

• font-weight: 700

• font-size: Base0 (mobile), Base2 (desktop)

• line-height: Base2 (mobile), Base4 (desktop)

• paragraph-spacing: 0

Heading line heights & paragraph spacing

Line height is two steps above the current font size base for headers (as displayed by default in typographic scale). Paragraph spacing is 0 between all headings.

Ex. If font size = Base2, then line height = Base4 and paragraph spacing = 0

Inspect headings in the Brand Styles in Figma