What Is The Right Font Size For Modern Displays?
Choosing a font size depends on the application, where it appears and what purpose it has. Street signals need to become readable from a far distance, business cards need to be readable when you are holding one in your hand. In every case of reading, the distance between the text and your eyes plays a crucial role for the chosen size of a font.
It may have been forgotten in the age of modern technologies, but the term for putting text into typography is called typesetting. Typographers and graphic designers who created layouts of text were asking themselves: Is it a headline, a sub title or a body text we are setting in type? Is its job to be loud, or is it meant to be subtle?
Font style emphasis and size are both used for expression. But it is the font’s size that determines the stress level it puts on our eyes at a comfortable reading distance.
Modern designers, particularly UI designers and engineers, seem to lack the knowledge in this area, knowledge traditional typographers were trained with. We see a trend where font sizes are shrinking across all devices, independently of the width of the display in use.
What is a comfortable reading distance?
When you are reading a book (on a Kindle, iPad or printed on paper), you are holding it in your hands with an average distance of half an arms length. The regular distance people use to read books or newspapers is between 35 and 40 cm, or 13.7 to 15.7 inches.
A computer monitor (or laptop monitor) should be at a comfortable horizontal distance for viewing, which usually is around an arms length. Sit back in your chair and raise your arm, and your fingers should touch the screen. This is the average distance between a person and the monitor they are looking at.
At this distance, a font that looks like 6 point in print is no longer well readable. It can be read by healthy eyes, but they need to work harder to read the text. We have gotten somewhat used to this minimising font trend in design. But it is not a good trend, in terms of usability.
How did we end up with too small font sizes?
I suspect the trend was not started intentionally. The screen resolution grew over the years, and Apple, Microsoft and Google have been adjusting the UI elements of their operating systems to match the perceived font size with the actual size measured in points per pixel.
However, designers of Web applications and mobile apps did not match their designs accordingly. They followed what they knew about fonts, based on what we are used from traditional print and old-school word processing programs: 21 pixels must be large for a font size, so it can’t be right as a reading size.
Partially incompetence in the art and science of typography, but mostly ignorance towards type as a usability factor, led to a trend that leads us downwards, putting more strain on our eyes than necessary.
How to choose the right font size for your application
It is important to understand this is not about aesthetics, as it is about usability and legibility. There are ranges of font sizes in relativity to the distance from the surface to the eye, that feel more comfortable, because they make it easier for us to read.
With what we know now, what would be a good font size for ideal situations, where the device display is at arms length to the eyes?
It gets complicated now, because screen resolutions have increased, while typographic measurements are still bound to 72 dpi accordingly. A font set in 10 point looks different on a Windows PC from 1996 (96 dpi), a Mac from 1996 (72 dpi), and a MacBook Pro from 2017 (144 dpi).
To get a font to look and feel like 10 point looked in 1996, you need to set it in at least double the size, which would be around 21 px. Which is a good size for the average body text on the Web or with native Mac OS, Chrome OS or Windows 10 applications. You can see font sizes in the article body of popular websites, such as Medium, Quartz, The New York Times and The Atlantic.
Conclusion and application
Choosing a 21 px font size for lines of text in an app like a to-do list manager, like the redesigned and recently released Things, is not wrong either. Choosing a too small font size definitely is. Not only does it look lost on the big display, it also feels unnecessarily crammed and tiny. Last but not least, it is simply not comfortable to read.
A good thumb of rule for choosing font sizes for readable texts, be it articles, short paragraphs or lists, is to make it as big as a printed book page.
Have a look at a page of any printed fiction or non-fiction book and hold it comfortably close to your face. What you see there is about how it should look on display, with your face at arms length away.
While we are at it, here are a couple more good reads about typography in interaction design:
- Design By Numbers: Typography
- Legible Font Sizes
- The 100% Easy-2-Read Standard (Oliver Reichenstein, 2006)
- Bringing Responsiveness To Apps
If you liked this article, please leave a comment and share it with your peers. Learn more about usability, user experience and service design at Core.