Typography

In-content pages and the browser chrome follow different type scales due to the chrome relying on operating systems' font sizing, while in-content pages follow the type scale set by the design system.

We set font: message-box at the root of common-shared.css and global.css stylesheets so that both in-content and the chrome can have access to operating system font families.

We also don't specify line height units and rely on the default.

Heading font size

The chrome of the browser does not include heading variations. The following tokens only apply to in-content (about:) pages.

MacOS

Typography / Heading
Ag
SF Pro 590 26px
xlarge
Ag
SF Pro 590 22px
large
Ag
SF Pro 590 17px
medium

Windows

Typography / Heading
Ag
Segoe UI 590 26px
xlarge
Ag
Segoe UI 590 22px
large
Ag
Segoe UI 590 17px
medium

Ubuntu

Typography / Heading
Ag
Ubuntu Sans 590 26px
xlarge
Ag
Ubuntu Sans 590 22px
large
Ag
Ubuntu Sans 590 17px
medium

Body font size

MacOS

Ag
SF Pro 400 15px
Ag
SF Pro 400 13px
default
Ag
SF Pro 400 13px
Ag
SF Pro 400 11px
small

Windows

Ag
Segoe UI 400 15px
Ag
Segoe UI 400 12px
default
Ag
Segoe UI 400 13px
Ag
Segoe UI 400 11px
small

Linux

Ag
Ubuntu Sans 400 15px
Ag
Ubuntu Sans 400 14.67px
default
Ag
Ubuntu Sans 400 13px
Ag
Ubuntu Sans 400 11px
small

Font weight

Ag
SF Pro 590 13px
small-bold
Ag
SF Pro 590 15px
default-bold
Used for bold text in buttons, and bold text.