Whatever your website is about, the most important information on it is likely found in the written content. But typography is often overlooked when thinking about accessibility and inclusive design. Below are a few steps you can take to help make sure your content is as accessible as possible. Remember, while you can follow these rules as guidance, it’s no substitute for testing your designs with real-world people with lived experience.
1. Use responsive font-sizing, like Rem or Em
It may be tempting to code your font-sizes in px to ensure that your designs always look as intended. But this can cause real issues for people who need to adjust the font size for them to be able to read it.
Your users could have any kind of visual impairment, either from a condition, near-sightedness, or just getting older. There are many reasons for someone needing to change the font size. When you code your font sizes in px, the size of the text is hardcoded. This means that nothing in the settings will allow users to make the text smaller or larger.
Instead, you should be using either Rem (relative to the document) or Em (relative to the nearest parent) to make sure that people can change the font size to suit their needs. Here’s a great trick to make coding in rems easier:
- Change the font-size of either the HTML or body class to 62.5%
html { font-size: 62.5% } - Now, 1rem is equal to 10px, making coding in rems far easier. For example:
h1 { font-size: 3.2rem }is the same as
h1 { font-size: 32px }
2. Heading order matters
It can be tempting to use different heading levels (h1, h2, h3, h4, h5) according to their visual appearance and hierarchy, but this can have terrible consequences for both accessibility, and SEO rankings.
Different heading levels should be used to indicate the hierarchy of content, not of design. There should be one h1 for the title of the page, h2 for headings one level below the main page title, h3 for sub-headings within an h2, and so on. This useful guide from Nomensa explains exactly how to use headings properly.
If you’re used to designing with different heading levels as a style guide, then one trick you can use is creating equivalent classes, e.g.
.h1 {
font-weight: bold;
font-size: 4.8rem;
}
.h2 {
font-weight: bold;
font-size: 4.8rem;
}
3. Use common sense when choosing a font
There are hundreds of thousands of fonts that exist today. They range from sans-serif to serifs, to slabs, display, monospace, the list goes on. But, there’s a time and place for (nearly) every font.
There are no simple rules for when to use a font or when not to, but the simple test is whether you think anyone might struggle to read it easily. Ask yourself whether your elderly grandparents or relatives could read it from a distance. Could someone with a visual impairment confidently make out the shapes? Then make sure it’s tested with as many people as possible.
Related services
To learn more about accessibility, take a look at our content accessibility workshops: