Then, Now & The Future
“Optimizing typography is optimizing readability, accessibility, usability(!), and overall graphic balance.”
— Oliver Reichenstein
“Web Design is 95% Typography.”
— Oliver Reichenstein
The efficiency with which we read is a function of the amount of text available to us as we do so.
This means an isolated word that has fewer than 20 characters will be read more slowly than a word that forms part of a longer sentence.
This makes our choice of typeface extremely important.
In 2008, Department of Psychology at the University of Victoria did empirical tests to reveal which areas of lowercase and uppercase Latin letters are most efficient for reading (full study).
First of all, it revealed that “line terminations” are the most important features for letter identification.
The image above shows which areas we pay most attention to when recognizing letters.
These areas of a typeface should be designed both in a generic and familiar way and also in a way that stresses letter differentiation.
In 2010, there was also another study, by Sofie Beier and Kevin Larson, that focused testing letter variations of frequently misrecognized letters (full study).
This study found that some variations were more legible than others despite the letters within a font having similar size, weight, and personality. The results showed that narrow letters benefit from being widened, and that x-height characters benefit from using more of the ascending and descending area.
Typeface Legibility: Towards defining familiarity
Research on Features for Identification of Uppercase and Lowercase Letters
The Science of Word Recognition, or how I learned to stop worrying and love the bouma
“All text needs legible typefaces. But especially at interfaces, our eyes need fonts that cooperate rather than resist.”
— Tobias Frere-Jones
1. Legibility
2. Modesty
3. Flexibility
4. Large x-height
5. Wide proportions
6. Loose letter spacing
7. Low stroke contrast
8. OpenType features
9. Fallback
10. Hinting
Letterforms need to be clear and recognizable.
Letters with clear distinction in their forms perform better as a user interface element.
In many sans serif typefaces, including Helvetica, capital I and lowercase l are indistinguishable. As a result, these are usually bad choices for UIs.
“Helvetica sucks. It really wasn’t designed for small sizes on screens. Words like ‘milliliter’ can be very difficult to decipher.”
— Erik Spiekermann
An ideal UI typeface doesn’t scream for attention, but rather goes unnoticed.
The typeface you choose should stay out of the users’ way when they try to complete their task.
A UI typeface needs to be flexible.
It should work well in various sizes and devices, on a small screen in particular.
Sans serifs that are made to work at small sizes on low resolution are preferred for interfaces.
You want to look out for a typeface with large x-height since it’s in general easier to read and renders better in small sizes.
Don’t go too far though, since too large x-height makes the letters n and h difficult to distinguish.
You want to look out for a typeface with wide proportions since it helps with legibility and is easier to read in small sizes.
The space around the letters is as important as the space within them.
Letters that are too close to each other can be hard to read.
A good rule of thumb is that letter space should be slightly smaller than the counter space inside the letterforms.
Kepler has too much contrast. Arial has no contrast.
To use OpenType features in Sketch,
there is the native OS X panel:
“Hinting, or screen optimizing, is the process by which fonts are adjusted for maximum readability on computer monitors.”
— Peter Biľak
TrueType font format, and therefore the instructions we’ve called “hinting,” are disappearing.
Only consider if you need to support IE8.
Source Sans Pro:
Fira Sans:
Open Sans:
FF Meta Web Pro:
JAF Facit:
1. Start from the UI copy
2. Make sure the typeface you choose works with the actual copy
3. Test on different screens that it renders well and stays legible
4. Continue working your way up
“It’s tough for a typographer like me to admit it, but on the web we have to prioritise the text, and the font, independently.”
— Kenneth Ormandy
Text itself is fundamentally more important than our suggestions about how it should be typeset. (Tim Brown)
It’s a critical point of failure for typographers to grapple with, and ultimately we must accept that preparing our typographic interfaces with failure in mind is better than the alternative. (Robin Rendle)
“Content, layout, behaviour, perception, brand, feel. All of those things are open for change if we have a good set of sensors.”
— Mark Boulton
Typefaces will become more aware of their surroundings and start to respond to a number of factors like viewport, resolution, type rendering engine used, ambient light, screen brightness and even the viewing distance.
I also predict that fonts’ legibility adjustments will be eventually linked to OS’s accessibility options so that typefaces can automatically start adapting to different user needs.
“Today’s webfonts tie our responsive sites and applications to inflexible type that doesn’t scale. As a result, our users get poor reading experiences and longer loading times from additional font weights.”
— Andrew Johnson
Designed originally for newspapers, where ink meets paper in unpredictable ways, “grades” allow designers total control over their media — whatever that media may be.
Could we utilize these same principles, but for different purposes, in the medium(s) we work on?
“Typefaces will eventually gain more awareness of their internal structures and external surroundings.”
— Nick Sherman