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.
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).
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.
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.