Typography

Our typography uses the brand Ubuntu font for headings across all of our platforms. Each platform uses a specific font for the body copy and a unique typescale to suit that platform.

Web

Font settings

Element	Font	Weight
Headings	Ubuntu	Bold
Sub-headings, fieldsets	Ubuntu	Medium
Body text	Arial	Regular

Type scales and white-space

Below is a list of type scales for headings, sub-heading and body text. This is a suggested scale that can be adjusted to suit your squad.

Element	Large scale	Small scale
Heading	Heading 8XL	Heading 6XL
Sub-heading	Sub-heading 6XL	Sub-heading 4XL
Nested Sub-heading	Sub-heading 5XL, 4XL, 3XL	Sub-heading 3XL, 2XL, XL
Body text	Body MD	Body MD

Headings and body text

White-spacesThe heading white spaces also apply to sub-headings.

Nested headings

Avoid using heading level-6 (or H6). This is rarely used, and its type scale might resemble the body text. Users with cognitive issues, especially screen-readers, may need help locating H6.

Paragraph & heading white space

For larger screen

White space between a paragraph and the following heading

For smaller screens

Tokens

Typography

Ubuntu 700 3rem/3.5rem

Heading 8XL

Large H1

Token set

Semantic

Ubuntu 700 2.75rem/3.25rem

Heading 7XL

Use for headings

Token set

Semantic

Ubuntu 700 2.5rem/3rem

Heading 6XL

Large H2, Small H1

Token set

Semantic

Ubuntu 700 2.25rem/2.75rem

Heading 5XL

Token set

Semantic

Ubuntu 700 2rem/2.5rem

Heading 4XL

Use for headings

Token set

Semantic

Ubuntu 700 1.75rem/2.25rem

Heading 3XL

Use for headings

Token set

Semantic

Ubuntu 700 1.5rem/2rem

Heading 2XL

Use for headings

Token set

Semantic

Ubuntu 700 1.25rem/1.75rem

Heading XL

Use for headings

Token set

Semantic

Ubuntu 700 1.125rem/1.5rem

Heading LG

Token set

Semantic

Ubuntu 700 1rem/1.5rem

Heading MD

Token set

Semantic

Ubuntu 700 0.875rem/1.25rem

Heading SM

Use for headings

Token set

Semantic

Arial 400 3rem/3.5rem

Body 8XL

Token set

Semantic

Arial 400 2.75rem/3.25rem

Body 7XL

Token set

Semantic

Arial 400 2.5rem/3rem

Body 6XL

Token set

Semantic

Arial 400 2.25rem/2.75rem

Body 5XL

Token set

Semantic

Arial 400 2rem/2.5rem

Body 4XL

Token set

Semantic

Arial 400 1.75rem/2.25rem

Body 3XL

Token set

Semantic

Arial 400 1.5rem/2rem

Body 2XL

Token set

Semantic

Arial 400 1.25rem/1.75rem

Body XL

Token set

Semantic

Arial 400 1.125rem/1.5rem

Body LG

Token set

Semantic

Arial 400 1rem/1.5rem

Body MD

Token set

Semantic

Arial 400 0.875rem/1.25rem

Body SM

Token set

Semantic

Ubuntu 500 3rem/3.5rem

Subheading 8XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 2.75rem/3.25rem

Subheading 7XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 2.5rem/3rem

Subheading 6XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 2.25rem/2.75rem

Subheading 5XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 2rem/2.5rem

Subheading 4XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 1.75rem/2.25rem

Subheading 3XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 1.5rem/2rem

Subheading 2XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 1.25rem/1.75rem

Subheading XL

Use for sub-headings

Token set

Semantic

Ubuntu 500 1.125rem/1.5rem

Subheading LG

Use for sub-headings

Token set

Semantic

Ubuntu 500 1rem/1.5rem

Subheading MD

Use for sub-headings

Token set

Semantic

Ubuntu 500 0.875rem/1.25rem

Subheading SM

Use for sub-headings

Token set

Semantic

Arial 700 3rem/3.5rem

Strong 8XL

Use for bold copy

Token set

Semantic

Arial 700 2.75rem/3.25rem

Strong 7XL

Use for bold copy

Token set

Semantic

Arial 700 2.5rem/3rem

Strong 6XL

Use for bold copy

Token set

Semantic

Arial 700 2.25rem/3rem

Strong 5XL

Use for bold copy

Token set

Semantic

Arial 700 2rem/2.5rem

Strong 4XL

Use for bold copy

Token set

Semantic

Arial 700 1.75rem/2.25rem

Strong 3XL

Use for bold copy

Token set

Semantic

Arial 700 1.5rem/2rem

Strong 2XL

Use for bold copy

Token set

Semantic

Arial 700 1.25rem/1.75rem

Strong XL

Use for bold copy

Token set

Semantic

Arial 700 1.125rem/1.5rem

Strong LG

Use for bold copy

Token set

Semantic

Arial 700 1rem/1.5rem

Strong MD

Use for bold copy

Token set

Semantic

Arial 700 0.875rem/1.25rem

Strong SM

Use for bold copy

Token set

Semantic

Text

Arial 400 1.125rem/1.5rem

Large Body

Alias of Body LG Leading Copy or Emphasis

Token set

Semantic

Arial 400 1rem/1.5rem

Regular Body

Alias of Body MD

Token set

Semantic

Arial 400 0.875rem/1.25rem

Small Body

Alias of Body SM For captions

Token set

Semantic

Arial 400 0.875rem/1.25rem

Label

Alias of Body MD Form Labels

Token set

Semantic

Ubuntu 500 1rem/1.5rem

Legend

Alias of Sub-heading MD Form Legends

Token set

Semantic