Schnelle Ladezeiten mit Systemschriftarten
Um ein positives Nutzererlebnis zu schaffen, ist die Geschwindigkeit einer Website sehr wichtig. Gerade mit mobilen Endgeräten, die keine optimalen Funkverbindungen haben, sind langsame Websites sehr nervig. Dieses Thema wurde von der Entwicklergemeinde sehr stark forciert, nachdem Google 2010 bekanntgegeben hatte, dass die Geschwindigkeit Einfluss auf das Ranking hat. Außerdem wurde Anfang 2018 noch deutlicher auf die Position der Google-Suchergebnisse von Mobile-Websites in Abhängigkeit der Geschwindigkeit hingewiesen. Das sind die offiziellen Statements von Google, aber es gibt auch Untersuchungen, die keine echte Auswirkung feststellen können.
Ich selbst beschäftige mich sehr intensiv mit der Optimierung der Geschwindigkeit meines Blogs. Aber nicht aufgrund der theoretischen Auswirkung auf das Ranking, sondern um meinen Lesern ein optimales Nutzungserlebnis zu bieten. Gleichzeitig macht es aber natürlich auch viel Spaß, tief in die Technik zu gehen und versuchen, das Optimum zu erreichen.
Web Fonts
Individuelle Schriftarten können das Erscheinungsbild einer Website mit dem Auftritt des Unternehmens harmonisieren. So werden mittlerweile verschiedene Schriftarten mit unterschiedlichen Schriftschnitten in der Typografie von Websites eingesetzt. Allerdings handelt es sich bei Web Fonts zum Teil um sehr große Dateien. Die bekannte Schriftart Roboto von Google hat zum Beispiel eine Dateigröße von 2 MB. Ein erster Schritt zur Verringerung der Dateigröße ist die Entfernung aller nicht benötigten Zeichen. Dazu gehören die nicht zur deutschen Sprache gehörenden Zeichen. Dies sorgt im Beispiel von Roboto für eine Reduzierung der Dateigröße auf 434 KB. Mit der Verwendung des neuen Dateiformates WOFF2 kann die Dateigröße weiter verringert werden und liegt dann bei 193 KB. Hierbei sollten allerdings noch die TTF-Dateien als Alternative für ältere Webbrowser angeboten werden. Trotz der deutlichen Reduzierung der Dateigröße benötigen diese Schriftarten trotzdem noch eine gewisse Zeit, da einerseits zunächst der Download und anderseits die Verarbeitung durch den Webbrowser erfolgen muss.
Systemschriftarten
Ein neuer Trend ist die Verwendung von Systemschriftarten. Früher standen hierfür nur sehr wenige Schriftarten bereit, die auf allen Systemen noch installiert sind. Mittlerweile liefern die Betriebssysteme jedoch sehr moderne Schriftarten mit, die zudem für die Lesbarkeit auf Bildschirmen optimiert wurden. Gleichzeitig sorgen die flexiblen Layouts dafür, dass unterschiedliche Schriftgrößen keine Probleme mehr bereiten.
Bei den Systemschriftarten handelt es sich nicht um eine einzige Schriftart, sondern um eine Liste von Schriften der verschiedenen Betriebssysteme. Sie liegen in verschiedenen Schriftschnitten vor, daher kann problemlos auch eine Light oder Semibold Variante genutzt werden. Auf diese Methode setzen bereits die großen Seiten GitHub, Medium und WordPress. Github verwendet dafür die folgenden Schriftarten:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
Umsetzung im Blog
Hier in meinem Blog habe ich mich jetzt auch für den Schritt hin zu den Systemschriften entschieden. Dazu bin ich auf Github fündig geworden. Don Schnitzius hat dort mehrere Varianten an verschiedenen Kombinationen aus Systemschriftarten online gestellt. Für die Schrift ohne Serifen habe ich mich für die folgende Kombination entscheiden:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
Und für die Serifenschrift in den Blog-Artikeln setze ich auf die folgende Kombination:
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
