Typography - Guidelines

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)