Schriftgröße für das Web verringern

Ilya Grigorik

Jeremy Wagner

Typografie ist eine grundlegende Voraussetzung für gutes Design, Branding, Lesbarkeit und Barrierefreiheit. Web-Schriftarten ermöglichen all das und noch mehr: Der Text ist auswählbar, suchbar, zoombar und eignet sich für hohe DPI-Werte. Dadurch wird unabhängig von Bildschirmgröße und Auflösung ein einheitliches und scharfes Text-Rendering ermöglicht. WebFonts sind entscheidend für gutes Design, Nutzerfreundlichkeit und Leistung.

Die Optimierung von Webschriftarten ist ein wichtiger Bestandteil der Gesamtleistung. Jede Schriftart ist eine zusätzliche Ressource und einige Schriftarten können das Rendern des Textes blockieren. Dass die Seite jedoch WebFonts verwendet, bedeutet nicht, dass sie langsamer gerendert werden muss. Im Gegenteil: In Kombination mit einer überlegten Strategie für das Laden und Anwenden von Schriftarten auf der Seite können optimierte Schriftarten dazu beitragen, die Gesamtgröße der Seite zu verringern und die Rendering-Zeiten der Seite zu verkürzen.

Aufbau einer Webschriftart

Eine Webschrift ist eine Sammlung von Glyphen und jede Glyphe ist eine Vektorform, die einen Buchstaben oder ein Symbol beschreibt. Infolgedessen bestimmen zwei einfache Variablen die Größe einer bestimmten Schriftartdatei: die Komplexität der Vektorpfade der einzelnen Glyphen und die Anzahl der Glyphen in einer bestimmten Schriftart. Open Sans, einer der beliebtesten WebFonts, enthält 897 Glyphen, darunter lateinische, griechische und kyrillische Zeichen.

Bei der Auswahl einer Schriftart sollten Sie berücksichtigen, welche Zeichensätze unterstützt werden. Wenn Sie den Inhalt Ihrer Seite in mehrere Sprachen lokalisieren müssen, sollten Sie eine Schriftart verwenden, die Ihren Nutzern ein einheitliches Erscheinungsbild bietet. Beispielsweise soll die Google-Schriftfamilie Noto alle Sprachen auf der ganzen Welt unterstützen. Beachten Sie jedoch, dass die Gesamtgröße von Noto, einschließlich aller Sprachen, zu einem ZIP-Download von mehr als 1, 1 GB führt.

In diesem Post erfährst du, wie du die Dateigröße deiner Webschriftarten reduzieren kannst.

Web-Schriftartformate

Derzeit werden im Web zwei empfohlene Schriftartencontainerformate verwendet:

• Ende
• TTF
• Wo ist?
• WOFF2

WOFF und WOFF 2.0 werden von allen modernen Browsern unterstützt.

• WOFF 2.0-Variante für moderne Browser bereitstellen
• Wenn es unbedingt erforderlich ist, z. B. wenn Sie noch Internet Explorer 11 unterstützen müssen, stellen Sie WOFF als Fallback bereit.
• Alternativ können Sie in älteren Browsern auf die Verwendung von Webschriftarten verzichten und auf die Systemschriftarten zurückgreifen. Dies kann auch bei älteren, stärker eingeschränkten Geräten von Vorteil sein.
• Da WOFF und WOFF 2.0 alle grundlegenden Versionen von modernen und älteren Browsern abdecken, sind EOT und TTF nicht mehr erforderlich und können zu längeren Downloadzeiten für Webschriftarten führen.

Webschriftarten und Komprimierung

Sowohl WOFF als auch WOFF 2.0 haben eine integrierte Komprimierung. Die interne Komprimierung von WOFF 2.0 nutzt Brotli und bietet eine bis zu 30% bessere Komprimierung als WOFF. Weitere Informationen finden Sie im Bewertungsbericht WOFF 2.0.

Zu beachten ist, dass einige Schriftartformate zusätzliche Metadaten enthalten, wie z. B. Schriftarthinweise und unterschneidende Informationen, die auf einigen Plattformen möglicherweise nicht erforderlich sind. Dadurch lässt sich die Dateigröße weiter optimieren. Google Fonts beispielsweise verwaltet mehr als 30 optimierte Varianten für jede Schriftart und ermittelt automatisch die optimale Variante für jede Plattform und jeden Browser.

Schriftfamilie mit @font-face definieren

