Use text styling to create typographic hierarchy throughout a page and deliver better reading and scanning experiences for users.
Editorial text styles
Use the editorial text styles to draw attention to aspects of your content. The styles below map to the current HTML text styling tags. Where possible we recommend using HTML semantic elements as they clearly describe the meaning of the content to the browser and the developer. This will also maximise the opportunity to provide accessible content.
Paragraph
The baseline body text.
Link
Link a snippet of text. The default text styling being underlined and primary colour.Small
De-emphasise inline or blocks of text.
Strong
Emphasise a snippet of text. The default text styling being a heavier font weight.
Emphasis
Emphasise a snippet of text. The default text styling being italics.
Mark
Highlight a portion of text.
Del/Ins
Show changes by marking up what has been deleted and what has been inserted.
Headings
Heading styles are not managed by the Design System, however @color-Headings variables are maintained for each brand and are mapped through; setting the appropriate heading colour for all heading elements (h1 — h6).
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
User experience
Text styling can influence decision making, bring attention to something, assist users to navigate a page when scanning, and build trust. This is achieved through an understanding of typographic fundamentals such as type scale and hierarchy, positioning and signposting, when to use which font or typeface, and any digital nuances.
Visual design
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.
| Platform | Status |
|---|---|
| GEL Design System | Available |
| Mesh UI | Available |
| Legacy WDP | Available |
Related information
Components
Articles
Typography
Why we've done it, how it works and why you should use it. Read about typography.
Multi-brand
Strategic approach to digital brand management and delivery. Find out how to think multi-brand.