Verständnis von Webfonts und wie man das Beste aus ihnen herausholt

Thierry Blancpain ist ein Marken- und Interaktionsdesigner bei Informal Inquiry in New York City und Mitbegründer von Grilli Type, einer Schweizer Schriftgießerei. Während sich dieser Artikel generell auf alle Webfonts anwenden lässt, werden die Schriften von Grilli Type durchgängig als Beispiele für die Konzepte verwendet, insbesondere solche, die OpenType-Funktionen demonstrieren.

Die Verwendung eigener Schriften anstelle von Systemschriften wird einfacher, ist aber immer noch ein sich entwickelndes Feld. Wir werden in diesem Beitrag die verschiedenen Arten von Schriftformaten und Tipps und Best Practices dafür behandeln. Wir werden uns auch mit tiefergehenden Funktionen befassen für diejenigen unter Ihnen, die ihr Wissen erweitern und das Handwerk mit fortgeschrittenen Konzepten und Überlegungen bei der Verwendung von Webfonts perfektionieren möchten. Am Ende werden Sie hoffentlich nicht nur in der Lage sein, Webfonts zu nutzen, sondern auch das Beste aus ihnen herauszuholen.

Los geht's!

Schriftformate

Wenn Sie Lizenzen für Webfonts erwerben, erhalten Sie ein Paket von Schriftdateien, das in der Regel mindestens einige der folgenden Formate enthält

• Embedded OpenType (EOT): EOT ist ein älteres Format, das von Microsoft entwickelt wurde. Ältere Versionen von Internet Explorer benötigen EOT, um Ihre Webfonts darzustellen. EOT wird oft unkomprimiert ausgeliefert. Wenn Sie also keine Browserunterstützung für Versionen wie IE8 oder älter benötigen, ist es besser, es wegzulassen.
• TrueType (TTF): TTF ist ein Schriftformat, das in den 1980er Jahren von Microsoft und Apple entwickelt wurde. Moderne TTF-Dateien werden auch TrueType OpenType-Schriften genannt. TTF kann nützlich sein, um die Unterstützung für einige ältere Browser, insbesondere auf Mobilgeräten, zu erweitern, falls Sie dies benötigen.
• Web Open Font Format (WOFF): WOFF wurde 2009 als Wrapper-Format für TrueType- und OpenType-Schriften entwickelt. Es komprimiert die Dateien und wird von allen modernen Browsern unterstützt.
• Web Open Font Format 2 (WOFF2): WOFF2 ist eine Aktualisierung des ursprünglichen WOFF-Formats. Es wurde von Google entwickelt und gilt als das beste Format der Gruppe, da es kleinere Dateigrößen und eine bessere Leistung für moderne Browser bietet, die es unterstützen.

Wenn Sie hauptsächlich Benutzer mit modernen Browsern ansprechen, können Sie mit einer progressiven Methode von @font-face auskommen, die nur WOFF- und WOFF2-Formate liefert. Diese bieten die beste Komprimierung und ermöglichen es Ihnen, mit weniger Dateien in Ihrem Code zu arbeiten. Und wenn die Maschine eines Benutzers so alt ist, dass sie eines dieser Formate nicht unterstützt, ist es aus Leistungsgründen sowieso besser, ihm eine Systemschrift zu liefern.

Wenn Sie die Unterstützung so weit wie möglich erweitern möchten, fügen Sie EOT- und TTF-Dateien hinzu. SVG-Schriften wurden traditionell auch zur Erweiterung der Browserunterstützung verwendet, aber bei Grilli Type bieten wir keine SVG-Schriften mehr an, da sie eine Reihe von Nachteilen mit sich bringen. Google Chrome hat beispielsweise die Unterstützung für das Format sogar vollständig entfernt.

Webfonts einbetten

Wir verwenden @font-face, um Schriften in CSS einzubinden.

Hier ist die tiefste Unterstützungsebene, die alle bisher besprochenen Schriftformate umfasst

