According to the CDC, over 61 million adults live with some form of disability in 2024. As those stats rise in conjunction with the rising numbers of people using the internet, it has never been more critical to offer an accessible experience online for all consumers.
Did you know that only 3% of the web is accessible to all users? As brands choose flashy graphics over inclusive design elements, they could lose their leads rather than gain them.
When it comes to creating engaging graphics, the choice of font is one feature that is often overlooked during the UX/UI design process. Not only does this significantly impact the readability of your graphics and the accessibility of your website, but it is also easy to change for a more inclusive experience.
With that in mind, we’ve compiled a guide on optimizing font use for more accessible UI design in 2024.
Why Is Your Font Important For Graphic Design?
Your graphic design is one of the first elements a potential lead engages with when they encounter your website.
Whether you’re working on website banners, infographics, or your site’s general UX design, to offer the best experience possible, you should ensure that all elements are well structured, easy to read, and use a font that can be accessed by those of all cognitive and visual abilities.
With over 32 million Americans experiencing vision loss in 2024, your font choice should be well thought out and remain customizable in color and size for all readers.
“The text within a website is the key to communicating with the user. It establishes the purpose that drives conversion, providing the information that motivates users to visit the site and gives them a call to action,” says Goran Paun, Creative Director of ArtVersion, a Chicago design consultancy. “Because text is so influential, it must be readable. Although that may seem to be an obvious consideration, there are many sites whose text causes difficulties for users. Everything from the site's structure to the fonts used within it can significantly impact the user's readability.”
Here are some of the benefits you could see when switching to an accessible font:
- More Engagement: One of the most significant changes you’ll see when switching to an accessible and adaptable font is a spike in site engagement. If your content is legible for more consumers, they are more likely to interact with your brand and recommend it to others in the same community.
- Lower Bounce Rate: When your site's graphic design elements are inaccessible, consumers quickly bounce to the nearest competitor. Personalizing your landing page to include audiences of all abilities will encourage browsers to spend more time on your site.
- Improved Industry Authority: Brands that prioritize inclusivity in their UX and UI design often gain a better reputation. Suppose your brand is accessible to consumers of all abilities. In that case, a rise in engagement will tell Google that you are an authoritative player within your industry, which could result in a higher ranking.
- Adaptable Design: Choosing an accessible font, such as Verdana or Helvetica, easily scaled across numerous devices could help improve your omnichannel fluidity. If your font can be read on smaller smartphone screens and larger desktops, you’ll open your brand up to consumers tapping in from any device.
- Less Competition: Only a small number of websites online are currently ranked as fully accessible, so introducing a fully accessible font to your graphic designs puts you ahead of the curve. For example, if your website is the only one within its niche that has graphic elements with a font that a screen reader can read, you open up your business to a whole new group of consumers that your competitors can’t serve.
While making your font accessible is a good thing, we must remind you that it is also the law in the US to use a font that all users can access. If not, your business could be penalized, such as a fine or a lawsuit, if you breach the Web Content Accessibility Guidelines (WCAG).
“The World Wide Web Consortium (W3C) has developed the Web Content Accessibility Guidelines (WCAG) to help make websites more accessible. These guidelines provide a set of standards for web developers and designers to follow when creating websites,” says accessibility expert Lesa Seibert.
“Some steps you can take to align with these principles include prioritizing clear and simple language, avoiding jargon, and providing ways to help users find and understand information.
By following the WCAG guidelines, business owners, web developers and designers can ensure that their websites are accessible to all users. This can help to create a more inclusive and user-friendly web experience for everyone.”
What To Consider When Choosing an Accessible Font
Choosing an accessible font takes time and practice. Instead of picking the best-looking text font on the shelf, the most accessible font is usually the plainer alternative without all of the bells and whistles.
Accessible fonts must be legible, multi-device accessible, and have an optimized height, weighting, and spacing between each letter.
“Choosing fonts with high legibility, ample spacing, and clear distinctions between characters is essential to accommodate users with visual impairments. Additionally, ensuring proper contrast between text and background colors is crucial for users with color vision deficiencies,” says Jess Andrews, Powerplatfrom Developer on Linkedin.
Here are some key things to consider when choosing your font:
Font Size and Legibility
The first factor to think about when choosing a site font is legibility. How readable is the font?
Legibility has several components. These factors include font size, height, and contrast against the website's background.
For accessibility beginners, the general rule of thumb is to choose a font of at least 16 pixels at its smallest on the screen.
If you’ve ever experienced that random zoom effect when engaging with an infographic or an online form field, this is often due to the font size on a graphic being less than 16px. Apple devices, for example, have a 16-pixel accessibility rule that automatically enlarges designs that do not fit the bill. If you want to reduce the chances of losing part of your design to an automatic zoom, ensure that your font size is prioritized during the creation process.
Legibility on Different Devices
While you may have optimized the size of your font on your desktop website, have you checked how it translates on your mobile site?
With more than 64% of searchers coming from a mobile device, your smartphone UI should be seamless when it comes to creating adaptable graphics.
The key here is to create a scalable design where your text can scale up and down depending on the screen size. That is why you must choose a font that is well-read by all devices and screen readers and is easily scaled, large and small.
Color and Contrast
Another challenge several UX designers face is how their font colors pair with the other elements of their graphic design.
You need enough contrast between your text and your background for a font to be legible to your audience. This is why most designers choose black or white to help their users distinguish text from the background easily.
According to WCAG guidelines, headings should have a contrast ratio of at least 3:1, while the body text should have a maintained contact rate of 4.5:1. If you follow this template, a large proportion of your website browsers should be able to engage with your content.
Serif or Sans-Serif?
Now you know how to choose a suitable font for your graphic designs, let’s look at some of the options.
Fonts come in two forms: Serif and Sans-Serif. Sans-serif is the plainer form of the two, while Serif fonts come with ‘serif’ embellishments, as you can see in the example below.
Serif fonts have historically been harder to read, as their flourishes, albeit pretty, can make the text less legible at a smaller scale. However, there are still plenty of Serif fonts that are considered accessible.
Serif fonts are predicted to come back as one of the biggest graphic design trends in 2024, so they are certainly one to watch.
You should choose between Serif and Sans-Serif based on your target audience.
For example, suppose you’re designing a new logo. Depending on what message your brand wants to convey, you may choose a more professional Sans-Serif font or a more creative Serif approach.
Sans-Serif fonts can be easily scaled and are quickly scannable for a more professional industry approach.
However, for brands specializing in certain creative outlets such as graphic design or fine art, Serif fonts may aid their branding and embellish their landing page design.
With this in mind, here are seven Serif and Sans-Serif fonts to choose from when designing graphics for an accessible website.
Arial (Sans-Serif)
First up, we have Arial. This Sans-Serif font is well known for its high x-height and brilliant distinction between letters. For this reason, it is one of the most well-known fonts on the planet.
Arial is fully compatible with all accessible screen readers, rendering it the best choice for those with vision impairment.
Verdana (Sans-Serif)
Next up, we have Verdana. This is a brilliant on-screen font as it is still readable in a small size on a low-resolution screen.
As a font with one of the largest spacings between the characters, it is brilliant for on-screen typography.
IKEA is a tremendously notable brand that uses Verdana for its simplistic style and device-wide legibility.
As you can see here, each letter is the same height and weight, making it a brilliant, uniform font for larger chunks of written content.
Times New Roman (Serif)
Times New Roman is one of the oldest fonts on the block. As the figurehead font for Microsoft Word in the early 2000s, many of us will know the look of these letters by heart.
While it is mainly used in print media today, experts suggest that it will be one of the best HTML fonts to use in 2024.
Times New Roman is a brilliant educational font style that is well-accepted by all screen readers on the market.
Organetto (Sans-Serif)
Next up, we have Organetto. This accessible font is mostly used for brand logos, thanks to its all-upper-case lettering and bold exterior.
Designed by Latinotype, this sans-serif font is inspired by Art Deco. But what makes it so accessible?
While capital letters can take longer to read, they often stand out against a page, aiding visually impaired consumers in identifying titles and headings when reading more significant chunks of text.
Erinesans (Sans-Serif)
This font family is a brilliant addition to a modern graphic design. While it has grotesque characteristics, making it part of the Sans-Serif family of fonts, it is also highly adaptable.
Not only are there five unique versions of the Erinesans font, but it also prioritizes functionality even in italic form. Erinesans is narrower than other accessible fonts but has been rated a top choice by a number of UX designers, especially for mobile-based content.
Baskerville (Serif)
Next up, we have Baskerville. This traditional Serif font was created in the 18th century and is still being used today by a number of large brands like Kate Spade.
What we like about this font is its transitional style. It’s the perfect balance between a traditional and modern style font. With a refined exterior and a great contrast between thick and thin strokes, it’s easy to read while still offering an intellectual aesthetic.
This makes Baskerville perfect for headings, brands that want to convey the message of high end quality and educational graphics with a historical twist.
Century Gothic (Sans-Serif)
Most of us have used Century Gothic before, however, did you know it has recently been a top choice for tech-focused or minimalistic graphic design?
With a powerful geometric style, Century Gothic is easy to read and scan. Its clean exterior and slightly taller proportions optimize the visual experience.
Century Gothic is best used in contemporary graphic design thanks to its use of geometric shaping and its wide open field. If you’re going for a futuristic vibe, this could be a brilliant, accessible choice.
Book Antiqua (Serif)
If you’re looking for a formal font for historical graphics or a design set in the past. Book Antiqua is a great accessible choice.
Book Antiqua is a narrow Serif font that still promotes easy reading. As a fonte that can be scaled up and down with ease, this renaissance inspired typeface is the perfect addition to a brand that is focused on traditional craftsmanship, dark academia and literary topics.
OpenDyslexic
Last but not least, let’s discuss OpenDyslexic. This typeface is a relatively new phenomenon in the font world. It is used by websites hoping to make their content more legible to those with dyslexia or other cognitive impairments.
OpenDyslexia is a free font with bold lowercase characters and a much wider spacing of letters to help make text easier to read.
While it is not often used in traditional branding, it is starting to become more common as an optional typeface that users can switch to when viewing online content. As accessibility becomes prominent in the graphic design scene, it could be time to start offering a dyslexia-friendly font option for your consumers.
Wrapping Up
As we step into a new era of online accessibility, switching up your font is the first step towards a more inclusive future for your audience.
Brands that provide an accessible consumer experience will likely yield higher conversions, loyal connections, and a shining reputation in a customer-dominated market.
