Schriftgröße für das Web verringern

Ilya Grigorik

Jeremy Wagner

Typografie ist ein grundlegender Bestandteil von gutem Design, Branding, Lesbarkeit und Barrierefreiheit. Webfonts ermöglichen all das und noch mehr: Der Text ist auswählbar, durchsuchbar, zoombar und für hohe DPI-Werte optimiert. So wird unabhängig von Bildschirmgröße und ‑auflösung eine konsistente und scharfe Textwiedergabe gewährleistet. Webfonts sind entscheidend für gutes Design, eine gute Nutzererfahrung und eine gute Leistung.

Die Optimierung von Webfonts ist ein wichtiger Bestandteil der Gesamtstrategie zur Leistungsoptimierung. Jede Schriftart ist eine zusätzliche Ressource und einige Schriftarten können die Wiedergabe des Textes blockieren. Nur weil auf der Seite Webfonts verwendet werden, muss sie aber nicht langsamer gerendert werden. Im Gegenteil: Optimierte Schriftarten in Kombination mit einer durchdachten Strategie für das Laden und Anwenden auf der Seite können die Gesamtgröße der Seite reduzieren und die Renderingzeiten verbessern.

Anatomie einer Web-Schriftart

Ein Webfont ist eine Sammlung von Glyphen. Jede Glyphe ist eine Vektorform, die einen Buchstaben oder ein Symbol beschreibt. Daher bestimmen zwei einfache Variablen die Größe einer bestimmten Schriftartdatei: die Komplexität der Vektorpfade jeder Glyphe und die Anzahl der Glyphen in einer bestimmten Schriftart. Open Sans, eine der beliebtesten Webfonts, enthält beispielsweise 897 Glyphen, darunter lateinische, griechische und kyrillische Zeichen.

Bei der Auswahl einer Schriftart ist es wichtig, die unterstützten Zeichensätze zu berücksichtigen. Wenn Sie Ihre Seiteninhalte in mehrere Sprachen übersetzen müssen, sollten Sie eine Schriftart verwenden, die Ihren Nutzern ein einheitliches Erscheinungsbild und eine einheitliche Nutzererfahrung bietet. Die Noto-Schriftfamilie von Google soll beispielsweise alle Sprachen der Welt unterstützen. Die Gesamtgröße von Noto mit allen Sprachen beträgt jedoch über 1,1 GB.

In diesem Beitrag erfahren Sie, wie Sie die Größe der bereitgestellten Webfont-Dateien reduzieren können.

Webfont-Formate

Derzeit werden im Web zwei empfohlene Schriftcontainerformate verwendet:

• EOT
• TTF
• WOFF
• WOFF2.

WOFF und WOFF 2.0 werden breit unterstützt und sind mit allen modernen Browsern kompatibel.

• Stellen Sie modernen Browsern die WOFF 2.0-Variante bereit.
• Wenn es unbedingt erforderlich ist, z. B. wenn Sie Internet Explorer 11 weiterhin unterstützen müssen, stellen Sie WOFF als Fallback bereit.
• Alternativ können Sie Webfonts für ältere Browser auch nicht verwenden und auf die Systemschriftarten zurückgreifen. Das kann auch für ältere, eingeschränktere Geräte leistungsstärker sein.
• Da WOFF und WOFF 2.0 alle Anforderungen für moderne und ältere Browser abdecken, ist die Verwendung von EOT und TTF nicht mehr erforderlich und kann zu längeren Downloadzeiten für Webfonts führen.

Webfonts und Komprimierung

Sowohl WOFF als auch WOFF 2.0 haben eine integrierte Komprimierung. Die interne Komprimierung von WOFF 2.0 verwendet Brotli und bietet eine bis zu 30% bessere Komprimierung als WOFF. Weitere Informationen finden Sie in dem WOFF 2.0-Evaluierungsbericht.

