Eine Möglichkeit den „Flash of unstyled text“ bei Webfonts zu vermeiden

Benjamin Hofmann Datum: 9. November 2017
Autor: Benjamin Hofmann


Es gibt nicht viele Newsletter, die ich abonniert habe. Einer davon ist aber der Newsletter vom Smashing Magazine, da die Qualität davon bisher dauerhaft sehr gut war und dessen die Inhalte nicht nur einfache Links auf die ohnehin vorhandenen Beiträge der Seite selbst darstellen, sondern immer eine sehr schöne Ergänzung zu diesen liefern und auch andere Themen beleuchten.

Eines der Themen im letzten Newsletter (Issue #193) war das kleine und sehr nützliche Online-Tool Font style matcher und wahrscheinlich ist jeder schon einmal über das damit anzugehende Problem gestoßen. Man besucht eine Website, fängt an den Text zu lesen und erst mitten in einem der ersten Absätze wird dann die eigentliche Schriftart geladen, der Text verschiebt sich und man muss von vorne anfangen.

Dieses Phänomen nennt sich FOUT (flash of unstyled text) bzw. FOUC (flash of unstyled content) und kommt daher, dass Browser versuchen eine Website zu rendern bevor alle dafür benötigten Stylings geladen wurden. Da Schriften neben Bildern zu den mitunter größten Ressourcen einer Website gehören, haben die verschiedenen Browserhersteller hier verschiedene Wege gefunden die Anzeige dieser etwas zu optimieren. Das allein reicht jedoch nicht aus und es gibt diverse Strategien Webfonts effizienter zu laden und den FOUT bzw. FOUC gezielt zu vermeiden. Viele dieser Mechanismen sehen eine websichere Schrift als Fallback vor und wenden den Webfont selbst erst dann im Styling an, wenn dieser auch tatsächlich geladen wurde und damit bereit zur Anzeige ist.

Animiertes GIF, welches die Vorschau des Font style matcher in Aktion zeigt.

Dieses Vorgehen führt aber oft genug dazu, dass sich der Text dann verschiebt, da die websichere Schrift natürlich eine ganz andere Laufweite und Größe hat als die im Design vorgesehene Schrift. Und genau an dieser Stelle versucht der Font style matcher einzugreifen und erlaubt es über ein paar Schieberegler den Fallback-Font in seinem Aussehen weitestmöglich dem eigentlichen Font anzupassen, damit der Wechsel zwischen diesen beiden weniger gravierend ausfällt. Im animierten GIF oberhalb dieses Absatzes habe ich das einmal mit den Schriften „Lato“ und „Verdana“ als Fallback ausprobiert und bin durchaus begeistert vom Resultat.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema User Experience & Design


Bilder SEO – Bisher eigentlich komplett vernachlässigt

Autor: Axel Güldner


Technologie // User Experience & Design


Heute möchte ich ein Thema anschneiden, welches bisher wohl so niemand auf dem Schirm hatte (ich zumindest habe bisher keinen Gedanken daran verschwendet). Aber als ich dann in einem anderen Blog darüber gelesen habe, hat mich dann sofort die Faust der Erkenntnis getroffen, ähnlich einer Brockhaus-Enzyklopädie, die einem ins Gesicht fällt. Wir bemühen uns immer …


Beitrag lesen
07
FEB
12

Servus, Magazin gråd extra V!

Autor: Christine Pfleger


infomax // Strategie & Konzeption // Technologie // Tourismus // Über den Tellerrand // User Experience & Design


Magazin gråd extra | Ausgabe 5 | 2020
Magazin gråd extra | Ausgabe 5 | 2020

Die gerade erschienene fünfte Ausgabe unseres Magazins gråd extra befasst sich mit dem Schwerpunkt Renaissance. Und jeder Beitrag hat dabei seine ganz eigene Deutung.


Beitrag lesen
28
MAI
20

video.js – HTML5-Video-Kmponente mit Polyfill für alte Browser

Autor: Stefan Oswald


Projekte // Technologie // User Experience & Design


Webseite: http://www.videojs.com/ Ich habe es mir noch nicht im Detail angeschaut, aber rein von der Beschreibung her könnte das für uns mal ganz nützlich sein. Man kann per API auch Loader für eigene Video-Provider umsetzen. Kostenlos einsetzbar dank Apache 2.0 Lizenz.


Beitrag lesen
14
MAI
13

Display Flex

Autor: Philip Dumas


User Experience & Design


Folgende Problemstellung: Mobile Navigationsdarstellung in Tirol. Es soll sich die Reihenfolge der Navigationselemente im Vergleich zur Desktopvariante ändern. Desweiteren soll beim Klick auf die Lupe die Volltextsuche unter der Navigation ausklappen und die volle Bildschirmbreite benutzen. Die Navigation ist hierbei eine „ul“, die einzelnen Navigationselemente „li“s. Weisst man dem Suchformular hier nun width:100% zu, so …


Beitrag lesen
13
JUL
16