Schriftgröße für das Web verringern

Ilya Grigorik

Jeremy Wagner

Typografie ist von grundlegender Bedeutung für gutes Design, Branding, Lesbarkeit und Barrierefreiheit. Webfonts ermöglichen all das und mehr: Der Text ist auswählbar, durchsuchbar, zoombar und für hohe DPI-Werte optimiert. So wird Text unabhängig von Bildschirmgröße und ‑auflösung einheitlich und scharf gerendert. Webfonts sind für gutes Design, UX und Leistung unerlässlich.

Die Optimierung von Webfonts ist ein wichtiger Bestandteil der Gesamtleistungsstrategie. Jede Schriftart ist eine zusätzliche Ressource. Einige Schriftarten können das Rendern des Texts 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 dazu beitragen, die Gesamtseitengröße zu reduzieren und die Rendering-Zeiten zu verbessern.

Aufbau einer Webschriftart

Eine Webschriftart ist eine Sammlung von Glyphen. Jede Glyphe ist eine Vektorform, die einen Buchstaben oder ein Symbol beschreibt. Die Größe einer bestimmten Schriftartdatei wird also durch zwei einfache Variablen bestimmt: 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 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. Beachten Sie jedoch, dass die Gesamtgröße von Noto mit allen Sprachen zu einem ZIP-Download von mehr als 1,1 GB führt.

In diesem Beitrag erfahren Sie, wie Sie die Dateigröße Ihrer Webfonts reduzieren können.

Webschriftartformate

Derzeit werden im Web zwei empfohlene Schriftartcontainerformate verwendet:

• EOT
• TTF
• WOFF
• 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 Internet Explorer 11 weiterhin unterstützen müssen, stellen Sie die WOFF-Datei als Fallback bereit.
• Alternativ können Sie auch keine Webschriftarten für Legacy-Browser verwenden und stattdessen auf die Systemschriftarten zurückgreifen. Dies kann auch für ältere Geräte mit weniger Ressourcen von Vorteil sein.
• Da WOFF und WOFF 2.0 alle Anforderungen für moderne und ältere Browser abdecken, die noch verwendet werden, sind EOT und TTF nicht mehr erforderlich und können zu längeren Downloadzeiten für Webfonts führen.

Webschriftarten und Komprimierung

Sowohl WOFF als auch WOFF 2.0 haben eine integrierte Komprimierung. Die interne Komprimierung von WOFF 2.0 erfolgt mit Brotli und bietet eine bis zu 30% bessere Komprimierung als WOFF. Weitere Informationen

Einige Schriftartenformate 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 mehr als 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-At-Regel @font-face können Sie den Speicherort einer bestimmten Schriftartressource, ihre Stileigenschaften und die Unicode-Codepoints definieren, für die sie verwendet werden soll. Eine Kombination solcher @font-face-Deklarationen kann verwendet werden, um eine „Schriftfamilie“ zu erstellen, mit der der Browser ermittelt, welche Schriftressourcen heruntergeladen und auf die aktuelle Seite angewendet werden müssen.

Variable Schriftart in Betracht ziehen

Variable Schriftarten können die Dateigröße Ihrer Schriftarten erheblich reduzieren, wenn Sie mehrere Varianten einer Schriftart benötigen. Anstatt die regulären und fett formatierten Schriftarten sowie deren kursive Versionen laden zu müssen, können Sie eine einzelne Datei laden, die alle Informationen enthält. Die Dateigrößen von variablen 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 unter Introduction to variable fonts on the web.

Das richtige Format auswählen

Jede @font-face-Deklaration enthält den Namen der Schriftfamilie, die als logische Gruppe mehrerer Deklarationen dient, Schriftattribute wie Stil, Stärke und Dehnung sowie den src-Deskriptor, der eine priorisierte Liste von Speicherorten für die Schriftressource 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');
}

Zuerst wird eine einzelne Awesome Font-Familie mit zwei Stilen (normal und italic) 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 local()-Anweisung können Sie auf lokal installierte Schriftarten verweisen, sie laden und verwenden. Wenn der Nutzer die Schriftart bereits auf seinem System installiert hat, wird das Netzwerk vollständig umgangen. Das ist die schnellste Methode.
• Mit der url()-Anweisung können Sie externe Schriftarten laden. Sie darf einen optionalen format()-Hinweis enthalten, der das Format der Schriftart angibt, auf die über die angegebene URL verwiesen wird.

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

1. Der Browser führt das Seitenlayout aus und ermittelt, welche Schriftvarianten zum Rendern des angegebenen Texts auf der Seite erforderlich sind. 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 externe Definitionen:
   • Wenn ein Formathint vorhanden ist, prüft der Browser, ob er das Hint unterstützt, bevor er den Download startet. Wenn der Browser den Hinweis nicht unterstützt, wird der nächste Hinweis angezeigt.
   • Wenn kein Formathint vorhanden ist, lädt der Browser die Ressource herunter.

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

Teilmengeneinstellung für Unicode-Bereich

Zusätzlich zu Schriftarteigenschaften wie Stil, Stärke und Dehnung können Sie mit der @font-face-Regel 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 Texts 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 Endcodepoints eines Bereichs an.
• Platzhalterbereich (z. B. U+4??): ? Zeichen stehen für eine beliebige hexadezimale Ziffer.