Einige Schriftformate enthalten zusätzliche Metadaten wie Font-Hinting und Kerning-Informationen, die auf einigen Plattformen möglicherweise nicht erforderlich sind. Dadurch lässt sich die Dateigröße weiter optimieren. Google Fonts bietet beispielsweise über 30 optimierte Varianten für jede Schriftart und erkennt und liefert automatisch die optimale Variante für jede Plattform und jeden Browser.

Schriftfamilie mit @font-face definieren

Mit der CSS-Regel @font-face können Sie den Speicherort einer bestimmten Schriftartressource, ihre Stileigenschaften und die Unicode-Codepunkte definieren, für die sie verwendet werden soll. Eine Kombination solcher @font-face-Deklarationen kann verwendet werden, um eine „Schriftfamilie“ zu erstellen. Der Browser verwendet diese, um zu ermitteln, welche Schriftartressourcen heruntergeladen und auf die aktuelle Seite angewendet werden müssen.

Variable Schriftarten verwenden

Variable Schriftarten können die Dateigröße Ihrer Schriftarten erheblich reduzieren, wenn Sie mehrere Varianten einer Schriftart benötigen. Anstatt die normalen und fetten Stile sowie die kursiven Versionen laden zu müssen, können Sie eine einzelne Datei laden, die alle Informationen enthält. Die Dateigrößen variabler Schriftarten sind jedoch größer als die einer einzelnen Schriftartvariante, aber kleiner als die Kombination vieler Varianten. Anstatt einer großen variablen Schriftart ist es möglicherweise besser, zuerst wichtige Schriftartvarianten bereitzustellen und andere Varianten später herunterzuladen.

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

Das richtige Format auswählen

Jede @font-face-Deklaration enthält den Namen der Schriftfamilie, die als logische Gruppe mehrerer Deklarationen dient, Schriftarteigenschaften wie Stil, Stärke und Dehnung sowie den Deskriptor `src`, 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');
}

In den obigen Beispielen wird zuerst eine einzelne Awesome Font-Familie mit zwei Stilen (normal und kursiv) definiert, 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 Direktive local() können Sie lokal installierte Schriftarten referenzieren, laden und verwenden. Wenn die Schriftart bereits auf dem System des Nutzers installiert ist, wird das Netzwerk vollständig umgangen. Das ist die schnellste Methode.
• Mit der Direktive url() können Sie externe Schriftarten laden. Sie können einen optionalen format()-Hinweis enthalten, der das Format der Schriftart angibt, auf die in der angegebenen URL verwiesen wird.

Wenn der Browser feststellt, dass die Schriftart benötigt wird, durchläuft er die angegebene Ressourcenliste in der angegebenen Reihenfolge und versucht, die entsprechende Ressource zu laden. Beispiel:

1. Der Browser führt das Seitenlayout aus und ermittelt, welche Schriftartvarianten erforderlich sind, um den angegebenen Text auf der Seite zu rendern. Schriftarten, die nicht Teil des CSS-Objektmodells (CSSOM) der Seite sind, werden vom Browser nicht heruntergeladen, da sie nicht erforderlich sind.
2. Für jede erforderliche Schriftart prüft der Browser, ob sie lokal verfügbar ist.
3. Wenn die Schriftart nicht lokal verfügbar ist, durchläuft der Browser die externen Definitionen:
   • Wenn ein Formathinweis vorhanden ist, prüft der Browser, ob er ihn unterstützt, bevor er den Download startet. Wenn der Browser den Hinweis nicht unterstützt, geht er zum nächsten Hinweis.
   • Wenn kein Formathinweis vorhanden ist, lädt der Browser die Ressource herunter.

Durch die Kombination von lokalen und externen Direktiven mit entsprechenden Formathinweisen können Sie alle verfügbaren Schriftformate angeben und den Rest dem Browser überlassen. Der Browser ermittelt, welche Ressourcen erforderlich sind, und wählt das optimale Format aus.