@font-face {
  font-family: FontName;
  src: url('path/filename.eot');
  src: url('path/filename.eot?#iefix') format('embedded-opentype'),
    url('path/filename.woff2') format('woff2'), 
    url('path/filename.woff') format('woff'),
    url('path/filename.ttf') format('truetype');
}

Wir können die Dinge ziemlich stark reduzieren, wenn wir nur moderne Browser unterstützen wollen

@font-face {
  font-family: FontName;
  src: url('path/filename.woff2') format('woff2'), 
    url('path/filename.woff') format('woff');
}

Sobald die Schrift deklariert und definiert ist, können wir sie auf unseren Elementen verwenden. Zum Beispiel

body {
  font-family: 'FontName', Helvetica, Arial, sans-serif;
}

Webfonts hosten

Eine der flexibelsten Möglichkeiten, Webfonts zu laden, ist das Selbst-Hosting. Das bedeutet, dass Sie die Dateien auf Ihrem eigenen Server hosten und Ihre Schriften immer verfügbar sind, wenn ein Besucher Ihre Website besucht, ohne eine Abhängigkeit von Drittanbietern. Weder Tracking-Codes noch JavaScript sind in der Regel erforderlich, um selbst gehostete Schriftdateien zu laden. Viele kleine Schriftgießereien bieten Schriften als direkten Download an, sodass sie selbst gehostet werden können, und bei Grilli Type sind wir davon überzeugt, dass dies der beste Weg ist, Schriften bereitzustellen.

Während einige Schriftgießereien Selbst-Hosting anbieten (sowohl mit als auch ohne umständliche Einschränkungen und Anforderungen), bieten andere nur gehostete Lösungen an, d. h. sie hosten die Dateien in Ihrem Namen. Einige der bekannten Anbieter sind Hoefler & Co., Font Bureau und Typotheque. Font Bureau und Typotheque bieten ihre Schriften zu unterschiedlichen Preisen auf beide Arten an.

Stellen Sie sicher, dass Sie wissen, wie die Webfonts einer Schriftgießerei angeboten werden, bevor Sie die Lizenz erwerben, da der Unterschied beim Hosting und die Nutzungsbedingungen beeinflussen können, wie sie implementiert werden. Holen Sie sich, was für Sie am sinnvollsten ist und Ihren Bedürfn Lúcfit, und stellen Sie sicher, dass Sie sie legal und gemäß der Lizenzvereinbarung der Gießerei verwenden.

Fortgeschrittene typografische Funktionen

Werfen wir einen Blick auf einige der fortgeschritteneren Funktionen von Webfonts.

Abstände und Laufschnitte

Es gibt zwei Einstellungen in den Schriftdateien, die den Abstand zwischen den Zeichen definieren

1. letter-spacing: Dies wird als seitliche Abstände links und rechts von jedem Zeichen definiert
2. font-kerning: Dies bezieht sich auf spezifische Anpassungen zwischen zwei Zeichen

Abstände können überhaupt nicht deaktiviert werden, da die Textdarstellungs-Engine (Ihr Browser) sonst nicht wüsste, was sie mit diesen Buchstaben tun soll. Laufschnitte hingegen sind in Browsern standardmäßig deaktiviert und müssen von Ihnen in Ihrem CSS aktiviert werden.

Es ist einfacher, Laufschnitte zu steuern, als Sie vielleicht denken! So aktivieren Sie sie in allen Browsern, die sie unterstützen

