Heading

Headings provide hierarchical structure to content, allowing users to quickly understand and navigate information on a page.

When to use

Use headings to:

• Create a clear hierarchy and structure for your content

• Help users scan and navigate content quickly

• Break up large blocks of text to improve readability

• Establish relationships between sections of content

• Support SEO by clearly structuring your content

When not to use

Do not use headings when:

• You want to emphasise text without creating a new section or topic (use other text styling instead)

• You need decorative text that doesn't serve a structural purpose

• You want to create visual hierarchy without semantic meaning

• You simply want larger or bolder text without indicating a new section

---

Best practice guidelines

• Maintain hierarchy: Always use headings in the correct order (H1, H2, H3, etc.) without skipping levels to maintain a logical content structure

• Be descriptive: Headings should accurately describe the content that follows

• Keep it concise: Aim for short, scannable headings (ideally under 80 characters)

• Consistency matters: Use similar phrasing patterns for headings at the same level

• Avoid orphaned headings: Don't place headings at the bottom of pages or sections without following content

• Limit H1 usage: Generally use only one H1 per page, representing the main page title

• Consider SEO: Include relevant keywords naturally, but avoid keyword stuffing

• Mobile considerations: Ensure headings remain readable at smaller screen sizes

These guidelines are derived from established content design principles and accessibility standards for government websites, including those from the Australian Government Style Manual.

Variations

---

Accessibility

This component meets WCAG 2.2 AA accessibility guidelines, with the following key results based on the Accessibility Assessments file:

WCAG Criterion	Level	Status	Notes
1.3.1 Info and Relationships	A	Pass	Headings are properly marked up to convey structure
1.4.3 Contrast (Minimum)	AA	Pass	Heading text meets the minimum contrast ratio of 4.5:1
1.4.4 Resize text	AA	Pass	Headings remain readable when text is resized up to 200%
1.4.12 Text Spacing	AA	Pass	Headings remain visible/readable with adjusted text spacing
2.4.6 Headings and Labels	AA	Pass	Headings accurately describe topic or purpose
2.4.7 Focus Visible	AA	Pass	Focus is visible when navigating using a keyboard

All tests for link headings also pass accessibility requirements, ensuring that interactive headings are properly accessible.

Security

No specific security considerations apply to this component as it is primarily presentational and does not process user data.

Component inspiration and uplift

This atomic element has been modelled after the Headings component in the former Australian Government Design System (AGDS). CivicTheme has uplifted the component in the following manner:

• All headings use the commercial-free Lexend font family as the primary web font, designed with variable, extended scaling to improve reading fluency and character recognition

• Supports a complete hierarchy from H1 to H6

• Headings are available in two states: default (without link) and link (with link)

• Previous styling included display headings, which have been removed in favour of a more logical H1-H6 structure that aligns better with SEO principles

• Simplified states by embedding the Link component inside Heading when needed, which automatically applies link interaction states to the Heading

These uplifts align with the Digital Service Standard requirements for clear, accessible content structure (Criteria 3: Leave no one behind) and build trust in design (Criteria 5) through consistent, recognisable patterns.

---

Research on this component

★★★★☆ Confidence rating = High (Informed by extensive testing and established patterns)

While specific user research data isn't available exclusively for the Heading component, this component benefits from extensive research and established patterns in digital content design. Headings represent one of the most well-researched elements in digital interfaces.

Research consistently shows that:

• Users scan content rather than reading word by word, making properly structured headings critical for comprehension

• Clear heading hierarchy significantly improves information findability

• Screen reader users heavily rely on headings to navigate content efficiently

• Properly structured headings improve SEO performance

The component follows established best practices derived from extensive government and industry research into content readability and accessibility.

Known issues

• Responsive consistency: When headings wrap to multiple lines on mobile devices, the visual hierarchy can sometimes appear inconsistent, particularly with longer headings

• Alignment variations: In certain contexts, heading alignment (left, center, right) may cause readability issues if not applied consistently

• Heading links: When headings contain links, users sometimes have difficulty identifying the clickable area, particularly when only part of the heading is linked

More research needed

More user research would be beneficial in the following areas:

• Optimal heading sizes and spacing across different device types and screen sizes

• User preferences for heading styles in different content contexts (formal documentation vs. news content vs. service content)

• How heading styles impact reading comprehension and retention for different user groups

• The effectiveness of various heading formats in multilingual contexts

Help improve this component

To help make this component useful and up-to-date, you can:

• Contribute to discussions about heading implementation on the CivicTheme GitHub repository

• Submit examples of effective heading implementations on your CivicTheme site

• Propose improvements to the heading styles or structure based on user research

• Report any accessibility or usability issues you encounter with this component

Check out our contributing section to learn more.

---

Resources

• Figma

• Storybook

• GitHub

References

• Australian Government Style Manual. headings and subheadings

• W3C Web Accessibility Initiative. headings

• Nielsen Norman Group. How Users Read on the Web

• Lexend. Reading research

Changelog

Version	Date	Changes
1.0.0	Initial release	Base heading styles established
1.7.0	2024-03-20	Updated to support WCAG 2.2
1.8.0	2024-07-23	Renamed "Headings" to "Heading" component

Contact us

If you have a question about the CivicTheme design system or need our help, visit the Getting Help page for guidance.