The importance of typography as part of accessibility
- Alice Jordan
- May 26
- 3 min read
There are basic design principals we should all try to follow as developers, such as: clear navigation, trying to keep content concise, not overloading the user with information, consistent fonts, etc. In this blog, we are going to focus on typography in design.
Typography refers to the design of text, it can influence whether you would even consider reading a page; as well as building a brand, and keeping a consistent visual through your website and beyond. Most importantly, typography is part of accessibility, and if designed well can improve user experience for all.
Headings
Heading tags should only be used for headings, not to simply increase or decrease font size. This is important as those using screen readers need to be able to distinguish between a header and paragraph content. Properly ordered heading tags offer a table of contents, outlining sections of the page - enabling users to easily navigate between.
Use the <h1> tag to describe the main heading of the page, <h2> for a sub-heading and so on. If you were to want to have a large paragraph for whatever reason, you can use CSS to increase the size of it instead of a heading tag.
There may be a case where a heading caption is needed to make it clear the page is part of a group. This can be done in a <span> tag above the heading tag, or as part of the heading where it is nested within the <h1> tag.
Styling
Styling is a personal or brand choice, but here are some basic guidelines to help you choose with accessibility in mind. There should be 1-3 fonts maximum, avoid over styling as it reduces readability. A line height of 1.5 is most common. As mentioned above within the headings section, hierarchy should be followed in page design, larger bolder fonts for headings and smaller fonts for paragraph text.
Sentence case
As users, we are generally used to seeing title case over sentence case, so it can seem a little jarring at first. I was taught in school to use title case, so I have done so ever since. But research shows that sentence case is easier to read and navigate and has been included in design guidelines by Google, GOV UK, USA GOV.
Sentence case only capitalises the first word and proper nouns e.g. “The importance of typography as part of accessibility”. Where as title case capitalises every major word e.g. “The Importance of Typography as Part of Accessibility”. Sentence case would apply to any text on the webpage, below is an example from a HR application, as you can see the heading, tabs, and page fields are all in sentence case.
Links
Generally links should be blue and underlined, as is universally known, so users can immediately understand it is a link. If the background is dark, or similar colour, best to opt for a contrasting visible colour for the link, but can still be underlined so remains clear. Opening a link within a new tab or window should be avoided, it can cause problems for those who cannot visually perceive the new tab or window - the screen reader may not inform the user that a new window or tab has been opened. If it is essential to do so, the link should include reference to opening in a new tab.
If you want to find more information on accessibility and how you can improve your website design, head to our other blogs:
Look for other accessibility guidelines in the Web content accessibility guidelines provided by GOV UK.
Good typography requires small changes, but has a big impact on users who have accessibility requirements. If you write and design with accessible typography in mind, your applications and documents will be more readable, easier to understand and more memorable to a wider audience from the beginning.
