Typography - Usage
Typeface usage
Sky Text is mainly used for body copy. It comes in two weights, regular and medium.
The medium font weight is used to structure longer paragraphs and highlighting important information.
Sky Text Headline is only available for display fonts and has been introduced during the brand refresh in 2025. It is used for key headlines on a page (including sections) to support a clear hierarchical structure.
Styles usage
The below table lists all currently available styles and their usage.
Please note that Desktop usage includes Tablet Landscape viewports, and Mobile includes Tablet Portrait viewports, as described in the Grids Overview page.
Since it includes both legacy styles of the Display font in Sky Text, and new styles in Sky Text-Headline, the use cases overlap at the moment. This will be consolidated in a future update.
| Style name | Usage description | Desktop | Mobile |
|---|---|---|---|
| Display/1-headline | Large headlines on Desktop (e.g. Hero content on Discovery pages) | ||
| Display/2-headline | Headlines on Desktop (e.g. Page title and Section headlines) | ||
| Display/3-headline | Small headlines on Desktop, (e.g. Headlines within Modals) or Large headlines on Mobile (e.g. Hero content on Discovery pages) | ||
| Display/4-headline | Headlines on Mobile (e.g. Page title and Section headlines) | ||
| Display/5-headline | Small headlines on Mobile (e.g. Headlines within Modals) | ||
| Display/1 | Only used in exceptional cases | ||
| Display/2 | Large headlines on Desktop | ||
| Display/3 | Medium headlines on Desktop (e.g. Section headline) | ||
| Display/4 | Small headlines on Desktop, Large headlines on Mobile | ||
| Display/5 | Medium headlines on Mobile (e.g. Section headline) | ||
| Display/6 | Small headlines on Mobile | ||
| Display/6-medium | Titles | ||
| Display/7-medium | Small titles | ||
| Body-lg | Large copy | ||
| Body/body | Default copy size | ||
| Body/sml | Small copy | ||
| Legal | Legal text |
Text alignment
Text alignment depends on the page layout but is generally centre-aligned. Text boxes span full width across the grid (minus margins), except for viewports that use a 12 column grid — there the text should span over the centre eight columns only.
Text that runs over more than three lines, should be left-aligned as it improves readability and makes it easier for the eye to find the start of the next line. For example this is done with all legal text, and text that consists of multiple paragraphs.
Paragraph spacing
Copy should always be concise, which is why paragraph spacing rules are not required. Instead, we use spacers to break up different font styles. If you need to create a paragraph space, we recommend h16px for body. This isn’t a hard and fast rule and should be reviewed and suitable within the context of the design.
Note: This information is also in the Spacing section of this document. If updated, it should be consistent in both sections.
Capitalisation
Sky generally uses sentence case.
Don’t use all caps, as it is difficult to read and looks aggressive. It is also problematic with screen readers, as it may interpret all capital text as an acronym and may read it as letters rather than words.
Contrast
For text, the AA standard requires a 4.5:1 colour contrast between foreground and background. In a mobile context a 7:1 contrast is recommended due to changes in environment and glare.
Disabled states, and large/bold texts don’t need a 4.5:1 contrast. For large text a contrast of 3:1 is sufficient. Large text is defined as 24px at a normal weight, or 19px in bold.
Test your text against backgrounds and gradients at the point of minimal contrast. Proper contrast must be ensured for at least one pixel around each letter.
Gradients
Gradients are not to be used for typography.