Which fallback fonts should we choose to make FOUT less jarring
Tags: fout, webfonts, webtypography
Published: 2021-02-03 04:02:16

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](https://meowni.ca/font-style-matcher/) to simulate FOUT.


## An example

For my web app [Triangulum Color Picker](https://triangulum.netlify.app), I use [Poppins](https://fonts.google.com/specimen/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](https://meowni.ca/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):
![A paragraph with Poppins overlapped with the one with Arial](https://dev-to-uploads.s3.amazonaws.com/i/qbw7pnk39bv6wpyxefrg.png)

FOUT is quite jarring as a result:
![Gif animation simulating FOUT when Arial is used as a fallback for Poppins](https://dev-to-uploads.s3.amazonaws.com/i/qmjjxypwfewobfoqby01.gif)

Trebuchet MS (in red) doesn’t nicely overlap with Poppins (in black), either:
![A paragraph with Poppins overlapped with the one with Trebuchet MS](https://dev-to-uploads.s3.amazonaws.com/i/rnfe77hgi6p1ke1lrrow.png)
with FOUT very distracting: 
![Gif animation simulating FOUT when Trebuchet is used as a fallback for Poppins](https://dev-to-uploads.s3.amazonaws.com/i/8a61sa20n1f5xxj8vvpi.gif)

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: 
![A paragraph with Poppins overlapped with the one with Verdana](https://dev-to-uploads.s3.amazonaws.com/i/fz5q3kgd89d9ewf03p04.png)

Therefore, the FOUT looks the least jarring among the three.
![Gif animation simulating FOUT when Verdana is used as a fallback for Poppins](https://dev-to-uploads.s3.amazonaws.com/i/t6knwrirh3pvxekdgb4f.gif)

So I go with Verdana as the first fallback font, followed by the generic `sans-serif` . According to the [Font Family Reunion](http://fontfamily.io/Verdana,sans-serif), 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](https://css-tricks.com/fout-foit-foft/) for what FOUT is). Even though it is better than FOIT—the flash of invisible text (see [Leatherman 2017](https://www.zachleat.com/web/fout-vs-foit/) 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](http://fontfamily.io/) for the first; the [Font Style Matcher](https://meowni.ca/font-style-matcher/) for the second.


## Font Family Reunion

Back in 2014, Zach Leatherman created a website titled [Font Family Reunion](http://fontfamily.io/) 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](https://github.com/zachleat/font-family-reunion) 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](https://www.cssfontstack.com/). 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**

- [Arial](http://fontfamily.io/Arial,sans-serif) / [Helvetica](http://fontfamily.io/Helvetica,sans-serif)
- [Trebuchet MS](http://fontfamily.io/Trebuchet_MS,sans-serif)
- [Verdana](http://fontfamily.io/Verdana,sans-serif)

**Serif fonts**

- [Georgia](http://fontfamily.io/Georgia,serif)
- [Times New Roman](http://fontfamily.io/Times_New_Roman,serif) / [Times](http://fontfamily.io/Times,serif)

**Monospaced fonts** 

- [Courier New](http://fontfamily.io/Courier_New,monospace)

Arial and Helvetica are very similar to each other in terms of height and width of each character (see [Simonson 2001](https://www.marksimonson.com/notebook/view/the-scourge-of-arial) for a typographer's view on this). Times New Roman and Times are essentially the same font (see [Strizver 2018](https://creativepro.com/times-roman-vs-times-new-roman), 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](https://fonts.google.com/specimen/Roboto) for the three sans-serif fonts, [Noto Serif](https://fonts.google.com/specimen/Noto+Serif) for the serif fonts, and [Cutive Mono](https://fonts.google.com/specimen/Cutive+Mono) for Courier New. 

Linux renders [Liberation Sans](https://fonts.adobe.com/fonts/liberation-sans) for sans-serif or [Liberation Serif](https://fonts.adobe.com/fonts/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](https://meowni.ca/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](https://www.zachleat.com/web/comprehensive-webfonts/) 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](https://css-tricks.com/fout-foit-foft/)”, *CSS-Tricks*, Apr. 1, 2015.

Leatherman, Zach (2016) “[A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/)”, *zachleat.com*, Jul 12, 2016.

Leatherman, Zach (2017) “[FOIT vs. FOUT, a Side by Side Comparison](https://www.zachleat.com/web/fout-vs-foit/)”, *zachleat.com*, Oct. 12, 2017.

Simonson, Mark (2001) “[The Scourge of Arial](https://www.marksimonson.com/notebook/view/the-scourge-of-arial)”, *Mark Simonson Studio*, Feb. 21, 2001.

Strizver, Ilene (2018) “[Times Roman vs. Times New Roman](https://creativepro.com/times-roman-vs-times-new-roman)”, *Creative Pro*, Aug. 15, 2018