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

Datum: 9. November 2017
Autor*in: 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


Boah, Newsticker sind doch so…. 2016

Autor*in:


Technologie // User Experience & Design


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen. Problem 1: Responsivität Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind …


Beitrag lesen
29
APR
16

#Du fehlst

Autor*in: Anton Straßer


infomax   //   Über den Tellerrand   //   User Experience & Design


Wirtshaussterben – ein Phänomen, das schon seit beinahe einem Jahrzehnt verstärkt auftritt. Die Tirol Werbung startet mit der Kampagne #du fehlst einen Versuch, dem entgegenzuwirken.


Beitrag lesen
20
JAN
21

One by Wacom – Neue Möglichkeiten mit einem Grafiktablett

Autor*in: Carina Kruse


User Experience & Design


Vor einer Weile tauschte ich mich mit meinen lieben Design-Kollegen Sina und Axel über das Thema Grafiktabletts aus. Da wir im Designteam des öfteren Strichzeichnungen anfertigen stellten wir oft fest, dass dies mit der Computermaus zwar möglich, aber auch sehr beschwerlich sein kann. Strichzeichnungen von Kloster Seeon, umgesetzt mit der Maus. Bildbeschreibung So kam die …


Beitrag lesen
10
JAN
22

Wie misst man eigentlich, wie inspirierend eine Destinationswebsite ist, Frau Köchling?

Autor*in: Lorena Meyer


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


Interview mit Anne Köchling, Projektleiterin Institut für Management und Tourismus, FH Westküste Wir haben nachgefragt bei Anne Köchling. Sie ist seit rund 10 Jahren – nach Stationen im Destinationsmanagement bei der Deutschen Zentrale für Tourismus e.V. (DZT) und der Tourismus-Agentur Schleswig-Holstein GmbH (TASH) – Referentin für Forschungsvorhaben am Institut für Management und Tourismus (IMT) der FH …


Beitrag lesen
22
JUN
20