Typography
Updated in October 2026
Use font and typography styles to create clear, readable content and establish visual hierarchy in services.
Font
Roboto
Digital Health and Care Wales uses Roboto across its services.
Default to Arial if Roboto is not available.
font-family: "Roboto", Arial, sans-serif;
Headings
Use heading levels from <H1> to <H6> to create page structure. Heading levels help browsers, search engines and assistive technologies understand how content is organised. They also allow screen reader users to navigate content by moving between headings.
Use heading styles, like heading XL, to create visual hierarchy. The heading level and heading style should usually match, but page structure should always take priority.
You should:
- follow heading levels in sequence
- keep headings concise and descriptive
- not skip heading levels
- not choose a heading level based solely on its visual size
Desktop and tablet
H1- Heading XL
Use for the main page heading. Only use one H1 per page.
- Roboto
- 48px
- Bold
- Line height: 54px
H2 - Heading L
Use for major page sections.
- Roboto
- 36px
- Bold
- Line height: 42px
H3 - Heading M
Use for subsections within larger content sections.
- Roboto
- 26px
- Bold
- Line height: 32px
H4 - Heading S
Use for smaller content groups and supporting sections.
- Roboto
- 22px
- Bold
- Line height: 33px
H5 - Heading XS
Use for component-level headings where additional structure is needed.
- Roboto
- 19px
- Bold
- Line height: 28px
Mobile
H1- Heading XL
- Roboto
- 32px
- Bold
- Line height: 38px
H2 - Heading L
- Roboto
- 27px
- Bold
- Line height: 33px
H3 - Heading M
- Roboto
- 22px
- Bold
- Line height: 29px
H4- Heading S
- Roboto
- 19px
- Bold
- Line height: 27px
H5 - Heading XS
- Roboto
- 16px
- Bold
- Line height: 24px
Body text
Desktop and tablet
Body
Use for primary content and paragraph text.
- Roboto
- 19px
- Regular
- Line height: 28px
Body S
Use for supporting content and secondary information.
- Roboto
- 16px
- Regular
- Line height: 24px
Body XS
Use for metadata, timestamps and other supplementary information.
- Roboto
- 14px
- Regular
- Line height: 20px
Mobile
Body
Use for primary content and paragraph text.
- Roboto
- 16px
- Regular
- Line height: 24px
Accessibility
- Use heading levels in the correct order to create a meaningful content structure and support navigation for screen reader users. This supports WCAG 2.2 Success Criterion 1.3.1: Info and Relationships (Level A).
- Ensure text can be resized up to 200% without loss of content or functionality. This supports WCAG 2.2 Success Criterion 1.4.4: Resize Text (Level AA).
- Maintain sufficient contrast between text and background colours to ensure content remains readable. This supports WCAG 2.2 Success Criterion 1.4.3: Contrast (Minimum) (Level AA).
- Ensure text reflows correctly across screen sizes and zoom levels without requiring horizontal scrolling. This supports WCAG 2.2 Success Criterion 1.4.10: Reflow (Level AA).