So verwenden Sie variable Schriftarten in der realen Welt

Die Verwendung variabler Schriftarten in der realen Welt erweist sich als schwierig. In diesem Beitrag wird erklärt, wie wir es für die neue Ampersand-Website geschafft haben und was wir dabei gelernt haben.

Variable Schriftarten in Aktion auf der Ampersand-Website

Dieser Artikel wurde aktualisiert, um ausstehende Erläuterungen und Änderungen des CSS-Schriftarten-Moduls Level 4 wiederzugeben.

Eine variable Schriftart ist eine einzelne Schriftartdatei, die sich wie mehrere Stile verhält. (Ich habe hier in einem Auszug aus meinem Web Typography-Buch mehr darüber geschrieben). Es gibt viele Websites, die die Möglichkeiten variabler Schriftarten und die darin enthaltene Technologie zur Variation von Schriftarten demonstrieren. Für die neue Ampersand-Konferenzwebsite wollte ich jedoch die Verwendung variabler Schriftarten in einem realen Produktionskontext zeigen. Dies könnte die erste kommerzielle Website sein, die dies jemals getan hat.

Vor zwei Monaten betrug die Browserunterstützung für variable Schriftarten nur 7%, heute Morgen jedoch über 60%. Safari 11, Chrome 62+, Firefox 57+ und Edge 17+ unterstützen alle variable Schriftarten (Firefox nur auf einem Mac und wenn Sie die richtigen Flags setzen). Dies bedeutet, dass Schriftartvariationen derzeit eine verwendbare Technologie sind. Aber nicht jede Unterstützung ist gleich, wie Sie sehen werden.

Software mit variabler Schriftart ist bereits umfassender als Sie vielleicht denken. Die neuesten Versionen von Photoshop und Illustrator unterstützen sie beispielsweise. Wenn Sie MacOS 10.13 oder iOS 11+ verwenden, werden in der Systemschriftart San Francisco in großem Umfang Schriftvariationen verwendet. Die Verfügbarkeit variabler Schriftarten für die Verwendung im Web ist jedoch äußerst begrenzt. Zum Zeitpunkt des Schreibens sind nur sehr wenige kommerzielle variable Webfonts verfügbar (Dunbar und Fit sind bemerkenswerte Ausnahmen), aber es gibt eine wachsende Anzahl kostenloser und experimenteller variabler Webfonts, die auf dem Axis Praxis-Spielplatz vorgestellt und in jüngerer Zeit bei Variable aufgeführt wurden Schriften.

Aus dieser begrenzten Palette von Schriftarten haben wir (ich meine Clearleft-Designer James Gilyead) Mutator Sans für den Anzeigetext und Source Sans für den Körpertext in einem von Saul Bass inspirierten Design ausgewählt. Beide Schriften ermöglichten es uns, ihre variable Gewichtsachse zu nutzen. Die Auswahl der Schriftarten war nun das schwierige, mehrstufige Geschäft, variable Schriftarten auf der Website zu implementieren. Ich werde Sie anhand vereinfachter Codefragmente durch die Arbeitsweise von Clearleft-Entwickler Mark Perkins führen.

1. Link zu den Schriften

Es ist ziemlich einfach, Ihre variablen Schriftarten auf einfache Weise zum Laufen zu bringen. Zum Zeitpunkt des Schreibens bieten Safari und Chrome die umfassendste Unterstützung. Wenn Sie diese Schritte ausführen, benötigen Sie zunächst einen dieser Browser.

Wir haben die Variable Source Sans von Github heruntergeladen und @ font-face mit einem Format von TrueType-Variationen verwendet, um sie mit dem Stylesheet zu verknüpfen:

@Schriftart {
  Schriftfamilie: 'SourceSans';
  src: url ('source-sans-variable.ttf') format ('wahrheitstyp');
}

Wir könnten dann die Variable Source Sans font wie gewohnt als Hauptschrift für die Seite festlegen:

html {
  Schriftfamilie: 'SourceSans', serifenlos;
}

2. Stellen Sie die Gewichte ein

Die Implementierung variabler Schriftarten in CSS verwendet vorhandene Eigenschaften für bestimmte vordefinierte Variationsachsen. Wir verwenden drei Strichstärken im Fließtext: Normal, Halbfett und Schwarz. Die fett gedruckten Schriften setzen wir wie gewohnt mit der Schriftstärke:

.hero {font-weight: 900; }
.blurb {font-weight: 600; }

