
Accessibility is all about making your content as consumable as possible for people with blindness, reading or cognitive disabilities, or visual impairments. However, simply choosing an accessible font is not enough to guarantee web accessibility. You also need to plan how the fonts will actually be styled on a page. Here are a few typography tips to make your content more accessible.
Font size
First things first, you should ideally pick a font that performs equally well whether it’s small or large. However, keep in mind that sizes can vary hugely between fonts, for instance, 14px in one font can be equivalent to 18px in another. Most websites keep font size between 14px and 16px. Anything above 16px is considered inclusive. Even if you have picked an inclusive font, some of your visitors may need to make the text larger or smaller for more readability. This is why you need to allow your visitors to increase or decrease text size without having to zoom in. Another consideration when choosing your font size for logo is to make sure that your text is properly displayed on all device sizes. Last but not the least, use minimum font variations such as italic, bold, ALL CAPS or other styling methods since they make your content harder to read for some audience.
Font Color
Like all visual elements, your text must have adequate contrast. Grey text against a white background can be impossible to discern, especially if the font weight is light. On the other hand, white type on a dark background appears conspicuous. This means that you should make sure that your type has a contrast ratio of at least 3:1 against the background, in order to reduces cognitive strain and confusion and makes designs easier to understand. When choosing font colors, you also have to be mindful of your color-blind audience since at least 10% of your audience has some variant of color blindness, suffer from low vision, or are completely blind. For instance, color-blind individuals cannot see red and green, so avoid using these colors in your font. Whenever possible, avoid gradients and use solid color backgrounds since they promise maximum legibility. Last but not the least, do not use color as the only indicator to convey info to your users. For instance, instead of using blue text to denote hyperlink, make sure all your links have underlines.
Font Type
Designers often wonder whether to use Serif or San Serifs for maximum accessibility. If web accessibility is your ultimate goal, San serif family is the obvious choice since serif fonts include additional flourishes and decorative strokes, that hinder visibility for visually impaired audience. Especially if the font size is small, serif Letters may run together, even touching each other in smaller sizes. However, serif fare better for headings due to the large font size. Examples of basic and unadorned fonts include Times New Roman, Verdana, Arial, Tahoma, Helvetica, Andika, Trebuchet MS, Calibri, and Lucida Sans.
In order to ensure web design accessibility, avoid using fancy or handwritten fonts or even fonts that only have one character case available. Ornamented typeface families may appear visually appealing due to their unusual shapes, subtle curves, and artistic features, but legibility often goes out the window when you use specialty fonts. Moreover, some fonts claim to help one particular disability or another, such as dyslexia, low vision or other impairments, but may still prove to be difficult to read for others. If you want to make your website accessible to all users, you should choose a common font that a majority of web users find readable.
Furthermore, to enhance legibility and avoid confusion, websites should use as few fonts as possible. No matter which font you choose, make sure your font has distinguishable ascenders and descenders, a d/b or p/q combination which isn’t an exact mirror image, and easily differentiable Uppercase I, lowercase l, and 1. Also, kerning between r and n is important to avoid reading words like “tarn” as “tam”.
Font Proportions
Breathing space is really necessary for accessibility. Aim for a large x-height and moderate-to-wide proportions for optimum accessibility. Increasing the x-height helps you incorporate more white space inside a letter for greater definition and clarity. A lot of designers use condensed and compressed width styles for the sake of responsiveness, which while coming in handy when you are working with a narrower real estate (e.g., on mobile), also wreaks havoc on accessibility.
Line height and width
Research recommends a line height of 1.5 for body copy. This is because your eyes need to distinguish one line from the other. You also need to be mindful of the number of words/lines, because it can be strenuous to scan long lines of text. According to research, keep your line length between 70 and 80 characters and number of words per line to under 16.