In his seminal work, The Elements of Typographical Style1, Robert Bringhurst lists the services that typography should perform for the reader:
- Invite the reader into the text
- Reveal the tenor and the meaning of the text
- Clarify the structure and the order of the text
- Link the text with other existing elements
- Induce a state of energetic repose, which is the ideal condition for reading
These services are useful both for text on the printed page and on-screen text.
In her book Thinking with Type, Ellen Lupton debunks the commonly held idea that monitors are harder to read: “HCI studies conducted in the late 1980s proved that crisp black text on a white background can be read just as efficiently from a screen as from a printed page.”2 And at the time, monitors had much lower resolutions than they do today. What’s changed is that digital readers are impatient. “They expect to feel “productive,” not contemplative”3. Digital readers scroll down the page in search of something to click on (or share), while paper readers take their time and move less frenetically. The medium does not inhibit the reading of a long text, especially if the text has been designed to be read and not just seen (readability and legibility).
The importance of legibility
A text’s legibility is determined by a number of factors, font choice being just one of them. The fundamentals are:
- Size
- Spacing between letters and words
- Line length (justification)
- Line spacing
These factors influence one another. The longer a line, the larger the characters have to be and, in turn, the larger the line spacing has to be. Text size and line spacing are closely related to font type: some will require larger line spacing, others smaller.
To represent the relationship between text size, line length and line spacing, Slovenian designer Matej Latin used the metaphor of the equilateral triangle to create The Equilateral Triangle of a Perfect Paragraph. It’s an online game in which you can play around with creating the “perfect paragraph” and see in real time what happens when one of the elements hasn’t been set correctly.
The basic rules of typography (and graphic design more generally) apply to paper and screens alike, always keeping in mind the context and how the reader will use the font. When reading a text on screen, readers tend to be less contemplative. Even less so if that screen is a smartphone’s. Awareness of these dynamics pushes typographic choices in one direction more than another.
Designing for an app: the font is crucial!
When designing an app for a smartphone, you are designing for an operating system that has its own rules and its own functional logic, layout and design. The two most common operating systems today are Android and iOS. Both have very detailed style guides which specify, among many things, the ideal dimensions for the top bar, side bar and even the font.
An Android app (designed according to Google guidelines) is navigated using the top bar and the hamburger menu — the icon in the top left. An iOS app, on the other hand, is navigated using the bottom bar (the tab bar). Both Android and iOS have a default font, Roboto for the former, San Francisco for the latter4.
Which fonts to choose for apps
Using an operating system’s default font has its advantages (no licence costs, app size), but it’s not always the ideal solution for every app. Different choices can be required for reasons of branding, visual identity and content type. Things to consider when choosing a font for a screen are not very different from those to take into account for printed paper. You need to think about:
- How many weights a typeface is available in
- The height of the x (lower case height)
- Contrast (the difference in thickness between the thin and thick strokes of a letter)
- The shape of the letters (that it’s easy to distinguish between letters like e and c or lower case i and upper case I)
- The width of letters
The higher the lower case, the greater the legibility, especially with smaller font sizes. It therefore goes without saying that on a small screen, like a smartphone’s, this characteristic is fundamental, as is good contrast.
If you look closely at some of the most downloaded apps from the Play Store and App Store, you will notice that often the default font is used. For apps that will be downloaded millions of times, you need to consider the impact that the cost of a licence to use a font can have. Generally, the costs for an app are much higher than for print or the web. So if you don’t want to use the default typeface or a free one, you will need your own font. Recently, both Netflix and Airbnb have abandoned the fonts they used for years (Gotham for the former, Circular for the latter) and switched to proprietary ones.
Proprietary fonts: personality and legibility
The in-house design team at Netflix, in collaboration with British type foundry Dalton Maag, created https://www.theverge.com/2018/3/21/17147170/netflix-sans-custom-font-typefaceNetflix Sans, while Airbnb, also working with Dalton Maag, created Cereal. For both Netflix and Airbnb, the buzzword in the press releases announcing the fonts’ launches was “readability”. The goal was to create a font that would differentiate the brand and be readable both on screen and on paper. Both have a significant offline presence due to more traditional advertising, amongst other things. Airbnb, for example, also prints its own magazine.
Another app, VSCO, ever hyper-attentive to design, went in the same direction with one of its latest rebrands, working with Swedish type foundry Letters from Sweden to create VSCO Gothic.
To paraphrase Robert Bringhurst, the best typeface for an app (or website or book) will, first of all, be a good typeface in its own right. Second, it will be a typeface suitable for an app, in other words comfortable for continuous and prolonged reading. Third, it will be a typeface in keeping with the theme.
But font choice is just the start: how the font is used will determine whether the design project is a success, be it on screen or paper.
The free alternatives
To wrap things up, I want to tell you about two free fonts that are great alternatives to the default iOS and Android fonts. One is IBM Plex, the open-source font recently created by IBM. It’s available in three versions: mono, serif and sans-serif (there’s also a condensed version of the sans-serif). All versions are available in eight different weights (whether Roman or italic).
The other is Inter UI, created by Rasmus Andersson and available in four weights (whether Roman or italic). The Inter UI project began in 2016 as an experiment to create a font that was highly readable even at very small sizes.
Rasmus Andersson’s font, Inter UI
––––––––––––––––––––––––––––––––
1 Robert Bringhurst, The Elements of Typographic Style, Hartley & Marks Publishers, Vancouver, 2013.
2 Ellen Lupton, Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students, Princeton Architectural Press, Hudson, 2010
3 Idem
4 San Francisco was launched by Apple in 2015. Previously, the default iOS font was Helvetica