The Translator's First Untranslated Glyph

We obsess over the visible. We compress our images, we minify our code, we cache our assets, all to shave milliseconds off that first meaningful paint. We stand back, watch the Lighthouse score climb, and declare the work done. The page is fast. But a page is not just a visual artifact; it is a textual one. And there is a silent, often unmeasured delay that occurs between the moment the text is painted and the moment it is truly ready to be read. This is the gap where a custom font has loaded, but its individual glyphs have not.

This phenomenon, most noticeable with non-Latin scripts like Arabic or Thai, is known as a Flash of Unstyled Text (FOUT) or, more accurately here, a Flash of Invisible Text (FOIT). But there’s a subtler, more pernicious version I call the "Flash of Un-translated Text." The browser has the font file. It’s rendering the text. But the complex shaping required to correctly position the glyphs—the intricate connections of Arabic letters, the stacking of diacritics in Vietnamese—hasn’t happened yet. The characters are present but unreadable, a cryptographic puzzle displayed for a split-second to the user.

Shaping the Page Before the Paint

The solution isn't found in a config file or a build plugin, but in a single, powerful line of code: font-display: optional;. This CSS directive is often misunderstood. It’s not merely a tool for avoiding a FOUT; it’s a contract with the browser. It states, quite seriously, that if the font isn’t available almost immediately within the initial rendering window, it should not be used at all for this page load. The browser will fall back to the next font in the stack and stick with it.

The genius of optional is its brutal prioritization of consistency over potential beauty. It eliminates the layout shift that occurs when a web font finally loads and swaps in, a common source of frustration. More importantly for our untranslated glyph, it eliminates the period of algorithmic uncertainty. The browser isn’t waiting on a network request; it’s waiting on the shaping engine to do its work. By opting for the immediate, if less ideal, fallback font, we ensure that the text is not only visible but functionally legible from the very first moment. The shaping is done instantly because the font is already there, baked into the system.

This is a conscious trade. You are choosing guaranteed legibility and stability over the possibility of your preferred typeface appearing after a jarring swap. It accepts that for a user on a slow connection, the purity of your design is a secondary concern to their ability to parse content without hesitation. It is the translator refusing to present a half-finished sentence, opting instead for a clear, immediate translation in a slightly different accent. The weight of the unread character is lifted before it has a chance to be felt, creating a page that is not just fast to load, but truly fast to read.

Notes & further reading

A few pages I came back to while writing this: