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

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


WebKit Sibling Bug

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Bei kleineren Anpassungen in einem unserer Projekte ist heute im alten Standard-Browser von Android ein Bug[1] aufgefallen, der dazu führte, dass die Listenelemente mit initial verstecktem Inhalt diesen beim Anklicken nicht anzeigten. Nach einer kurzen Recherche bin ich hier auch auf die Lösung gestoßen, den Checkbox Hack on Mobile Webkit[2]. Klingt fies, ist aber nur …


Beitrag lesen
13.
März
2015

Parallax Scrolling – ein cooler Effekt der nicht ganz neu ist

Autor: Axel Güldner


Technologie // User Experience & Design


Heute wollte ich mal kurz einen Effekt vorstellen, den viele sicher schon mal gesehen haben, ihn toll fanden, aber keine Ahnung hatten wie das eigentlich funktioniert. Das Thema ist Parallax Scrolling, ein Effekt der auf Websites auftritt, wenn verschiedene Hintergrund Ebenen ein unterschiedliches Scrollverhalten aufweisen. Dies wirkt unerwartet und frisch, da dies nicht die gewohnte …


Beitrag lesen
17.
Nov.
2011

Apple Touch Icons nutzen

Autor: Bastian Schwarz


Projekte // Technologie // User Experience & Design


Ich habe mal ein wenig recherchiert und möchte hier das Ergebnis mitteilen. Die Apple Touch Icons können generell benutzt werden um Apps oder Webseiten auf z.B. den Startbildschirm zu pinnen. Ist bei der Webseite dann ein solches Icon hinterlegt wird das „Lesezeichen“ mit ihm hinterlegt und man erhält so einen schönen Wiedererkennungswert. Generell sollten die …


Beitrag lesen
17.
Oktober
2012

http://webplatformdaily.org/

Autor: Bastian Schwarz


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


Ich habe eine neue Seite (http://webplatformdaily.org/) entdeckt, die täglich Links zu folgenden Themen aus Twitter sammelt: Open Web Platform (including the open standards that comprise it) JavaScript (the core language and libraries written in it) web-browsers (including their development tools) front-end web-development in general open source to some degree (e.g. GitHub related content) Das Projekt …


Beitrag lesen
09.
April
2013