p {
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

Wenn Sie kein Tool wie Autoprefixer verwenden, um die Browserunterstützung in CSS zu verwalten, müssen Sie die Vendor-Präfixe für diese Einstellung manuell eintragen, um die Browserunterstützung auf ältere Versionen zu erweitern.

/* All vendor prefixes for `font-feature-settings` */
p {
  -moz-font-feature-settings:    "kern" 1; 
  -ms-font-feature-settings:     "kern" 1; 
  -o-font-feature-settings:      "kern" 1; 
  -webkit-font-feature-settings: "kern" 1; 
  font-feature-settings:         "kern" 1;
  font-kerning: normal;
}

Fortgeschrittene OpenType-Funktionen

Wir haben gerade besprochen, wie das Attribut font-feature-settings zur Steuerung von Laufschnitten verwendet wird, aber es kann auch zur Steuerung anderer verfügbarer OpenType-Funktionen in Ihren Webfonts verwendet werden. Die Anzahl der unterstützten Funktionen nimmt im Laufe der Zeit zu, und das CSS-Tricks Almanac ist eine gute Anlaufstelle, um zu sehen, was mit OpenType möglich ist.

OpenType-Funktionen sind wirklich spannend, da sie eine Menge Möglichkeiten eröffnen, Schriften zu steuern, ohne mehrere Dateien bereitstellen zu müssen, um denselben Effekt zu erzielen. Gleichzeitig ist es erwähnenswert, dass die Funktionen, die eine OpenType-Schriftdatei unterstützt, vom Schriftendesigner abhängen und nicht alle Schriften dieselben Funktionen unterstützen.

Um zu veranschaulichen, wie fortgeschrittene OpenType-Funktionen verkettet werden können, würde der folgende Code die numerischen Zeichen einer OpenType-fähigen Schrift aktivieren, die sowohl alte Ziffern (onum) als auch proportionale Ziffern (pnum) unterstützt, plus Laufschnitte aktivieren und einen bestimmten stilistischen Satz aktivieren, der in der Schrift enthalten ist.

.my-element {
  font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;
}

Das Attribut font-feature-settings kann verwendet werden, um stilistische Alternativen, diskretionäre Ligaturen, verschiedene verfügbare Ziffernarten in einer Schrift, Kapitälchen und andere nützliche Dinge zu aktivieren. Typofonderie hat eine schöne Übersicht über diese fortgeschrittenen Funktionen, einschließlich Beispielen.

Da font-feature-settings zum Setzen vieler OpenType-Funktionen gleichzeitig verwendet wird, ist es nicht möglich, eine einzelne Einstellung anders zu definieren, da die anderen Optionen nicht vererbt werden. Alle Funktionen müssten erneut definiert werden, um die Einstellungen für untergeordnete Elemente zu ändern.

Zeilenabstand und Wortabstand

CSS unterstützt seit langem die Attribute letter-spacing und word-spacing. Bei korrekter Anwendung bieten beide ein erhebliches Maß an Kontrolle über zwei sehr wichtige Aspekte, wie Ihre Typografie aussehen wird.

Wie bei allen typografischen Themen sollten Sie lernen, verschiedene Optionen sowohl funktional als auch visuell zu bewerten und Entscheidungen auf der Grundlage Ihres Eindrucks zu treffen. Unterschiedliche Kontexte können unterschiedliche Abstände erfordern.

Bei kleineren Größen profitieren die meisten Schriftarten von etwas zusätzlichem Abstand zwischen Zeichen und Wörtern. In größeren Kontexten, wie Überschriften, können Schriftarten von engeren Abständen profitieren. In beiden Fällen erfordern die richtigen Entscheidungen Aufmerksamkeit und Ihr bestes Urteilsvermögen, basierend auf den Ergebnissen.

Ich habe festgestellt, dass letter-spacing und word-spacing am besten mit em-Einheiten für die Werte funktionieren. Dies ermöglicht eine fließende Anpassung des Abstands basierend auf der Schriftgröße des Elements, auf das sie angewendet werden. Das folgende Beispiel gibt Ihrem Inhalt bei kleineren Schriftgrößen etwas mehr Raum zum Atmen.

p {
  font-size: 12px;
  letter-spacing: 0.015em;
  word-spacing: 0.001em;
}

Schrift-Rendering

Die Verwendung von Typografie auf Bildschirmen wirft wichtige Fragen über deren Rendering auf. Schriften werden in der Regel auf einem Gitter von etwa 1000 Einheiten Höhe – oder sogar größer – entworfen, dann aber in einer Größe von etwa 16 Pixel angezeigt. In einem Zusammenspiel zwischen Gerät, Bildschirm und Software erfordert diese Reduzierung von Auflösung und Wiedergabetreue einiges an Intelligenz, um kleine Schrift gut lesbar und ansprechend zu machen. Seien Sie auch hier aufmerksam, testen Sie in vielen Browsern und nutzen Sie Ihr bestes Urteilsvermögen, um die besten Methoden zur Erhöhung der Lesbarkeit anzuwenden.

Hinweisgebung

Jedes Betriebssystem behandelt Schriften anders als andere. Unter MacOS liegt die Intelligenz im Betriebssystem (und kann sich somit im Laufe der Zeit weiterentwickeln), während die Schriften selbst dumm sein können. Historisch gesehen sollten unter Windows die intelligenteren Funktionen in der Schriftsoftware enthalten sein, und das System sollte diese Funktionen nutzen, um zu entscheiden, wie eine Schrift bei verschiedenen Größen gerendert werden soll.

Diese Intelligenz wird als Hinting bezeichnet. Hinting-Informationen, die in die Schriftdateien eingebettet sind, können einem Computer mitteilen, dass die beiden Striche eines „H“-Zeichens die gleiche Linienbreite haben sollen oder dass der Abstand über und unter dem Querbalken bei kleineren Größen ungefähr gleich bleiben soll.

Hinting ist ein sehr komplexes und kompliziertes Thema, aber die wichtige Erkenntnis ist, dass die gleiche Schrift in der gleichen Größe unterschiedlich gerendert werden kann, selbst auf demselben Computer, abhängig von vielen Faktoren, einschließlich des Bildschirms, des Browsers und sogar der Schrift- und Hintergrundfarbe.

Microsoft bietet eine Anleitung zum Thema Hinting. Auch wenn sie ursprünglich 1997 veröffentlicht wurde, ist sie immer noch eine gute Lektüre, da sie das Thema so gründlich behandelt.

Schriftglättung

Während die in den Schriftdateien enthaltenen Hinting-Informationen unter MacOS weitgehend ignoriert werden, bieten bestimmte Browser zusätzliche Kontrolle über das Schrift-Rendering.

p {
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale; /* Firefox */
}

Die Verwendung dieser CSS-Eigenschaften führt zu einer schärferen, dünneren Textdarstellung unter MacOS und iOS. Aber Vorsicht: Dies kann auch zu Rendering-Problemen führen, insbesondere wenn Sie bereits eine dünne Schrift oder Schriftstärke verwenden.

Sowohl antialiased als auch grayscale sind hauptsächlich nützlich, um das Rendering von Schriften auszugleichen, wenn helle Texte auf dunklen Hintergründen verwendet werden, da sie sonst deutlich fetter gerendert würden.

Die Eigenschaft font-smoothing und ihre Werte sind nicht auf dem Weg, eine standardmäßige CSS-Funktion zu werden. Verwenden Sie sie daher mit Vorsicht und vielleicht nur in Kontexten, in denen Sie wissen, dass Sie einen bestimmten Browser und Kontext ansprechen müssen.

Vorsicht: OptimizeLegibility

Wir stoßen oft auf dieses Attribut, wenn wir die Schriftverwendung auf den Websites von Kunden von Grilli Type beheben.

p {
  text-rendering: optimizeLegibility;
}

Unter anderem aktiviert es Laufschnitte. Das war früher sehr nützlich, ist aber jetzt nicht mehr notwendig (wie oben gezeigt). Zusätzlich zu Laufschnitten aktiviert es auch alle Arten von Ligaturen, einschließlich extravaganter, die in den Schriftdateien vorhanden sein können.

Obwohl es einige Anwendungsfälle dafür gibt, verwenden Sie diese Funktion nicht, wenn Sie nicht genau wissen, was Sie damit tun. Wahrscheinlich brauchen Sie es sowieso nicht.

Webfont-Ressourcen

Wenn Sie bereit sind, tiefer in Webfonts einzutauchen, finden Sie hier eine Handvoll empfohlener Ressourcen, die Sie nutzen können, um mehr zu erfahren

• Clagnut’s OpenType CSS Sandbox von Richard Rutter: Ein großartiger Ort, um OpenType-Funktionen zu testen und ganz einfach Ihren benötigten CSS-Code zusammenzustellen.
• Webfont Handbook von Bram Stein: Dies ist das umfassendste E-Book, das Sie über Webfonts, Schrift-Rendering und Schrift-Performance lesen können.
• Copy Paste Character: Dies ist eine großartige Website, mit der Sie auf fast jedes Sonderzeichen zugreifen können, das Sie jemals verwenden könnten.
• Using @font-face von CSS-Tricks: Dieser Artikel enthält Snippets zur Deklaration von Webfonts basierend auf unterschiedlicher Browserunterstützung.

Fortgeschrittene Webfont-Überlegungen

Für diejenigen, die bereit sind, zu fortgeschritteneren Techniken überzugehen, gibt es weitere Überlegungen, die Sie berücksichtigen sollten

Hochladen lizenzierter Schriften auf GitHub

Wenn Sie ein Projekt in ein öffentliches Repository einchecken und lizenzierte Schriftdateien verwenden, stellen Sie bitte sicher, dass entweder die Schriften oder das Verzeichnis, das sie enthält, in Ihrer .gitignore-Datei enthalten ist, damit sie nicht hochgeladen werden. Dies verhindert, dass andere Ihre Schriftdateien übernehmen und verwenden, und es kann Sie vor Verstößen gegen Nutzungsbedingungen für lizenzierte Schriften bewahren, die normalerweise Nutzungs- und Weitergabebeschränkungen haben.

.DS_Store
  path/to/web/fonts/folder/*

Strategien zum Laden von Schriften

Das Laden von Webfonts kann so einfach sein wie die Verwendung von @font-face, aber das bietet nicht unbedingt die bestmögliche Leistung. Zum Beispiel eröffnet es die Möglichkeit eines Flash Of Unstyled Text (FOUT), was in einigen Fällen als schlechte UX betrachtet werden könnte. Zach Leatherman’s „A Comprehensive Guide to Font Loading Strategies“ behandelt dies und Methoden zur Verbesserung des Ladeerlebnisses, die Sie und Ihre Benutzer sehr glücklich machen werden.

Base64-kodierte Schriftdateien

In einigen seltenen Fällen kann es eine gute Idee sein, Ihre Schriften als base64 in Ihrer CSS zu kodieren, aber im Allgemeinen ist dies nicht der Fall – und ganz zu schweigen davon, dass Sie möglicherweise die Lizenzvereinbarung Ihrer Schrift verletzen. Seien Sie vorsichtig und lesen Sie die Nutzungsbedingungen Ihrer Schrift, wenn Sie base64 in Betracht ziehen.

CSS-Textdekoration

Das W3C arbeitet an einem Entwurf für neue Steuerelemente für Textdekoration, hauptsächlich im Hinblick darauf, wie das Unterstreichen von Text in CSS besser und einfacher gestaltet werden kann. Dies ist noch nicht in allen Browsern nutzbar, aber schauen Sie sich das an!

Variable Fonts

Im Jahr 2017 wurde die OpenType Fonts Specification 1.8.2 veröffentlicht, die sogenannte Variable Fonts ermöglicht. Diese neue Version von OpenType ermöglicht die Einbeziehung mehrerer Schriftstile in eine einzige Schriftdatei, wodurch Serveranfragen und Webfont-Dateigrößen reduziert werden. Abhängig von den Entscheidungen des Schriftendesigners kann sie unter anderem auch die Verwendung beliebiger Gewichte zwischen vorhandenen Gewichten und Breiten von Schriften ermöglichen. Axis Praxis ist eine gute Website, um mit einigen vorhandenen Testschriften zu experimentieren – Sie benötigen dafür jedoch eine aktuelle Version von Safari oder Chrome.

Zusammenfassend

Wir haben in diesem Artikel viel behandelt! Hoffentlich haben Sie jetzt ein gutes Verständnis der verschiedenen Schriftdateien, wie man mit ihnen arbeitet und all die erstaunlichen und leistungsstarken Möglichkeiten, wie Schriften sowohl mit bewährten Methoden als auch mit modernsten Funktionen gestylt werden können.