Sie können beispielsweise die Schriftfamilie Awesome Font in lateinische und japanische Teilmengen aufteilen, die der Browser bei 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-Bereichsuntermengen und separaten Dateien für jede stilistische Variante der Schriftart können Sie eine zusammengesetzte Schriftartfamilie definieren, die sowohl schneller als auch effizienter heruntergeladen werden kann. Besucher laden nur die Varianten und Untergruppen herunter, die sie benötigen. Sie werden nicht gezwungen, Untergruppen herunterzuladen, die sie auf der Seite möglicherweise nie sehen oder verwenden.

unicode-range wird von fast allen Browsern unterstützt. Für die Kompatibilität mit älteren Browsern müssen Sie möglicherweise auf „manuelles Subsetting“ zurückgreifen. In diesem Fall müssen Sie auf eine einzelne Schriftartressource zurückgreifen, die alle erforderlichen Teilmengen enthält, und den Rest vor dem Browser verbergen. 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 Sie, welche Teilmengen erforderlich sind:
   • Wenn der Browser das Untersetzen von „unicode-range“ unterstützt, wird automatisch die richtige Teilmenge ausgewählt. Auf der Seite müssen nur die Teilmengen-Dateien bereitgestellt und entsprechende Unicode-Bereiche in den @font-face-Regeln angegeben werden.
   • Wenn der Browser das Unterteilen von unicode-range 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 unterteilen und zu optimieren.
   • Bei einigen Schriftartenservern, z. B. Google Fonts, wird standardmäßig automatisch eine Teilmenge erstellt.
   • Bei einigen Schriftartdiensten ist das manuelle Festlegen von Teilmengen über benutzerdefinierte Suchparameter möglich. So können Sie die erforderliche Teilmenge für Ihre Seite manuell angeben. Weitere Informationen finden Sie in der Dokumentation Ihres Schriftartenanbieters.

Schriftartauswahl und ‑synthese

Jede Schriftfamilie kann aus mehreren stilistischen Varianten (normal, fett, kursiv) und mehreren Schriftstärken für jeden Stil bestehen. Jede dieser Varianten 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 Fettstärken:

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

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

Wenn ein Gewicht angegeben wird, für das kein Gesicht vorhanden ist, wird ein Gesicht mit einem ähnlichen Gewicht verwendet. Im Allgemeinen werden fette Schriftstärken Gesichtern mit schwereren Gewichten und leichte Schriftstärken Gesichtern mit leichteren Gewichten zugeordnet.

Algorithmus für den CSS-Schriftartenabgleich

Eine ähnliche Logik gilt für kursive Varianten. Der Schriftartendesigner legt fest, welche Varianten er erstellt, und Sie legen fest, welche Varianten Sie auf der Seite verwenden. Da jede Variante ein separater Download ist, sollten Sie die Anzahl der Varianten gering halten. Sie können beispielsweise zwei fette Varianten für die Schriftfamilie 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 Schriftfamilie Awesome Font deklariert, die aus zwei Ressourcen besteht, die denselben Satz lateinischer Glyphen (U+000-5FF) abdecken, aber zwei unterschiedliche „Gewichtungen“ bieten: normal (400) und fett (700). Was passiert jedoch, wenn in einer Ihrer CSS-Regeln eine andere Schriftstärke angegeben oder das Attribut font-style auf italic festgelegt wird?

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

Im obigen Beispiel wird der Unterschied zwischen den tatsächlichen und den synthetisierten Schriftartergebnissen für Open Sans veranschaulicht. 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. Es wird nicht angegeben, wie die fett und kursiv formatierten Varianten generiert werden. Daher variieren die Ergebnisse je nach Browser und sind stark von der Schriftart abhängig.

Checkliste zur Optimierung der Schriftgröße für das Web

• Schriftartennutzung 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 einheitlichere und schnellere Nutzung ermöglichen.
• Legacy-Formate nach Möglichkeit vermeiden:Die Formate EOT, TTF und WOFF sind größer als WOFF 2.0. EOT und TTF sind absolut unnötige Formate. WOFF ist möglicherweise akzeptabel, wenn Sie Internet Explorer 11 unterstützen müssen. Wenn Sie nur moderne Browser als Zielgruppe haben, ist die Verwendung von WOFF 2.0 die einfachste und leistungsstärkste Option.
• Schriftartenressourcen in Teilmengen aufteilen: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 beim Definieren der Teilmengen darauf, die Schriftartwiederverwendung zu optimieren. Laden Sie beispielsweise nicht auf jeder Seite einen anderen, aber sich überschneidenden Zeichensatz herunter. Es empfiehlt sich, die Schriftart nach Schriftsystem zu unterteilen, z. B. in lateinische und kyrillische Schrift.
• local() in der Liste src vorziehen:Wenn Sie local('Font Name') zuerst in der Liste src angeben, werden keine HTTP-Anfragen für Schriftarten gesendet, die bereits installiert sind.
• Verwenden Sie Lighthouse, um Textkomprimierung zu testen.

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

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

Wenn Sie befürchten, dass der Text auf der Seite trotz Ihrer Optimierungsbemühungen aufgrund einer großen Webfont-Ressource zu lange braucht, bis er angezeigt wird, bietet die font-display-Eigenschaft eine Reihe von Einstellungen, mit denen Sie unsichtbaren Text vermeiden können, während eine Schriftart heruntergeladen wird. Die Verwendung des swap-Werts 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 für Ihr Branding und damit für die Nutzerfreundlichkeit entscheidend sind, sollten Sie sie vorab laden, damit der Browser sie schneller anfordern kann. Dadurch kann sowohl der Tauschzeitraum verkürzt werden, wenn Sie font-display: swap verwenden, als auch der Sperrzeitraum, wenn Sie font-display nicht verwenden.