Headings

Use headings to create a clear hierarchy of information for users.

Dos

• Use Ubuntu for heading font families
• Use bold font weight for headings
• Use sentence case format
• Adjust the type scale based on the hierarchical context
• Adjust the scale as required and ensure headings work on various screen sizes
• Use the correct markup, for example h1 to h6, to create the page hierarchy

Don'ts

• Avoid using headings as taglines or slogans
• Avoid using more than 80 characters for headings
• Avoid using underlines for headings
• Never use tooltips in headings

Heading whitespace

Each platform has specific guidelines for spacing values between headings and content, as well as other components.

The spacing remains consistent: close enough to create visual grouping, yet with sufficient whitespace to enhance readability and clearly display the content hierarchy. If a platform lacks guidance, use the layout distances as a starting point.

When working with the React Native platform, use the specific component stacks that wrap typography.

Accessibility

Classes or component props adjust heading sizes to be larger or smaller. This allows more flexibility in creating a hierarchy.

When using headings in forms for labels and legend tags, follow the guidance in the forms overview.

                                                        
                                                        
                                                            // Example of setting an h2 to the same size a body copy
                                                        
                                                        // Web
                                                        <h2 class="co-fs-md">Heading</h2>
                                                        
                                                        // React Native
                                                        <Heading level="2" size"md">Heading</Heading>
                                                        
                                                            

Writing headings

Headings and subheadings should summarise the content that follows.

Aim to make the page glanceable – so a user can understand the key points without reading any body text.

That means short, narrative headings that capture key details. For example, ‘25% is normally tax-free’ is a better heading than ‘About tax-free amounts’, because it captures more information.

Follow these rules:

• Use sentence case
• 80 characters or less
• Descriptive and narrative
• Avoid filler words like ‘please’ or ‘an’
• Questions can work well, but can backload key info

Example 1:

Example 2: