Skip to main content

Typography

We have decided to adopt IBM Plex Sans typeface for our digital solutions. This new typeface is clean, distinctive and designed for digital world use cases. The typeface is free and available in multiple languages, making it ideal for localisation. More info can be found at: www.ibm.com/plex

Display

Display Large
Font Size: 52px; Line Height: 60px; Weight: 300

Display Medium
Font Size: 44px; Line Height: 52px; Weight: 300

Display Small
Font Size: 36px; Line Height: 40px; Weight: 300

Headline

Headline Large
Font Size: 32px; Line Height: 36px; Weight: 500
This style is applied to the H1 element.

Headline Medium
Font Size: 28px; Line Height: 32px; Weight: 500
This style is applied to the H2 element.

Headline Small
Font Size: 24px; Line Height: 28px; Weight: 500
This style is applied to the H3 element.

Title

Title Large
Font Size: 20px; Line Height: 24px; Weight: 500
This style is applied to the H4 element.

Title Medium
Font Size: 16px; Line Height: 20px; Weight: 500
This style is applied to the H5 element.

Title Small
Font Size: 12px; Line Height: 16px; Weight: 500
This style is applied to the H6 element.

Body

Body Large
Font Size: 20px; Line Height: 24px; Weight: 400

Body Medium
Font Size: 16px; Line Height: 24px; Weight: 400
This style is applied to the P element.

Body Small
Font Size: 14px; Line Height: 18px; Weight: 400
This style is does not adhere to the 4px grid system

Body X Small
Font Size: 12px; Line Height: 16px; Weight: 400

Label

Label Large
Font Size: 16px; Line Height: 24px; Weight: 500

Label Medium
Font Size: 14px; Line Height: 20px; Weight: 500
This style is does not adhere to the 4px grid system

Label Small
Font Size: 12px; Line Height: 16px; Weight: 500
This style is does not adhere to the 4px grid system

Label Indicator
Font Size: 12px; Line Height: 14px; Weight: 500