Typography

[davidhunter08]

Use this issue to discuss typography in the NHS digital service manual.

[devansXD]

In information dense interfaces there is a need to display smaller text so users can scan efficiently, and more information can be displayed on screen. This is particularly relevant within case working and admin facing systems.

We are now in the later phase of user testing, and based on user feedback, we would like to be able to modify the text, to create a baseline of 15px;

[davidhunter08]

Heading captions need to get documented in the service manual..

See original issue:
#90

[davidhunter08]

#252

[davidhunter08]

Do we need guidance on using smaller headings (nhsuk-heading-l) on questions pages?

See the GOV.UK Design System heading guidance

[sarawilcox]

Is this on our radar? GDS visual improvements to links: https://twitter.com/GDSTeam/status/1412780948450652163?s=20?

[sarawilcox]

Some recent comments on the GOV.UK typography issue: alphagov/govuk-design-system-backlog#64 (comment).

This is also relevant to our conversations about external links and punctuation in hint text.

[sarawilcox]

The NHS.UK team has done some initial reworking of the H4 heading which is very similar to H3.

[sarawilcox]

GOV say “In 2023 we will be reviewing and improving our typography standards to make sure they’re up-to-date and as accessible as possible for users and service teams.” (https://designnotes.blog.gov.uk/2022/12/12/making-the-gov-uk-frontend-typography-scale-more-accessible/)

In the meantime, they say: “Avoid using font sizes below 16px in your designs”.

[anandamaryon1]

Comment copied from (nhsuk/nhsuk-frontend#926 (comment)).

Bug Report

What is the issue?

An accessibility audit of our site has flagged the following non-compliance with WCAG Level A: 1.4.1 Use of Colour. The contrast ratio of Links ($nhsuk-link-color) to Body Text (#212b32) is 2.26:1

WCAG Success Criterion Success Criterion 1.4.1 Use of Colour (Level A): Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

WCAG Sufficient technique G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them

What steps are required to reproduce the issue?

Go to any site that uses links, e.g.: https://www.nhs.uk/

What was the environment where this issue occurred?

Can be observed on all desktop devices including macOS Sonoma and Windows 11.

Is there anything else you think would be useful in recreating the issue?

This is a core NHS style component; flagging this issue for your consideration

Reply from service manual team:

Hi @hiten-livi thank you for sharing your findings.

The link text is distinguished by an underline and therefore doesn't rely solely on colour to communicate that it's a link. Our link stying has been through a number of accessibility audits before and passed.

I've copied your comment over to our issue on typography styling (#1) to make sure we're monitoring this.