Unicode-Bereich-Subsetting

Neben Schriftarteigenschaften wie Stil, Stärke und Dehnung können Sie mit der Regel @font-face auch eine Reihe von Unicode-Codepunkten definieren, die von jeder Ressource unterstützt werden. So 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 Bereichswerten angeben, die jeweils eine von drei verschiedenen Formen haben 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 hexadezimale Ziffer

Sie können beispielsweise Ihre Awesome Font-Familie 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-Bereich-Teilmengen und separaten Dateien für jede Stilvariante der Schriftart können Sie eine zusammengesetzte Schriftfamilie definieren, die sowohl schneller als auch effizienter heruntergeladen werden kann. Besucher laden nur die Varianten und Teilmengen herunter, die sie benötigen, und müssen keine Teilmengen herunterladen, die sie auf der Seite möglicherweise nie sehen oder verwenden.

Fast alle Browser unterstützen unicode-range. Für die Kompatibilität mit älteren Browsern müssen Sie möglicherweise auf das manuelle Subsetting zurückgreifen. In diesem Fall müssen Sie eine einzelne Schriftartressource bereitstellen, die alle erforderlichen Teilmengen enthält, und den Rest für den Browser ausblenden. Wenn auf der Seite beispielsweise nur lateinische Zeichen verwendet werden, können Sie andere Glyphen entfernen und diese bestimmte Teilmenge als eigenständige Ressource bereitstellen.

1. Ermitteln, welche Teilmengen benötigt werden:
   • Wenn der Browser das Unicode-Bereich-Subsetting unterstützt, wählt er automatisch die richtige Teilmenge aus. Auf der Seite müssen nur die Teilmengendateien bereitgestellt und entsprechende Unicode-Bereiche in den @font-face-Regeln angegeben werden.
   • Wenn der Browser das Unicode-Bereich-Subsetting nicht unterstützt, müssen auf der Seite alle unnötigen Teilmengen ausgeblendet werden. Das heißt, der Entwickler muss die erforderlichen Teilmengen angeben.
2. Schriftart-Teilmengen generieren:
   • Verwenden Sie das Open-Source-Tool pyftsubset, um Ihre Schriftarten zu subsetten und zu optimieren.
   • Einige Schriftartserver wie Google Fonts führen standardmäßig automatisch ein Subsetting durch.
   • Einige Schriftartdienste ermöglichen das manuelle Subsetting über benutzerdefinierte Abfrageparameter. Damit können Sie die erforderliche Teilmenge für Ihre Seite manuell angeben. Weitere Informationen finden Sie in der Dokumentation Ihres Schriftartanbieters.

Schriftartauswahl und ‑synthese

Jede Schriftfamilie kann aus mehreren Stilvarianten (normal, fett, kursiv) und mehreren Stärken für jeden Stil bestehen. Jede 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 fetten Stärken:

• 400 (normal)
• 700 (fett)
• 900 (extrafett)

Alle anderen Zwischenvarianten (grau dargestellt) werden vom Browser automatisch der nächstgelegenen Variante zugeordnet.

Wenn eine Stärke angegeben wird, für die keine Schriftart vorhanden ist, wird eine Schriftart mit einer ähnlichen Stärke verwendet. Im Allgemeinen werden fette Stärken Schriftarten mit höheren Stärken und leichte Stärken Schriftarten mit niedrigeren Stärken zugeordnet.

CSS font matching algorithm

Eine ähnliche Logik gilt für kursive Varianten. Der Schriftartdesigner bestimmt, welche Varianten er erstellt, und Sie bestimmen, welche Varianten Sie auf der Seite verwenden. Da jede Variante ein separater Download ist, ist es ratsam, die Anzahl der Varianten gering zu halten. Sie können beispielsweise zwei fette Varianten für die Awesome Font-Familie 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, die aus zwei Ressourcen besteht, die denselben Satz lateinischer Glyphen (U+000-5FF) abdecken, aber zwei unterschiedliche „Stärken“ bieten: normal (400) und fett (700). Was passiert jedoch, wenn in einer 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, ersetzt der Browser sie durch die nächstgelegene Übereinstimmung.
• Wenn keine stilistische Übereinstimmung gefunden wird (z. B. wurden im obigen Beispiel keine kursiven Varianten deklariert), synthetisiert der Browser eine eigene Schriftartvariante.

