Let me cut to the main point with an example. Background information will be provided afterwards.
TL;DR
Fallback fonts should be chosen from the following list:
For sans-serif fonts:
- Arial / Helvetica
- Trebuchet MS
- Verdana
For serif fonts:
- Georgia
- Times New Roman / Times
For monospaced fonts:
- Courier New
To choose which one is the most similar to the web fonts of your website, use the Font Style Matcher to simulate FOUT.
An example
For my web app Triangulum Color Picker, I use Poppins from Google Fonts.
Poppins is a sans-serif font. So the candidate fallback fonts are Arial / Helvetica, Trebuchet MS, and Verdana.
I visit the Font Style Matcher and type Poppins on the right. Then type one of these three candidate fallback fonts on the left.
Arial (in red) doesn’t really overlap well with Poppins (in black):
FOUT is quite jarring as a result:
Trebuchet MS (in red) doesn’t nicely overlap with Poppins (in black), either:
with FOUT very distracting:
Verdana, although individual letter shapes are different from Poppins, is more similar than Arial or Trebuchet MS in its vertical and horizontal lengths of words and sentences:
Therefore, the FOUT looks the least jarring among the three.
So I go with Verdana as the first fallback font, followed by the generic sans-serif . According to the Font Family Reunion, this fallback font stack will render Verdana for all the versions (up to 2016) of Mac OS, Windows, and iOS. For Android, it’ll be Roboto. For Linux, it’ll be Liberation Sans or DejaVu Sans.
Motivation
When we visit a website today, we very often see FOUT—the flash of unstyled text (see Coyier 2015 for what FOUT is). Even though it is better than FOIT—the flash of invisible text (see Leatherman 2017 for why), FOUT is quite annoying. When we’re about to start reading text, suddenly the text transforms into different shapes, distracting our reading experience.
To mitigate this distraction, the fallback font that the browser first displays should look very similar to the web fonts (or self-hosted ones) to be loaded later.
But how should we choose such a fallback font? As far as I know, no one really provides a convincing answer. What I wrote above is the method I’ve come up after doing a bit of research.
Two challenges to find the best fallback font
Finding a good fallback font involves two issues to resolve.
First, which fonts can be a fallback? In other words, which fonts do most computers and mobile devices have installed by default?
Second, how can we tell which fallback font looks the most similar to the web fonts used in our websites?
The following two websites can answer each of these two questions (at least partially): the Font Family Reunion for the first; the Font Style Matcher for the second.
Font Family Reunion
Back in 2014, Zach Leatherman created a website titled Font Family Reunion in which the user enters the font-family CSS values and the app returns which font each OS will actually render. Unfortunately, its GitHub repo was last updated on 5 October 2016. So we cannot tell what fonts the latest OSs will render.
Still, it is a good starting point to understand which fonts are widely installed in various OSs. I’ve checked what Font Family Reunion returns for each of those fonts in the list of “web safe CSS fonts” by Dan’s Tools. And see which font gives the most consistent result across different OSs. Only six fonts yield sufficiently satisfactory results (with each linked to the Font Family Reunion result):
Sans-serif fonts
Serif fonts
Monospaced fonts
Arial and Helvetica are very similar to each other in terms of height and width of each character (see Simonson 2001 for a typographer's view on this). Times New Roman and Times are essentially the same font (see Strizver 2018, for example). So I list up each pair as one candidate fallback font.
The six fonts in this list are all pre-installed in Mac OS, Windows, and iOS (at least up to 2016). So you can ensure many users will see the same FOUT by using them as the fallback fonts.
Dealing with Android users seems to be impossible. Android renders Roboto for the three sans-serif fonts, Noto Serif for the serif fonts, and Cutive Mono for Courier New.
Linux renders Liberation Sans for sans-serif or Liberation Serif for serif, but does render Courier New.
For achieving cross-OS consistency as much as possible, then, choosing a fallback font from this list should be the best approach. (Let me know if you have a better idea.)
Font Style Matcher
Now we know which fonts can be a fallback. Next question is how to pick one for your website.
In 2018(?), Monica Dinculescu created a website called Font Style Matcher in which the user can enter the names of a fallback font and a web font and the app will return how they overlap for the same set of text and how the FOUT will look like.
We can test each of the candidate fallback fonts with Font Style Matcher and see which one gives the least jarring FOUT experience.
Font Style Matcher also allows you to change font-size, line-height, font-weight, letter-spacing, and word-spacing values for each font to find the best overlapping results. To implement font-specific CSS properties, however, you need quite a bit of extra coding (see Leatherman 2016 for how).
But without delving into extensive extra coding, we can still mitigate the jarring effect of FOUT by finding the fallback font that’s closest among the above list of widely installed system fonts.
Hope this article helps you find the best fallback font for your website. If you have a different idea on how to find a fallback font to mitigate FOUT, let me know by posting a comment!
References
Coyier, Chris (2015) “FOUT, FOIT, FOFT”, CSS-Tricks, Apr. 1, 2015.
Leatherman, Zach (2016) “A Comprehensive Guide to Font Loading Strategies”, zachleat.com, Jul 12, 2016.
Leatherman, Zach (2017) “FOIT vs. FOUT, a Side by Side Comparison”, zachleat.com, Oct. 12, 2017.
Simonson, Mark (2001) “The Scourge of Arial”, Mark Simonson Studio, Feb. 21, 2001.
Strizver, Ilene (2018) “Times Roman vs. Times New Roman”, Creative Pro, Aug. 15, 2018
Top comments (0)