Mit der CSS-at-Regel für @font-face können Sie den Speicherort einer bestimmten Schriftartressource, ihre Stilmerkmale und die Unicode-Codepunkte, für die sie verwendet werden soll, definieren. Eine Kombination aus solchen @font-face-Deklarationen kann verwendet werden, um eine "Schriftfamilie" zu erstellen, mit der der Browser bewertet, welche Schriftressourcen heruntergeladen und auf die aktuelle Seite angewendet werden müssen.

Verwenden Sie eine variable Schriftart

Wenn Sie mehrere Varianten einer Schriftart benötigen, können Sie mit variabler Schrift die Dateigröße erheblich verringern. Anstatt die regulären und fett gedruckten Stile sowie deren kursiven Text zu laden, können Sie eine einzelne Datei laden, die alle Informationen enthält. Variable Schriftgrößen sind jedoch größer als eine einzelne Schriftartvariante, aber kleiner als die Kombination vieler Varianten. Unter Umständen ist es besser, als Erstes wichtige Schriftartvarianten als eine große, variable Schriftart bereitzustellen. Die anderen Varianten werden erst später heruntergeladen.

Variable Schriftarten werden jetzt von allen modernen Browsern unterstützt. Weitere Informationen finden Sie in der Einführung in variable Schriftarten im Web.

Das richtige Format auswählen

Jede @font-face-Deklaration enthält den Namen der Schriftfamilie, die als logische Gruppe aus mehreren Deklarationen und Schrifteigenschaften wie Stil, Gewichtung und Strecke dient, sowie den src-Deskriptor, der eine priorisierte Liste von Speicherorten für die Schriftartressource angibt.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Beachten Sie zunächst, dass in den obigen Beispielen eine einzelne Awesome Font-Familie mit zwei Stilen (normal und kursiv) definiert ist, die jeweils auf einen anderen Satz von Schriftartressourcen verweisen. Jeder src-Deskriptor enthält wiederum eine priorisierte, durch Kommas getrennte Liste von Ressourcenvarianten:

• Mit der Anweisung local() können Sie lokal installierte Schriftarten referenzieren, laden und verwenden. Wenn der Nutzer die Schriftart bereits auf seinem System installiert hat, wird so das Netzwerk vollständig umgangen, was am schnellsten funktioniert.
• Mit der Anweisung url() können Sie externe Schriftarten laden. Sie darf außerdem einen optionalen format()-Hinweis für das Format der Schriftart enthalten, auf die in der angegebenen URL verwiesen wird.

Wenn der Browser feststellt, dass die Schriftart erforderlich ist, durchläuft er die bereitgestellte Ressourcenliste in der angegebenen Reihenfolge und versucht, die entsprechende Ressource zu laden. Gehen Sie beispielsweise so vor, wie im obigen Beispiel dargestellt:

1. Der Browser richtet das Seitenlayout aus und bestimmt, welche Schriftvarianten erforderlich sind, um den angegebenen Text auf der Seite zu rendern. Schriftarten, die nicht Teil des CSS-Objektmodells (CSSOM) der Seite sind, werden nicht vom Browser heruntergeladen, da sie nicht erforderlich sind.
2. Der Browser prüft für jede erforderliche Schriftart, ob die Schriftart lokal verfügbar ist.
3. Wenn die Schriftart nicht lokal verfügbar ist, iteriert der Browser externe Definitionen:
   • Wenn ein Formathinweis vorhanden ist, überprüft der Browser, ob er diesen Hinweis unterstützt, bevor der Download gestartet wird. Wenn der Browser den Hinweis nicht unterstützt, geht der Browser zum nächsten weiter.
   • Wenn kein Formathinweis vorhanden ist, lädt der Browser die Ressource herunter.

Durch die Kombination aus lokalen und externen Anweisungen mit entsprechenden Formathinweisen können Sie alle verfügbaren Schriftarten festlegen und den Browser den Rest übernehmen lassen. Der Browser ermittelt, welche Ressourcen erforderlich sind, und wählt das optimale Format aus.

Untereinstellung für Unicode-Bereich

Zusätzlich zu den Schrifteigenschaften wie Stil, Stärke und Streckung können Sie mit der @font-face-Regel eine Reihe von Unicode-Codepunkten definieren, die von jeder Ressource unterstützt werden. Auf diese Weise können Sie eine große Unicode-Schriftart in kleinere Teilmengen aufteilen (z. B. lateinische, kyrillische und griechische Teilmengen) und nur die Glyphen herunterladen, die zum Rendern des Textes auf einer bestimmten Seite erforderlich sind.

