Guidelines

Typography

Disclaimer: all values expressed in pixels are in fact dynamically converted from rem values. The conversion depends on the settings of your browser.

Typeface

Arial is the standard typeface we use. We chose Arial because it is a system font that is suited for multilingual use.

font-family: Arial, sans-serif;

Type scale

Each step on the scale is determined by the previous step on the scale. We use the carbon design formula (X₂=X₁+{INT[(n-2)/4]+1}x2), starting from the font size of 0.75rem (12px).

Line height

Line-heights are based on the size of the typeface itself. Ideal line-heights for standard copy have a ratio around 1:1.5. The exception to this rule are headings, which need less spacing and therefore have a line-height ratio of 1:1.2. The line-height values need to be always divisible by 4 so they can support a vertical grid. According to the use of text we separate typeface into two categories. Prolonged reading has a bigger ratio (1.5) to match accessibility guidelines and UI standard is for bigger titles and UI elements (buttons etc).

Font weight

Font weight is an important typographic style that can add emphasis and is used to differentiate content hierarchy. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold. We use 400 for Regular and 600 for bold. The bold font weight is used to put emphasis on important words and to add visual emphasis on headings.

Line length

Line-length, traditionally known as measure, is the number of characters in a single line. It also directly contributes to the readability and pacing of copy. Lines that are too long degrade eye tracking from line to line, making it difficult to gauge which line to read next. In contrast, lines that are too short make it difficult for a reader to maintain a steady reading rhythm. Short lines often create disproportionate ragged edges that negatively affect the design. We use a range of 75-85 characters per line.

Headings

Headings and subheadings should be organised in a hierarchy, with heading first, followed by subheadings in order.

Font weight: 600 (bold)

Heading 1

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
Mobile3XL - 1.75rem - 28px3XL UI - 2rem - 32px
Desktop4XL - 2rem - 32px4XL UI - 2.5rem - 40px

Heading 2

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
Mobile2XL - 1.5rem - 24px2XL UI - 1.75rem - 28px
Desktop3XL - 1.75rem - 28px3XL UI - 2rem - 32px

Heading 3

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
MobileXL - 1.25rem - 20pxXL UI - 1.5rem - 24px
Desktop2XL - 1.5rem - 24px2XL UI - 1.75rem - 28px

Heading 4

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
MobileL - 1.125rem - 18pxL Prolonged - 1.75rem - 28px
DesktopXL - 1.25rem - 20pxXL Prolonged - 1.75rem - 28px

Heading 5

The quick brown fox jumps over the lazy dog
Font sizeLine height
Mobile & DesktopM - 1rem - 16pxM Prolonged - 1.5rem - 24px

Paragraphs

Font weight: 400 (regular)

Lead paragraph

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
MobileL - 1.125rem - 18pxL Prolonged - 1.75rem - 28px
DesktopXL - 1.25rem - 20pxXL Prolonged - 1.75rem - 28px

Medium paragraph

The quick brown fox jumps over the lazy dog
Font sizeLine height
Mobile & DesktopM - 1rem - 16pxM Prolonged - 1.5rem - 24px

Small paragraph

The quick brown fox jumps over the lazy dog
Font sizeLine height
Mobile & DesktopS - 0.875rem - 14pxS Prolonged - 1.25rem - 20px

Extra Small paragraph

The quick brown fox jumps over the lazy dog
Font sizeLine height
Mobile & DesktopXS - 0.75rem - 12pxXS Prolonged - 1.25rem - 20px