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


Adobe kauft Figma …

Autor: Axel Güldner


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


… diese Nachricht hat im September die Welt der Kreativen erschüttert und Investoren der Photoshop und PDF Firma verunsichert.Zu teuer käme der 20 Mrd. Dollar Deal befinden viele und zu sehr getrieben vor der Furcht Adobes langfristig signifikante Marktanteile an die Konkurrenz zu verlieren. Nun hat Adobe eine gewisse Historie hinsichtlich der Übernahme von konkurierenden …


Beitrag lesen
19
OKT
22

Mit A/B Testing die Website optimieren

Autor: Merle Howindt


User Experience & Design


A/B-Testing ist eine quantitative Methode um Erkenntnisse über die Website zu erlangen. Bei diesem Testverfahren werden zwei verschiedene Versionen einer Seite erstellt, um diese anschließend miteinander zu vergleichen. Mittels eines Tools wird ein Nutzer per Zufallsprinzip entweder auf Version A oder B geleitet. Durch das Festlegen verschiedener KPIs kann, nach einer gewissen Laufzeit, die bessere …


Beitrag lesen
01
OKT
21

Inhouse Hallway Testing bei infomax

Autor: Anna Zsófia Höfler


Strategie & Konzeption // User Experience & Design


Bei der Bereitstellung einer neuen Leistung für unsere Kunden gehörte „Testing“ bisher selbstverständlich zur Umsetzung dazu. Nach der Fertigstellung einer Umsetzung wurde die Funktionalität vom Entwickler, dem Projektmanager und vor Abnahme der Leistung auch von unseren Kunden getestet, sodass eine Qualitätssicherung durch mehrere Stufen erfolgte. Ein gerne vernachlässigter Fakt ist jedoch, dass diese Personen bereits …


Beitrag lesen
14
MAI
20

Photoshop-Ebenenstile als CSS3-Code exportieren

Autor: Michael Degener


Technologie // User Experience & Design


Ob Designer oder Entwickler, jeder der schon einmal eine Screen-Vorlage mit all seinen Ebenen mittels HTML und CSS zum Leben erwecken musste, hat sich insgeheim sicherlich schon einmal gewünscht, dass sich dabei manche Arbeitsschritte beschleunigen ließen. Wer kennt sie nicht, die allgegenwärtigen Buttons in Formularen, Teasern und Schnellsuchen. Von runden Ecken über Konturen und Schlagschatten …


Beitrag lesen
03
AUG
12