Typography and font styling

Benefits of accessible fonts

Applying best practice to fonts helps aid comprehension and understanding of content for a huge range of our users, including:

• Screen reader users who rely on tag styling being correctly applied to highlight any key words or phrases.
• Users with dyslexia or low vision who may find certain letters (or combinations of letters), and styles like italics confusing to read.
• Users with cognitive and learning difficulties who benefit from specific text styling to help them find and prioritise content on the page more easily.

Correct HTML tags for bold and italics

Screen reader technology does not recognise the bold <b> and italic <i> tags which may be applied to emphasise content. These tags are automatically generated when we highlight text and change the style.

Instead, we should use the semantic markup:
<strong> and <em> tags, (which replicate bold and italic respectively).

The visual effect is identical, but only the semantic markup allows screen reader users to understand the emphasis.

Bold text

We should use bold sparingly. Large paragraphs of bold text, or bolding intermittent words on a page creates a distracting reading experience, because our eyes are drawn towards these parts more than others.

Situations where bold text is useful are:

• Buttons and links

Italics

We should always avoid using italics because it’s confusing for dyslexic users:

“… you shouldn’t use italicised text because they make letters hard to read. The letters have a jagged line compared to non-italic fonts. The letters also lean over making it hard for dyslexic users to make out the words. When the text size is small, the text is even more illegible.”

The British Dyslexia Association

Font sizing

Small text can’t be read by many users. Whilst there isn’t an official rule around font size for web, best practice suggests:

• a minimum of 14px for body text
• clear distinction in size between styles, such as headers and body.

It’s worth considering making font sizes adaptive across devices to cater for different situations, for example users on a mobile. Also, a larger font size i.e. more than the minimum, can benefit not only people with visual impairments, but can also benefit page layouts and flow.

A robust CSS

WCAG states that we need to use markup languages that allow users to customise text styles to their needs. This means that users with low vision, colour deficiencies or cognitive/learning disabilities can override the font styling in the CSS without the web page breaking or losing functionality.

The way this is measured, is that WCAG asks that specific font style overrides be applied to a final page. It’s then checked that the page hasn’t lost any content or functionality as a result of applying these overrides.

The overrides WCAG requests be implemented are as follows:

• Line height of at least 1.5 times the font size.
• The spacing following paragraphs set to at least 2 times the font size.
• Tracking of at least 0.12 times the font size.
• Word spacing of at least 0.16 times the font size.

Please note that this doesn’t mean we need to set up all of our text styles from the outset to these measurements – these are just what we then customise the text to, in order to test that we meet this WCAG.

Thinking about unit measurements

TBC

Other considerations

There are also other things to consider when looking at font styling. These don’t directly relate to WCAG guidance, but describe best practice approaches:

• Use left-aligned text as opposed to centred or justified, as this is easier to read (check our Page layouts article for further information)
• Ensure text is real text as opposed to embedded in any images or graphics – real text not only means screen readers can read this, but also that users with other needs can customise the font (our Images article has more information on real text)
• Ensure text meets colour contrast guidance (which varies depending on the size and weight of the font)