dxw Accessibility ManualSetting accessible body text and headings
Text settings can make content more accessible and easier to read.
Font size #
Set font size for body text between
- 18-22px for desktop
- 16-18px for mobile
The size of heading text depends on
- where it comes in the content hierarchy - is it h1, h2, h3?
- the size of the body text - is there enough difference between font and heading sizes?
Line height #
Line spacing can cause issues for users:
- too little spacing between lines can cause eye strain
- too much spacing between lines makes text hard to read
Line height should be between
- 1.3 and 1.6 for body text, with larger heights more suitable for larger screens
- 1 and 1.2 for heading text
Line length #
A line of text should have a maximum of 45-75 characters, including spaces.
Lines of text longer than this can be difficult to read and can cause difficulties for users who
- have dyslexia or a low reading age
- have visual impairments
- are using a phone or smaller display
Headings typically use the same container width as body text. If the heading text is very large and the line length is too short you may end up with headings that span multiple lines. Reduce the heading size if you cannot change the line length or rewrite the heading.
Combining font size, line height and line length #
Font size, line height and line weight are linked. Adjusting any of these can change the accessibility of the others. When you make a change, check how that change affects the balance with the other elements.
For example, if you reduce the size of text from 22px to 18px the number of characters per line will increase unless you change the container width.