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>
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%