Mit dem unicode-range-Deskriptor können Sie eine durch Kommas getrennte Liste von Bereichwerten angeben, die jeweils in einer von drei verschiedenen Formen vorliegen können:

• Einzelner Codepunkt (z. B. U+416)
• Intervallbereich (z. B. U+400-4ff): gibt die Start- und Endcodepunkte eines Bereichs an
• Platzhalterbereich (z. B. U+4??): ? Zeichen stehen für eine beliebige Hexadezimalzahl

Beispielsweise können Sie die Familie Awesome Font in lateinische und japanische Teilmengen aufteilen, die der Browser jeweils nach Bedarf herunterlädt:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

Durch die Verwendung von Unicode-Teilmengen und separaten Dateien für jede stilistische Variante der Schriftart können Sie eine zusammengesetzte Schriftfamilie definieren, die sowohl schneller als auch effizienter heruntergeladen werden kann. Besucher laden nur die benötigten Varianten und Teilmengen herunter. Es ist nicht gezwungen, Teilmengen herunterzuladen, die sie vielleicht nie auf der Seite sehen oder verwenden würden.

Nahezu alle Browser unterstützen unicode-range. Aus Gründen der Kompatibilität mit älteren Browsern müssen Sie möglicherweise auf eine "manuelle Untereinstellung" zurückgreifen. In diesem Fall müssen Sie eine einzelne Schriftartressource bereitstellen, die alle erforderlichen Teilmengen enthält, und den Rest im Browser ausblenden. Wenn die Seite beispielsweise nur lateinische Zeichen verwendet, können Sie andere Glyphen entfernen und diese spezielle Teilmenge als eigenständige Ressource bereitstellen.

1. Bestimmen Sie, welche Teilmengen erforderlich sind:
   • Wenn der Browser die Untereinstellung Unicode-Bereich unterstützt, wird automatisch die richtige Teilmenge ausgewählt. Die Seite muss nur die Teilmengendateien bereitstellen und die entsprechenden Unicode-Bereiche in den @font-face-Regeln angeben.
   • Wenn der Browser keine Untereinstellung für Unicode-Bereiche unterstützt, muss die Seite alle unnötigen Teilmengen ausblenden, d. h., der Entwickler muss die erforderlichen Teilmengen angeben.
2. Schriftartenuntergruppen generieren:
   • Verwenden Sie das Open-Source-Tool pyftsubset, um Ihre Schriftarten zu Teilmengen zu erstellen und zu optimieren.
   • Bei einigen Schriftartservern, z. B. Google Fonts, werden standardmäßig automatisch Teilmengen erstellt.
   • Bei einigen Schriftartendiensten ist eine manuelle Untereinstellung über benutzerdefinierte Suchparameter möglich. Damit können Sie die erforderliche Teilmenge für Ihre Seite manuell angeben. Weitere Informationen finden Sie in der Dokumentation Ihres Schriftartenanbieters.

Auswahl und Synthese von Schriftarten

Jede Schriftfamilie kann aus mehreren Stilvarianten (regulär, fett, kursiv) und mehreren Schriftstärken für jeden Stil bestehen. Jedes davon kann wiederum sehr unterschiedliche Glyphenformen enthalten, z. B. unterschiedliche Abstände, Größen oder eine ganz andere Form.

Das obige Diagramm zeigt eine Schriftfamilie mit drei verschiedenen fett gedruckten Schriftstärken:

• 400 (regulär).
• 700 (fett)
• 900 (extra fett)

Alle anderen Varianten, die sich dazwischen befinden (grau markiert), werden vom Browser automatisch der nächstgelegenen Variante zugeordnet.

Wenn ein Gewicht angegeben ist, für das kein Gesicht vorhanden ist, wird eine Fläche mit einem nahe gelegenen Gewicht verwendet. Im Allgemeinen werden fett formatierte Flächen Flächen mit höheren Gewichten und leichten Flächen gegenüber Flächen mit einer geringeren Gewichtung zugeordnet.

Algorithmus für den CSS-Schriftartabgleich

Eine ähnliche Logik gilt für kursivige Varianten. Der Schriftdesigner steuert, welche Varianten er erstellt, und Sie steuern, welche Varianten auf der Seite verwendet werden. Da es sich bei jeder Variante um einen separaten Download handelt, sollten Sie die Anzahl der Varianten gering halten. Sie können z. B. zwei fett gedruckte Varianten für die Familie Awesome Font definieren:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

