Legibility: 7 Typographic Tools To Create Readable Screens
Do you consider legibility important? Your users do as well. What makes a text readable? Do ugly fonts provide more legibility? Find out in this blog post.
We at this UX company consider legibility, the readability of texts, a significant factor to keep in mind when designing screens. Good typographic choices play a huge role in the design process. It can also cause a painful struggle for both designers and product owners to make a final decision about which typeface to use for a product.
In this article, we cover:
- The characteristics of a readable font, and
- 7 typographic tools that increase legibility
Legibility Step 1: Find the right font
A big chunk of our lives revolves around screens, including work, friends, family and love life. We scroll miles and read hundreds of texts each day without even noticing how much we strain our eyes with digital products using bad typography.
What typographic tools can increase the overall legibility of a text? First of all, the font.
A good font should have:
- Visual appeal
- On-screen legibility, but also
- A great fit regarding the style and personality of the brand.
But how to choose a legible typeface?
Legibility villains, heroes and finding “The One”
Most designers try to avoid the infamous typographic no-zones, villains like Comic Sans, Papyrus, Curlz etc., as long as possible.
And of course, we also have the heroes, the shining stars, ultimate winner typefaces, bulletproof choices regarding readability and aesthetics. These include Helvetica, Baskerville, Bodoni, Didot, etc.
You can base your decision on the mentioned common opinions. But don't forget to do some usability testing for readability as well.
Create easy-to-read fonts yourself?
Our brain generally prefers symmetry, harmony and balance. This goes for letters too.
If a font has off-weighting, or the shapes of the letters no consistency or balance, or the letters together do not create a harmonic impression, we will feel something as off.
Fun fact: Ugly fonts/handwriting might make it easier to memorize things. A Princeton University study found that test participants could recall more information presented in unusual / rarely used typefaces.
Creating a typeface comes easy. Anyone with a computer has the technical basics provided.
But creating a legible, aesthetic one that satisfies all of our brain’s needs proves a pretty difficult form of art. So, of the thousands of typefaces on the internet today, only a few stand out and meet the legibility and aesthetic demands.
Finding the right font does not come easy, and it sometimes even proves impossible. Perhaps branding guidelines, etc. have already written it in stone. So what other options do we have in such situations?
7 typographic tools that increase legibility
We have several other things to keep in mind when trying to achieve the best possible legibility in our product. Even lacking the best typeface in our pocket for creating our design, we have still got basic typographic tools to play around with. Let’s see…
1. Contrast: Check it with online tools
The text and background colours and the contrast between them play a huge role in readability.
Insufficient contrast will make a text a slog to read through from the beginning (such as light grey text on white). Too much (like black text on white) over a longer time may weary the eyes.
New studies have also observed that dyslexic people prefer really light colours to blank white as a background for text, as too strong contrast makes it more difficult to read.
Some great tools measure text contrast, and we definitely suggest integrating some of them into the design process (to name just a few: Webaim Color Contrast Checker ; Luminosity contrast ratio analyser ; Color contrast check ; Color contrast visualiser).
2. Font-size: Follow the web developing guidelines
Perhaps a trivial point, but finding the sweet spot of text sizes can actually prove challenging. Checking the web developing guidelines merits the effort, as they update regularly, adapting to technological changes.
We currently suggest a minimum of 14-16 pt for body text, and 12-14 pt for secondary text, keeping at least a 2 pt difference between the two.
Also keep in mind that smaller text sizes usually make a better choice for interaction-heavy pages, while text-heavy content requires bigger ones (16-18 pt body font works ideally in this case).
In general, what might fly on a desktop or a laptop screen may prove way too small on mobile, so always check the designs on a device (Sketch and Figma Mirror work great) before finalizing them.
3. Use hierarchy to structure
In the case of both text-heavy or interaction-heavy designs, always structure the content. This creates a rhythm and hierarchy so readers don’t lose interest too quickly.
Play with content structure and use different methods to break a longer text into sections. This and highlighting some parts with different text sizes, weight or colors will help the reader get through long content without getting lost in an ocean of letters.
4. Combine Serif & Sans? For higher perceived legibility
Combining serif with sans serif usually gives good results visually and also helps create a hierarchy. For a long time, people reserved sans serif for body texts in web typography for its better legibility, but much research contradicts the point.
Some research indicates a higher perceived legibility of serif typefaces, but familiarity may have heavily affected the results, as readers know serifs more from books, newspapers, etc.
One valid argument prefers sans serifs on the web, assuming the less effective digitization and rendering as sans typefaces on low-resolution screens.
If you are interested in a more in-depth summary of this debate check this amazing article.
5. Line height also impacts rhythm and style
Line spacing or line height refers to the amount of space between lines of text within a paragraph. This plays an important role in legibility. Line spacing proves just as important as the font size, as it impacts the rhythm, style and readability of a text.
If the text gets too dense, it becomes much harder to track its lines, while excessive line height may feel unnecessary and can mess up the visual hierarchy.
Users with visual impairment or cognitive disabilities have trouble tracking crowded lines of text. Well-balanced line spacing lets users run through the lines of text more easily.
Usually, the default leading sizes fall way too low and result in overly dense texts, so stick to the W3C accessibility guidelines. They suggest paragraph spacing at least 1.5 times larger than the line spacing.
6. Kerning: The space between characters
We call the process of adjusting the spacing between individual characters of a text “kerning”.
Originally when all type was cast metal, parts of a type that needed to overlap on the next simply hung off the edge. They called that overhanging little piece a “kern”.
A well-kerned text gives a much more pleasing visual result and also creates a harmonic rhythm and balance between letters. This will also result in better legibility and a pleasant experience for the readers.
7. Consider accessibility factors: Age, eyesight, dyslexia
Using our nice high-res retina screens in well-lit rooms, we tend to forget that what works for us with our equipment might not prove as legible on a more common cheaper screen, especially for someone with visual impairment issues.
Accessibility is a relevant factor in UX. Age, bad eyesight and dyslexia feature quite commonly as factors we should consider when designing digital products.
But even average users with 20/20 eyesight might have situations, environmental factors (bright sunny weather, reading in a moving car on a bumpy road etc) when low contrast, small texts or overly dense unstructured content can become utterly frustrating.
As typography makes up a huge part of the web, focusing on accessibility instead of pure aesthetics and brand consistency not only favour a small percentage of potential users but each and every one of us.
An estimate of almost 10% of the population has dyslexia, not something we can ignore as designers. People with dyslexia often have difficulty differentiating certain pairs of letters. By making each letter a bit different, we can reduce the chance of mistaking one for another while reading.
Dyslexic himself, Christian Boer specifically designed the Dyslexie font based on this theory. A couple other fonts also provide better legibility for people with dyslexia, like OpenDyslexic, Lexia Readable, Read Regular, Tiresias, Sassoon.
Fun fact: Comic Sans, even though known as one of the ugliest fonts and a “no-go zone” for designers, has been proven more legible for dyslexic readers than classical typefaces.
Summary: 8 ways to increase legibility on your screens
Make your screens more legible for users by considering these typographic tools.
- Find the easiest font to read, legibility heroes (e.g., Helvetica) vs villains (Papyrus). When developing your own typeface, make sure to thoroughly test its legibility.
- Check for the right contrast with online tools like Webaim Color Contrast Checker.
- Follow existing web developer guidelines for font size.
- Use hierarchy to structure your text and screen.
- Combine serif and sans within the text for higher perceived legibility.
- Use line-height to impact rhythm and style.
- Pay attention to kerning, as it influences the rhythm of the text.
- Consider accessibility factors. Age, eyesight and dyslexia also impact text legibility.
To read more about microcopy, check Timi’s blog post on microcopy testing and Martina's experience with microcopy workshops.
Want to learn more about our UX design process? Download our brand new free e-book now.
For additional reading, check out our Product Design book by our CEO, David Pasztor. We ship worldwide!
More into in-person learning? Reach out to if you are thinking about organizing an in-house UX training for your team. We sure have some ideas! ;)
