Be honest – which takes longest: writing the text, or choosing the font?
For the professional procrastinators amongst us, the overwhelming choice of fonts available today is enough to keep us busy until retirement! But it’s an essential part of any design project, and choosing the perfect font is a crucial task, one with long term implications.
Ultimately, the right font should be easy to read, accessible, and appealing.
However, having to choose from 200,000+ different fonts can be a daunting task – especially if you don’t know what to look out for.
Fortunately, we’re here to assist you with that.
In this article you’ll discover exactly what to look for when choosing a font for a design project (and what to avoid).
You’ll also learn precisely what makes a good, accessible, and easy to read font – and you’ll even walk away with our list of the top recommended fonts for your design work!
Let’s jump in!
Decoding the Serif vs. Sans Serif Dilemma
The Serif vs. Sans Serif dilemma revolves around the choice between fonts with or without decorative strokes at the ends of characters.
Here’s an example of both of them, so you can see the difference between the two.
Source: New England ReproGraphics
Both styles of font have their benefits, and recommended uses, so let’s explore what these are.
Using Sans Serif Fonts for Headings And Emphasis
Headings need to grab attention. They need to be eye-catching, and extremely easy to read and scan quickly.
It’s for this very reason that sans serif fonts were first developed, and as they have a much simpler structure, with no decorative strokes or flourishes, they do work better for titles, headings, and subheadings.
Popular sans serif fonts for headings include Helvetica, Futura, Verdana, Calibri, and Arial.
Improving Readability in Smaller Text With Serif Fonts
Although sans serif fonts are easily legible from even quite a distance away, when it comes to blocks of text, the simplicity and uniformness of the fonts can actually interfere with the readability.
Serif fonts provide much greater legibility for text that is written in a small font size, and when written as blocks of text (such as paragraphs, or columns).
Popular serif fonts for smaller text include Baskerville, Cambria, Garamond, and Times New Roman.
The Best Fonts for Desktop Websites
The best fonts for desktop readers should consist of these main qualities:
- Readability and scalability. Fonts for desktop websites should be readable across different screen sizes and resolutions.
- Device compatibility. The chosen fonts should be supported across various desktop browsers and operating systems.
In essence, these fonts should strike a balance between aesthetics, readability, and technical compatibility.
For these reasons, the safest fonts to use include:
Serif
- Times New Roman
- Georgia
- Baskerville
Sans Serif
- Arial
- Helvetica
- Roboto
The Best Fonts for Mobile Websites
Most of the traffic on the internet today comes from mobile devices – with 64% of all searches being conducted on smartphones.
That’s why it’s vital to focus on providing the best mobile user experience.
When choosing fonts for mobile websites, you should keep these considerations in mind:
- Readability on small screens. Prioritize fonts that have excellent readability on smaller screens. Sans serif fonts often perform better than serif fonts in such cases.
- Responsive and scalable. Choose fonts that scale nicely across different mobile devices and screen orientations.
- Clear and crisp appearance. Pick fonts that are easy on the eyes even with quick glances (since many mobile readers are on the go).
We would recommend choosing mobile-friendly web fonts, such as these sans serif fonts recommended by services such as Google Fonts, which are designed for mobile compatibility and fast loading times:
- Arial
- Helvetica Neue
- Roboto
- Nunito
Note: We left out serif fonts deliberately, because the decorative strokes (‘serifs’) can make them difficult to read on smaller devices.
Can Screen Readers Have Trouble With Some Fonts?
Yes, in fact they can!
Some fonts are the very opposite of accessible, and may prevent screen readers from being able to vocalize the text.
Although all common letters and symbols appear on your keyboard, and are therefore encoded using a system known as ASCII, this system can only support up to either 128 or 256 different types of characters.
An alternative character encoding system known as Unicode can support up to 1,114,112 characters, including emojis, and characters from many different languages, as well as mathematical and scientific symbols.
Many screen readers cannot interpret many of these, and will either miss them out entirely, or replace them with the wrong letter or character, often resulting in verbalized text that makes no sense at all.
A recent survey by WebAIM showed that, of the people surveyed, 14% relied on a screen reader to access content online.
Can your business afford to ignore the needs of that many potential customers?
Here are a few other issues that can make it impossible for screen readers to read your text:
- Complex decorations. Fonts with excessive decorations can confuse screen readers, since they may struggle to interpret them.
- Poor spacing. Fonts with inadequate spacing between characters can make it difficult for screen readers to interpret the text.
- Non-standard character shapes. Fonts that deviate significantly from standard letterforms might be challenging for screen readers.
While there are thousands of these out there, the most popular examples of fonts that are unreadable for screen readers include:
- Vivaldi
- Papyrus
- Mistral
- Brush Script
- Ravie
Make sure to avoid these for the sake of accessibility.
Some Fonts May Have Issues When Translated
Some fonts can’t be translated into different languages.
If you do try to translate such fonts, you’ll usually encounter a font substitution – with another font replacing any unsupported characters.
This looks unappealing and very unprofessional.
Here are additional issues that can arise with fonts during translation:
- Glyph variations. Fonts may lack support for certain characters or glyphs required in different languages or writing systems – so they won’t show properly.
- Character width and alignment. Fonts with varying character widths or inconsistent alignment might cause text to display differently when translated.
- Script complexity. The translation might not fit well within the original design, leading to visual inconsistencies or legibility problems.
That’s why you should always test your fonts beforehand.
You can prevent this by looking at the supported characters of the font of your choice.
Recommended fonts for content that may be translated include:
Serif
- Arial
- Times New Roman
- Noto Sans
Sans Serif
- Verdana
- Georgia
- Tahoma
Addressing the Needs of Dyslexic Visitors
Around 1 in 10 people are dyslexic.
With 5.3 billion people on the internet, that means that around 530 million people potentially browsing your website have dyslexia.
This is why it’s vital you ensure your website is readable to people who struggle with dyslexia. This starts by using fonts that enhance readability and minimize visual stress.
Here are a few tips that can help you choose the right fonts for such readers:
- Open and clear letter forms. Fonts with clear distinctions between characters help reduce confusion. Letters such as ‘b’, ‘d’, ‘p’, and ‘q’ should be easily distinguishable.
- Consistency. Fonts with consistent character shapes and minimal variation in letterforms enhance readability.
- Sufficient spacing. Fonts with adequate spacing between characters and words improve legibility and reduce visual crowding.
Of course, there are some fonts you can use that are tailored specifically to dyslexic readers such as Open-Dyslexic, and if you want to make your site more accessible, we recommend looking into them!
For meeting the needs of your dyslexic visitors we would recommend:
Sans Serif
- Dyslexie
- OpenDyslexic
- Lexie Readable
Note: Since readability is the #1 priority with dyslexic audiences, it’s recommended to use sans serif fonts such as Arial and Comic Sans since they don’t include decorative elements.
Conclusion – Make Your Site Accessible And Readable
The right fonts will make it very easy for your audience to consume your content – no matter whether they’re dyslexia or visually impaired.
To learn more web design tips, check these resources below:
- How to Improve Website Accessibility
- The Power of Pair Design — What It Is & How It Works
- What Is User Centered Design & Why It Matters
Are you a designer looking for a better way to collaborate with clients?
With Atarim, you can leverage point-and-click collaboration to enable clients and stakeholders to point at what they’re referring to on any live web page, and immediately leave feedback, say what needs to be changed, and so much more.
Plus, you can also create milestones, divide them into tasks, and monitor performance.
If you want to receive feedback that makes sense, make it easier to collaborate with clients, and finish projects in days instead of weeks, sign up to Atarim today – with paid plans from just $20 per month.
- Integrated into the leading visual collaboration platform trusted by 13,000+ agencies (web dev, design, and beyond) worldwide.
- Supporting project delivery for 1,200,000+ of their clients and stakeholders.
- Deliver projects in days instead of weeks.