Dies funktioniert jedoch nicht wie erwartet, ohne die @ font-face-Regel zu ändern. Wenn Sie einen Schriftstärkedeskriptor in eine @ -Schriftartenregel aufnehmen, teilen Sie dem Browser mit, dass die Schrift dieser Gewichtung und nur dieser Gewichtung entspricht. Wenn Sie den Font-Weight-Descriptor weglassen, behandelt der Browser die Regel so, als ob Sie den Font-Weight-Wert auf 400 setzen würden. Dies ist der Fall, unabhängig davon, ob Ihre Schriftart mit einer Gewichtsachse variabel ist oder nicht - die Schriftart wird auf eine Gewichtung von 400 geklemmt.

Damit die Gewichtungsachse verwendet werden kann und die Eigenschaften für die Schriftstärke wie erwartet funktionieren, mussten wir der @ font-face-Regel einen Bereich für die Schriftstärke hinzufügen:

@Schriftart {
  Schriftfamilie: 'SourceSans';
  src: url ('source-sans-variable.ttf') format ('wahrheitstyp');
  Schriftgröße: 1 999;
}

Der Schriftgewichtungsbereich ermöglicht die Anzeige der variablen Schrift mit einer beliebigen Gewichtung von 1 bis 999 (Sie können einen eingeschränkteren Bereich angeben, wenn Sie dies wünschen). In naher Zukunft können Sie in der CSS Fonts Level 4-Spezifikation den Bereichsdeskriptor weglassen, da der Standardwert zu einem neuen Wert von auto wird, wodurch der gesamte in der variablen Schriftart verfügbare Wertebereich aktiviert wird und bei statischen Schriftarten die Standardeinstellung "Normal" verwendet wird . (Gleiches gilt für andere Deskriptoren wie font-stretch.)

Bei variablen Schriftarten muss die Gewichtung nicht auf Intervalle von 100 beschränkt sein. Sie kann eine beliebige Ganzzahl im Bereich von 1 bis 999 sein. Für die in Mutator Sans gesetzte Hauptüberschrift haben wir für jeden Buchstaben geringfügige Gewichtsunterschiede verwendet, um dem Design ein handgezeichneteres Aussehen zu verleihen:

b: n-tes Kind (1) {Schriftgröße: 300; }
b: n-tes Kind (2) {Schriftgröße: 250; }
b: n-tes Kind (3) {Schriftgröße: 275; }

3. Untermenge und erstelle eine WOFF2

Die Schriftart der Variablen Source Sans ist ziemlich groß: Die TrueType-Datei hat eine Größe von 491 KB. Dies liegt hauptsächlich daran, dass es einen riesigen Zeichensatz hat: fast 2000 Glyphen, darunter griechische, kyrillische, alternative Zeichen und Symbole. Der erste Schritt bei der Reduzierung der Dateigröße besteht darin, eine Teilmenge der Schriftart zu erstellen, damit diese keine Zeichen mehr enthält, die Sie niemals benötigen werden.

Wir haben uns entschlossen, in Bezug auf das, was wir beibehalten haben, ziemlich konservativ zu sein. Daher haben wir uns darauf beschränkt, die Zeichenbereiche Basic Latin, Latin-1 Supplement und Latin Extended A einzuschließen. Insgesamt rund 400 Zeichen für die meisten europäischen Sprachen. In Unicode sind dies U + 0020–007F, U + 00A0–00FF und U + 0100–017F.

Es gibt zahlreiche Online-Tools zum Unterteilen von Schriftarten, z. B. Fontsquirrel. Alle Tools, die ich gesehen habe, entfernen jedoch die Variationsdaten. Dies bedeutet, dass Sie sich einer Befehlszeilenmethode zuwenden müssen. Wir haben die Schriftart mit dem Open-Source-Pyftsubset, einer Komponente von Fonttools, unterteilt (weitere Informationen finden Sie im Tutorial von Michael Herold). Wenn Node mehr dein Ding ist, könntest du stattdessen Glyphhanger verwenden.

Sowohl Glyphhanger als auch fonttools (wenn Sie die Brotli-Komprimierung installieren) geben die untergeordnete Datei als WOFF2 aus. Wir benötigen auch kein reguläres WOFF, da alle Browser, die variable Schriftarten unterstützen, auch WOFF2 unterstützen.

Durch Ausführen der Untergruppenroutine und der Konvertierung in WOFF2 erhielten wir eine erfreulich kleine 29-KB-Datei. Wir haben die @ font-face-Regel entsprechend aktualisiert:

@Schriftart {
  Schriftfamilie: 'SourceSans';
  src: url ('source-sans-variable.woff2') format ('woff2');
}

Dies ist also die Aufgabe für Browser, die variable Schriftarten unterstützen. Aber das ist kaum die halbe Wahrheit.

4. Stellen Sie Schriftarten für unfähige Browser bereit

Variable Schriftarten werden in Browsern gerendert, die keine Schriftartenvariationen unterstützen. Sie haben jedoch offensichtlich keine Kontrolle darüber, welche Gewichtung (oder welche andere Achseninstanz) verwendet wird.

