Since typography forms the backbone of our design language, we have a suite of responsive typographical components to support semantic usage of our type hierarchy.

The core typographical building block is the “Text” component, which renders a block-level span element with a single grid row below it, to leave room for descenders.

It accepts a wide range of options, which can be seen below.

To better understand these options, let’s step through them one by one.

By default, when no options are provided, standard text is rendered.

Standard text is 16px over 4 grid rows across both desktop and mobile.

In rare cases where larger text is required, you can use the “large” text variant, which is 18px over 5 grid rows on both desktop and mobile.

In rare cases where smaller text is required, you can use the “small” text variant, which is 14px over 3 grid rows on both desktop and mobile.

When reading this documentation on mobile, you may be surprised to see that the headings described below all happen to look the same.

While a range of heading sizes are provided, they all render as 21px over 5 grid rows on mobile. Due to the size restrictions of mobile devices, having multiple heading sizes is more likely to lead to confusion and apparent inconsistency due to the lack of significant contrast between them. When designing a page with responsive typography, it’s important to take this into consideration by ensuring that headings on mobile are differentated in other ways, using colour or white space.

For page-level headings, hero text is 42px over 8 grid rows on desktop. Typically, you’ll only have a single string of hero text on any given page.

For large content-level headings, headline text is 28px over 6 grid rows on desktop.

For section-level headings, heading text is 22px over 5 grid rows on desktop. In this particular case, the text remains the same size across desktop and mobile.

In rarer cases, for secondary section-level headings, subheading text is 18px over 4 grid rows on desktop.

While all elements in our type hierarchy include a default weight, you can also override these with the provided weight variants.

Any text element can be explicity marked as strong with the “strong” property, which also causes the element to render a “strong” tag.

In cases where only a portion of a text block should be marked as strong, a “Strong” component is provided.

Any text element can be explicity set to regular weight with the “regular” property.

Finally, any text element can be explicity set to light weight with the “light” property.

All text is rendered in our standard neutral shade of black by default, but sometimes text needs to be displayed with different tones.

Any text element can be explicity marked as positive with the “positive” property or the inline “Positive” component.

Any text element can be explicity marked as critical with the “critical” property or the inline “Critical” component.

Any text element can be explicity marked as secondary with the “secondary” property or the inline “Secondary” component.

Any text element can be explicity marked as highlighted with the “highlight” property or the inline “Highlight” component.

Any text element can be explicity marked as info with the “info” property or the inline “Info” component.

To create a standard text-based link, a “TextLink” component is provided.

By default, all text is adjusted to sit correctly on baseline using basekick.

In some cases, when text needs to be vertically centred within a container, this isn’t the desired behaviour. To deal with this, you can optionally disable the baseline adjustment.