FOUT vs FOIT: Which Web Font Loading Choice Is Best For Users?

Web Font LoadingAs the web became the most successful publishing and reading platform in history, it brought with it a catastrophic decline in the richness and sophistication of one of the pillars of content design. Typography was laid low. Designers had a mere handful of web safe typefaces to choose from. The vast and rich resources available to pre-web typographers were not available to their modern cousins.

Web fonts, especially those using web font libraries like Google Fonts or Typekit, redress the balance somewhat (although not completely). Designers can use any of thousands of typefaces pulled from libraries the size of which would have shocked old-school type designers. But there’s a price to be paid for web fonts. Unlike in print, on the web, text is detached from its typeface. Text — wrapped in HTML — almost always arrives in users’ browsers more quickly than the font file which is supposed to shape it. Font files are tardy because of their size, an effect exaggerated on a slow or unreliable network connection.

It’s impossible to think of a book or magazine in which the text and the typeface are cleaved in two, but it’s a reality web designers have to deal with every day. They have to decide whether to show the text before the font file arrives, or wait, showing the user nothing until the text is ready to appear in the form they deem most fitting.

The first choice, the Flash Of Unstyled Text, is, quite frankly, ugly. It’s possible to massage the font-stack so that the “unstyled” text is somewhat similar to the desired typeface, but it’s never perfect. Sooner or later, depending on the user’s connection, the text will twitch into a new form.

It’s not surprising that many designers take the second option; they’d rather show nothing at all until the font file is ready to be applied. The Flash Of Invisible Text is neater and less jarring. The user knows the transition is coming, and they are used to waiting for web pages to load, for images and words to pop onto their screen when they’re ready.

I’ve long been a fan of the second option, the Flash Of Invisible Text, but several articles, particularly The New Web Typography by Robin Rendle, have persuaded me otherwise.

As Rendle expresses it:

“We can either feign the same level of control as print designers and ignore these technical considerations at the expense of the reader, or we can instead learn how to dance with this new web typography, what with all its quirks and clumsiness.”

The Flash of Unstyled Text is better because it’s better for the user. She is able to begin reading more quickly, and reading is the reason she loaded the page in the first place. If she is reading on a mobile device with a poor connection, the web font may never arrive, and even if her connection is good, she shouldn’t have to wait to satisfy the designer’s sense of what is proper.

The web split typeface and text in two, and so we have to choose which to honor. FOIT honors the typeface, but FOUT honors the text. It should be an easy choice to make.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.