Um dies zu umgehen, müssen Sie diesen Browsern nicht-variable (einfache) Schriftarten bereitstellen. Zum Zeitpunkt des Schreibens gibt das CSS Fonts Module Level 4 an, dass variable Schriftarten mit einem bestimmten format () -Wert angegeben werden können:

@Schriftart {
   Schriftfamilie: 'SourceSans';
   src: url ('source-sans-variable.woff2') format ('woff2-variables');
 }

Auf diese Weise können Sie @ font-face-Regeln wie folgt erstellen:

@Schriftart {
  Schriftfamilie: 'SourceSans';
  src: url ('source-sans-variable.woff2') format ('woff2-variables'),
       url ('source-sans-regular.woff2') format ('woff2');
  Schriftgröße: 400;
}
@Schriftart {
  Schriftfamilie: 'SourceSans';
  src: url ('source-sans-variable.woff2') format ('woff2-variables'),
       URL-Format ('source-sans-black.woff2') ('woff2');
  Schriftgröße: 900;
}

Der vorstehende Code verweist auf die einzelnen Schriftartdateien mit einer @ -Schriftartenregel, die wie gewohnt die Schriftstärke enthält. Sie können dann in jeder Regel einen Verweis auf die variable Schriftartdatei wiederholen. Browser, die variable Schriftarten unterstützen, laden die als Format gekennzeichnete Datei ("woff2-vary") (nur einmal) und Browser, die die als Format gekennzeichnete Schriftart ("woff2") nicht herunterladen.

Aber. Nur Safari unterstützt das Format ('woff2-vary') (und diese Syntax ändert sich), was die Dinge ziemlich durcheinander bringt, wenn die anderen fähigen Browser ihre variable Schriftart erhalten sollen. Also haben wir eine andere, etwas ausführlichere Taktik gewählt. Erstens haben wir der variablen Schriftart einen anderen Namen als der Schriftart mit einem einzigen Stil gegeben, wodurch Links zu variablen Schriftarten von Schriftarten mit einem einzigen Stil getrennt wurden:

@Schriftart {
  Schriftfamilie: 'SourceSansVariable';
  src: url ('source-sans-variable.woff2') format ('woff2');
  Schriftgröße: 1 999;
}
@Schriftart {
  Schriftfamilie: 'SourceSans';
  src: url ('source-sans-black.woff2') Format ('woff2'),
         URL-Format ('source-sans-black.woff') ('woff');
  Schriftgröße: 900;
}
@Schriftart {
  Schriftfamilie: 'SourceSans';
  src: url ('source-sans-semibold.woff2') format ('woff2'),
         url ('source-sans-semibold.woff') format ('woff');
  Schriftgröße: 600;
}

Wir mussten dann eine @ support-Regel schreiben, um sicherzustellen, dass die richtigen Schriftarten an die richtigen Browser gesendet wurden:

html {
  Schriftfamilie: 'SourceSans' serifenlos;
}
@supports (Einstellungen für Schriftartvariationen: normal) {
  html {
    Schriftfamilie: 'SourceSansVariable', serifenlos;
  }
}

Im obigen Code sind die einzelnen Schriftarten standardmäßig angegeben. Wenn jedoch ein Browser variable Schriftarten unterstützt (dies ist eine vernünftige Annahme, die sich aus der Unterstützung von Einstellungen für Schriftartvariationen ergibt), wird stattdessen die variable Schriftart verwendet.

Eine letzte Sache. Bei einem Ansatz mit Gürteln und Klammern sollten Sie jedes Mal, wenn Sie variable Schriftarten verwenden, die Schriftstärke explizit festlegen, auch wenn die gewünschte Gewichtung 400 oder normal ist. Bei einer variablen Schriftart kann sich die Vorstellung eines Browsers von der Standardstärke geringfügig von der eines anderen unterscheiden. In unserem Test hat Firefox den Standardtext deutlich heller als Safari und Chrome dargestellt, bis wir dies getan haben:

html {
  Schriftfamilie: 'SourceSans' serifenlos;
   Schriftgröße: 400;
}
@supports (Einstellungen für Schriftartvariationen: normal) {
  html {
    Schriftfamilie: 'SourceSansVariable', serifenlos;
    Font-Variation-Einstellungen: "wght" 400;
  }
}

Und das ist es. Sehen Sie sich auf der Ampersand-Website an, wie es dazu kam, und vergessen Sie nicht, dass Ampersand eine Konferenz ist, die sich mit Typografie im Web befasst. Über variable Schriftarten und vieles mehr wird ausführlich gesprochen. Am Tag vor der Konferenz führe ich auch einen Workshop für responsive Web-Typografie durch.

Dies wurde ursprünglich auf meiner eigenen Website veröffentlicht.