Das obige Beispiel zeigt den Unterschied zwischen den tatsächlichen und den synthetisierten Schriftartergebnissen für Open Sans. Alle synthetisierten Varianten werden aus einer einzelnen Schriftart mit der Stärke 400 generiert. Wie Sie sehen, gibt es einen deutlichen Unterschied bei den Ergebnissen. Die Details zur Generierung der fetten und kursiven Varianten sind nicht angegeben. Daher variieren die Ergebnisse je nach Browser und sind stark von der Schriftart abhängig.

Checkliste zur Optimierung der Webfont-Größe

• Schriftartnutzung prüfen und überwachen:Verwenden Sie nicht zu viele Schriftarten auf Ihren Seiten und minimieren Sie für jede Schriftart die Anzahl der verwendeten Varianten. So können Sie Ihren Nutzern eine konsistentere und schnellere Nutzererfahrung bieten.
• Vermeiden Sie nach Möglichkeit ältere Formate:Die Formate EOT, TTF und WOFF sind größer als WOFF 2.0. EOT und TTF sind absolut unnötige Formate, während WOFF akzeptabel sein kann, wenn Sie Internet Explorer 11 unterstützen müssen. Wenn Sie nur moderne Browser ansprechen, ist die ausschließliche Verwendung von WOFF 2.0 die einfachste und leistungsstärkste Option.
• Schriftartressourcen subsetten:Viele Schriftarten können in Teilmengen aufgeteilt oder in mehrere Unicode-Bereiche unterteilt werden, um nur die Glyphen bereitzustellen, die für eine bestimmte Seite erforderlich sind. Dadurch wird die Dateigröße reduziert und die Downloadgeschwindigkeit der Ressource verbessert. Achten Sie jedoch darauf, dass Sie beim Definieren der Teilmengen die Wiederverwendung von Schriftarten optimieren. Laden Sie beispielsweise nicht auf jeder Seite einen anderen, aber sich überschneidenden Zeichensatz herunter. Eine gute Methode ist das Subsetting nach Skript, z. B. Lateinisch und Kyrillisch.
• local() in der src -Liste Vorrang geben: Wenn Sie local('Font Name') zuerst in der src -Liste angeben, werden keine HTTP-Anfragen für bereits installierte Schriftarten gestellt.
• Verwenden Sie Lighthouse , um die Textkomprimierung zu testen.

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

Je nach Inhalt Ihrer Seite können Textknoten Kandidaten für Largest Contentful Paint (LCP) sein. Daher ist es wichtig, dass Ihre Webfonts so klein wie möglich sind. Folgen Sie dazu den Empfehlungen in diesem Artikel, damit Ihre Nutzer den Text auf Ihrer Seite so schnell wie möglich sehen.

Wenn Sie befürchten, dass der Text auf der Seite aufgrund einer großen Webfont-Ressource zu lange braucht, um angezeigt zu werden, bietet die font-display Eigenschaft eine Reihe von Einstellungen, mit denen Sie vermeiden können, dass Text nicht sichtbar ist, 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 Webfonts entscheidend für Ihr Branding und damit für die Nutzererfahrung sind, sollten Sie Ihre Schriftarten vorab laden, damit der Browser sie schneller anfordern kann. Dadurch kann sowohl der Zeitraum für den Austausch reduziert werden, wenn Sie font-display: swap verwenden, als auch der Zeitraum für die Blockierung, wenn Sie font-display nicht verwenden.