Typography

Our fonts create a cohesive and engaging brand experience while meeting accessibility requirements

Primary

GT Ultra Median for headline
Hero headline <h1>

font-size: 80px, line-height: 115%

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789

Secondary

Aktiv Grotesk for body copy
paragraph<p> and <h6>

font-size: 16px, line height: 150%

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789

Desktop

Consistent use of the type-stack creates a visual language that allows users to both navigate the website, and quickly separate headings from body copy within the page contents.

When selecting styles from the type-stack ensure the styles chosen meet layout requirements.

There are two type-stacks, one for desktop and one with optimised sizes for responsive displays.


GT Ultra Median for headline <h1>


font-size: 80px, line-height: 115%

GT Ultra Median for headline <h2>


font-size: 44px, line-height: 115%

GT Ultra Median for headline <h3>


font-size: 32px, line-height: 115%

GT Ultra Median for headline <h4>


font-size: 24px, line-height: 115%

GT Ultra Median for headline <h5>


font-size: 20px, line-height: 115%

GT Ultra Median for headline <h6>


font-size: 16px, line-height: 150%

Responsive

The responsive typestack sizes are optimised for smaller digital devices such as tablets and mobile (see grid layouts). As with the desktop typography on the previous page, this type-stack enables users to more easily navigate the page, even as the design adjusts to different break points.

GT Ultra Median for headline <h1>

font-size: 46px, line-height: 115%

GT Ultra Median for headline <h2>

font-size: 32px, line-height: 115%

GT Ultra Median for headline <h3>

font-size: 26px, line-height: 115%

GT Ultra Median for headline <h4>

font-size: 20px, line-height: 115%

GT Ultra Median for headline <h5>

font-size: 18px, line-height: 115%

GT Ultra Median for headline <h6> and <p>

font-size: 16px, line-height: 150%