Im obigen Beispiel wird die Awesome Font-Familie deklariert. Sie besteht aus zwei Ressourcen, die denselben Satz von lateinischen Glyphen (U+000-5FF) abdecken, aber zwei verschiedene Gewichte bieten: normal (400) und fett (700). Was passiert jedoch, wenn durch eine Ihrer CSS-Regeln eine andere Schriftstärke angegeben oder die Eigenschaft font-style auf italic gesetzt wird?

• Wenn keine genaue Schriftartübereinstimmung verfügbar ist, verwendet der Browser die am besten passende Schriftart.
• Wenn keine stilistische Übereinstimmung gefunden wird (z. B., wenn im obigen Beispiel keine kursiven Varianten angegeben wurden), synthetisiert der Browser eine eigene Schriftartvariante.

Das obige Beispiel veranschaulicht den Unterschied zwischen den Ergebnissen der tatsächlichen und der synthetisierten Schriftarten für Open Sans. Alle synthetisierten Varianten werden aus einer einzigen Schriftart mit einer Schriftstärke von 400 generiert. Wie Sie sehen, gibt es einen deutlichen Unterschied bei den Ergebnissen. Es sind keine Details zum Generieren der fett gedruckten und schrägen Varianten angegeben. Daher variieren die Ergebnisse von Browser zu Browser und hängen stark von der Schriftart ab.

Checkliste zur Optimierung der Schriftgröße im Web

• Überwachen und überprüfen Sie die Schriftartnutzung:Verwenden Sie auf Ihren Seiten nicht zu viele Schriftarten und minimieren Sie für jede Schriftart die Anzahl der verwendeten Varianten. Dies trägt dazu bei, eine einheitlichere und schnellere User Experience zu schaffen.
• Vermeiden Sie nach Möglichkeit ältere Formate:EOT-, TTF- und WOFF-Formate sind größer als WOFF 2.0. EOT und TTF sind absolut unnötige Formate. WOFF kann akzeptabel sein, wenn Internet Explorer 11 unterstützt werden muss. Wenn Sie ausschließlich moderne Browser bedienen, ist die ausschließliche Verwendung von WOFF 2.0 die einfachste und leistungsfähigste Option.
• Unterteilen Sie Ihre Schriftartressourcen:Viele Schriftarten können in Teilmengen oder in mehrere Unicode-Bereiche aufgeteilt werden, sodass nur die Glyphen bereitgestellt werden, die für eine bestimmte Seite erforderlich sind. Dadurch wird die Dateigröße verringert und die Downloadgeschwindigkeit der Ressource verbessert. Achten Sie jedoch bei der Definition der Teilmengen darauf, dass Sie für die Wiederverwendung von Schriftarten optimieren. Laden Sie beispielsweise nicht auf jeder Seite einen anderen, aber überlappenden Satz von Zeichen herunter. Es empfiehlt sich, Untergruppen basierend auf Skripten zu erstellen, z. B. Latein und Kyrillisch.
• local() in der src-Liste Vorrang geben: Wenn Sie local('Font Name') an erster Stelle in der src-Liste aufführen, werden keine HTTP-Anfragen für Schriftarten gesendet, die bereits installiert sind.
• Verwenden Sie Lighthouse, um die Textkomprimierung zu testen.

Auswirkungen auf Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS)

Abhängig vom Inhalt Ihrer Seite können Textknoten als Kandidaten für Largest Contentful Paint (LCP) betrachtet werden. Achten Sie daher darauf, dass die Schriftarten im Web so klein wie möglich sind. Folgen Sie dazu den Tipps in diesem Artikel, damit Nutzer den Text auf Ihrer Seite so schnell wie möglich sehen können.

Falls Sie befürchten, dass es trotz Ihrer Optimierungsmaßnahmen zu lange dauert, bis der Seitentext aufgrund einer großen Webschriftart-Ressource angezeigt wird, verfügt die font-display-Eigenschaft über eine Reihe von Einstellungen, mit denen Sie unsichtbaren Text vermeiden können, während eine Schriftart heruntergeladen wird. Die Verwendung des Werts swap kann jedoch zu erheblichen Layoutverschiebungen führen, die sich auf den Cumulative Layout Shift (CLS) Ihrer Website auswirken. Verwenden Sie nach Möglichkeit die Werte optional oder fallback.

Wenn Ihre Webschriftarten für Ihr Branding – und damit für die Nutzererfahrung – entscheidend sind, sollten Sie sie vorab laden, damit der Browser einen Vorsprung bei der Anforderung hat. Dadurch lässt sich der Zeitraum für den Umtausch verkürzen, wenn Sie font-display: swap verwenden, oder der Blockierungszeitraum, wenn Sie font-display nicht verwenden.