Das Beste aus variablen Schriftarten auf Google Fonts herausholen

Ich habe die letzten Jahre (zusammen mit vielen hochtalentierten Leuten) an einer Schriftfamilie namens Recursive Sans & Mono gearbeitet, und sie wurde gerade offiziell auf Google Fonts veröffentlicht!

Möchten Sie es superschnell ausprobieren? Hier ist der Einbettungscode, um die vollständige variable Schriftfamilie Recursive von Google Fonts zu verwenden (aber Sie erhalten viel mehr Flexibilität und Leistung, wenn Sie weiterlesen!)

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">

Ich begann Recursive als Diplomarbeit für ein Masterstudium im Bereich Schriftgestaltung an der KABK TypeMedia und als ich meine Schriftgießerei, Arrow Type, gründete, wurde ich anschließend von Google Fonts beauftragt, Recursive fertigzustellen und als Open-Source-Schriftart unter OFL zu veröffentlichen.

Sie können Recursive sehen und mehr darüber erfahren, was es kann, unter recursive.design. 

Recursive ist als flexible Schriftfamilie für Websites und Code konzipiert. Ihr Hauptzweck ist es, Entwicklern und Designern unterhaltsame und nützliche Schriften zum Spielen zu geben, die frische Ästhetik mit den neuesten Font-Technologien kombinieren.

Zuerst eine notwendige Definition: Variable Fonts sind Schriftdateien, die eine Reihe von Stilen in einer einzigen Datei enthalten, normalerweise auf eine Weise, die es dem Benutzer ermöglicht, einen Stil aus einem fließenden Spektrum von Stilen auszuwählen. Diese stilistischen Bereiche werden als Variable Achsen bezeichnet und können Parameter wie Schriftgewicht, Schriftbreite, optische Größe, Schriftneigung oder kreativere Dinge sein. Im Fall von Recursive können Sie die „Monospacedness“ (von Mono bis Sans) und die „Casualness“ (zwischen einem normalen, linearen Stil und einem pinselartigen, lässigen Stil) steuern. Jede Schriftfamilie kann eine oder mehrere eigene Achsen haben, und wie viele Eigenschaften von Schriften sind variable Achsen eine weitere Designüberlegung für Schriftgestalter.

Sie haben vielleicht bemerkt, dass Google Fonts begonnen hat, variable Schriftarten zu seiner riesigen Sammlung hinzuzufügen. Sie haben vielleicht etwas über die erstaunlichen Dinge gelesen, die variable Schriftarten tun können. Aber Sie wissen vielleicht nicht, dass viele der variablen Schriftarten, die zu Google Fonts kommen (einschließlich Recursive), **viel** mehr stilistische Bandbreite haben, als Sie über das Standard-Frontend von Google Fonts erhalten können.

Da Google Fonts eine riesige Bandbreite von Benutzern hat – viele davon neu in der Webentwicklung – ist es verständlich, dass sie die Dinge einfach halten, indem sie nur die „Gewicht“-Achse für variable Schriftarten anzeigen. Aber für Schriftarten wie Recursive lässt diese Vereinfachung tatsächlich eine Menge Optionen aus. Auf der Recursive-Seite zeigt Google Fonts den Besuchern acht Stile plus eine Achse. Tatsächlich hat Recursive jedoch 64 vordefinierte Stile (auch benannte Instanzen genannt) und insgesamt fünf einstellbare variable Achsen (die eine Vielzahl weiterer potenzieller benutzerdefinierter Stile ermöglichen).

Recursive kann in das unterteilt werden, was ich als eine von vier „Unterfamilien“ betrachte. Der von Google Fonts gezeigte Teil ist die einfachste, proportionale (Sans-Serif-)Version. Die vier Recursive-Unterfamilien haben jeweils eine Reihe von Gewichten plus Kursivschriften und können kategorisiert werden als

• Sans Linear: Eine proportionale, „normal“ aussehende serifenlose Schrift. Dies ist das, was auf der Google Fonts-Website angezeigt wird.
• Sans Casual: Eine proportionale „Brush Casual“-Schrift.
• Mono Linear: Eine monospace „normale“ Schrift.
• Mono Casual: Eine monospace „Brush Casual“-Schrift.

Das ist wahrscheinlich besser zu visualisieren als zu beschreiben. Hier sind zwei Tabellen (eine für Sans, die andere für Mono), die die 64 benannten Instanzen zeigen.

Aber auch hier bietet die Hauptoberfläche von Google Fonts nur Zugriff auf acht dieser Stile plus die Gewicht-Achse.

Nicht viele variable Schriftarten heute haben mehr als eine Gewicht-Achse, so dass dies in gewisser Weise eine verständliche UX-Entscheidung ist. Dennoch hoffe ich, dass sie in Zukunft etwas mehr Flexibilität hinzufügen. Als Schriftgestalter und Typografie-Fan fühlt sich der aktuelle Ansatz, der nur auf das Gewicht beschränkt ist, eher wie eine künstliche Abflachung als eine echte Vereinfachung an – so als ob Google Maps Karten „vereinfachen“ würde, indem es jede Straße ausschließt, die keine Autobahn ist.

Glücklicherweise können Sie immer noch das volle Potenzial der von Google Fonts gehosteten variablen Schriftarten nutzen: Lernen Sie die Google Fonts CSS API, Version 2 kennen. Sehen wir uns an, wie Sie diese nutzen können, um mehr aus Recursive herauszuholen.

Zuerst ist es hilfreich, ein paar Dinge darüber zu wissen, wie variable Schriftarten funktionieren.

Wie variable Schriftarten funktionieren und warum das wichtig ist

Wenn Sie jemals mit Fotos im Web gearbeitet haben, wissen Sie, dass Sie niemals eine 9.000 Pixel große JPEG-Datei bereitstellen sollten, wenn eine kleinere Version ausreicht. Normalerweise können Sie ein Foto durch Komprimierung verkleinern, um Bandbreite zu sparen, wenn Benutzer es herunterladen.

Es gibt ähnliche Überlegungen für Schriftdateien. Sie können die Größe einer Schrift oft drastisch reduzieren, indem Sie die enthaltenen Zeichen unterteilen (ein bisschen wie das Zuschneiden von Pixeln, um nur den benötigten Bereich zu hinterlassen). Sie können die Datei weiter komprimieren, indem Sie sie in eine WOFF2-Datei konvertieren (was ein bisschen so ist, als würde man eine Rasterbilddatei durch ein Optimierungstool wie imageOptim laufen lassen). Anbieter, die Schriften hosten, wie Google Fonts, erledigen diese Dinge oft automatisch für Sie.

Stellen Sie sich nun eine Videodatei vor. Wenn Sie nur die ersten 10 Sekunden eines 60-sekündigen Videos anzeigen müssen, könnten Sie die restlichen 50 Sekunden abschneiden, um eine viel kleinere Videodatei zu erhalten. 

Variable Schriftarten sind ein bisschen wie Videodateien: Sie haben einen oder mehrere Informationsbereiche (variable Achsen), und diese können oft entweder gestutzt oder an einer bestimmten Stelle „angeheftet“ werden, was zur Reduzierung der Dateigröße beiträgt. 

Natürlich sind variable Schriftarten gar nicht wie Videodateien. Schriften speichern jede Buchstabenform in Vektoren (ähnlich wie SVGs Forminformationen speichern). Variable Schriftarten haben mehrere „Quellorte“, die wie Keyframes in einer Animation sind. Um zwischen Stilen zu wechseln, werden die Kontrollpunkte, aus denen Buchstaben bestehen, mathematisch zwischen ihren verschiedenen Quellorten (auch Deltas genannt) interpoliert. Eine Schrift kann viele Deltasätze haben (mindestens einen pro variabler Achse, manchmal aber auch mehr). Um eine variable Schrift zu trimmen, müssen Sie also nicht benötigte Deltas herausschneiden.

Als spezifisches Beispiel nimmt die Casual-Achse in Recursive die Buchstabenformen von „Linear“ zu „Casual“, indem Vektorkontrollpunkte zwischen zwei Extremen interpoliert werden: im Grunde eine normale Zeichnung und eine pinselartige Zeichnung. Die unten gezeigte &-Glyphen-Animation zeigt die Mechanik in Aktion: Kontrollpunkte zeichnen an einem Extrempunkt abgerundete Ecken und verschieben sich am anderen Ende zu eckigen Ecken.

Im Allgemeinen verdoppelt jede hinzugefügte Achse die Anzahl der Zeichnungen, die vorhanden sein müssen, damit eine variable Schrift funktioniert. Manchmal ist die Zahl mehr oder weniger – die Gewicht-Achse von Recursive erfordert 3 Orte (was die Anzahl der Zeichnungen verdreifacht), während ihre Cursive-Achse keine zusätzlichen Orte erfordert, sondern nur verschiedene alternative Glyphen aktiviert, die an jedem Ort bereits vorhanden sind. Aber die allgemeine Mathematik lautet: Wenn Sie nicht benötigte Achsen aus einer variablen Schrift schneiden können, erhalten Sie normalerweise eine kleinere Datei.

Wenn Sie die Google Fonts API verwenden, **melden Sie sich tatsächlich für** jede Achse an. Auf diese Weise erhalten Sie, anstatt mit einer großen Datei zu beginnen und sie zu verkleinern, die Möglichkeit, die gewünschten Teile auszuwählen.

Variable Achsen-Tags

Wenn Sie die Google Fonts API verwenden möchten, müssen Sie zuerst wissen, wie Achsen benannt werden. Jede Achse hat sowohl einen vollständigen Namen als auch eine Abkürzung.

Diese Achsenabkürzungen haben die Form von vierstimmigen „Tags“. Diese sind kleinbuchstabig für von Microsoft definierte und in der OpenType-Spezifikation aufgezeichnete Achsen und großbuchstabig für neuere Achsen, die von anderen erfunden oder definiert wurden (diese werden auch als „benutzerdefinierte“ oder „private“ Achsen bezeichnet). Es gibt Bemühungen, einige dieser neuen Achsen zu standardisieren.

Derzeit gibt es fünf Standardachsen, die eine Schriftart enthalten kann:

• wght – Gewicht, zur Steuerung von Leichtigkeit und Fettigkeit
• wdth – Breite, zur Steuerung der gesamten Buchstabenbreite
• opsz – Optische Größe, zur Steuerung von Designanpassungen für bessere Lesbarkeit bei verschiedenen Größen
• ital – Kursiv, im Allgemeinen zum Wechseln zwischen separaten aufrechten/kursiven Designs
• slnt – Neigung, im Allgemeinen zur Steuerung von aufrecht zu schrägen Designs mit verfügbaren Zwischenwerten

Benutzerdefinierte Achsen können fast alles sein. Recursive enthält drei davon – Monospace (MONO), Casual (CASL) und Cursive (CRSV) – plus zwei Standardachsen, wght und slnt.

Grundlagen der Google Fonts API

Wenn Sie ein Schriftarteinbettung von der Google Fonts-Oberfläche konfigurieren, erhalten Sie ein HTML- oder CSS-Fragment, das eine URL enthält. Diese ruft letztendlich ein CSS-Dokument ab, das eine oder mehrere @font-face Regeln enthält. Dies beinhaltet Dinge wie Schriftnamen sowie Links zu Schriftdateien auf Google-Servern.

Diese URL ist tatsächlich eine Möglichkeit, die Google Fonts API aufzurufen, und sie hat viel mehr Leistung, als Sie vielleicht vermuten. Sie hat einige grundlegende Teile:

1. Die Haupt-URL, die die API angibt (https://fonts.googleapis.com/css2)
2. Details zu den Schriftarten, die Sie anfordern, in einem oder mehreren family-Parametern
3. Eine font-display-Eigenschaft zum Festlegen eines display-Parameters

Als Beispiel nehmen wir an, wir möchten das normale Gewicht von Recursive (in der Unterfamilie Sans Linear). Hier ist die URL, die wir mit unserem CSS @import verwenden würden

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

Oder wir können sie im <head> unseres HTML verknüpfen.

<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">

Sobald das eingerichtet ist, können wir mit dem Anwenden der Schriftart in CSS beginnen.

body {
  font-family: 'Recursive', sans-serif;
}

Für jede Achse gibt es einen Standardwert.

• MONO 0 (Sans/proportional)
• CASL 0 (Linear/normal)
• wght 400 (Regular)
• slnt 0 (aufrecht)
• CRSV 0 (Roman/nicht-kursive Kleinbuchstaben)

Wählen Sie Ihr Abenteuer: Stile oder Achsen

Die Google Fonts API bietet zwei Möglichkeiten, Teile von variablen Schriftarten anzufordern.

1. Auflisten von Achsen und den spezifischen Nicht-Standardwerten, die Sie von ihnen wünschen.
2. Auflisten von Achsen und den von Ihnen gewünschten Bereichen.

Spezifische Schriftstile abrufen

Schriftstile werden durch Hinzufügen von Parametern zur Google Fonts-URL angefordert. Um die Standardwerte für alle Achsen zu verwenden, aber einen lässigen Stil zu erhalten, könnten Sie die Abfrage Recursive:CASL@1 verwenden (dies liefert Recursive Sans Casual Regular). Um daraus Recursive Mono Casual Regular zu machen, geben Sie zwei Achsen vor dem @ und dann ihre jeweiligen Werte an (aber denken Sie daran, benutzerdefinierte Achsen haben Großbuchstaben-Tags).

https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap

Um sowohl Regular als auch Bold anzufordern, würden Sie einfach den Familienaufruf zu Recursive:wght@400;700 aktualisieren und die wght-Achse und spezifische Werte hinzufügen.

https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap

Eine sehr hilfreiche Sache an Google Fonts ist, dass Sie eine Menge einzelner Stile über die API anfordern können, und wo immer möglich, werden tatsächlich variable Schriftarten bereitgestellt, die all diese angeforderten Stile abdecken, anstatt separate Schriftdateien für jeden Stil. Dies ist auch dann der Fall, wenn Sie spezifische Orte und keine variablen Achsenbereiche anfordern – wenn sie eine kleinere Schriftdatei für Ihre API-Anfrage bereitstellen können, werden sie das wahrscheinlich tun.

Da variable Schriftarten in Zukunft flexibler und effizienter getrimmt werden können, werden die für bestimmte API-Anfragen bereitgestellten Dateien im Laufe der Zeit wahrscheinlich intelligenter. Für Produktionswebsites kann es daher am besten sein, genau die Stile anzufordern, die Sie benötigen.

Interessant wird es jedoch, dass Sie variable Achsen **auch** anfordern können. Das ermöglicht es Ihnen, viel Designflexibilität zu behalten, ohne Ihre Schriftanfragen jedes Mal zu ändern, wenn Sie einen neuen Stil verwenden möchten.

Eine vollständige variable Schriftart mit der Google Fonts API erhalten

Die Google Fonts API versucht, Schriftarten kleiner zu machen, indem Benutzer nur die gewünschten Stile und Achsen auswählen. Aber um die vollen Vorteile von variablen Schriftarten (mehr Designflexibilität in weniger Dateien) zu nutzen, sollten Sie eine oder mehrere Achsen verwenden. Anstatt also einzelne Stile mit Recursive:wght@400;700 anzufordern, können Sie stattdessen diesen vollen Bereich mit Recursive:[email protected] (Änderung von ; zu .. zur Anzeige eines Bereichs) anfordern oder sogar den gesamten Recursive-Gewichtsbereich mit Recursive:[email protected] (was nur wenig Dateigröße hinzufügt, aber viel zusätzliches Design-Oomph).

Sie können zusätzliche Achsen hinzufügen, indem Sie sie alphabetisch auflisten (zuerst kleine Standardachsen, dann große benutzerdefinierte Achsen) vor dem @ und dann ihre Werte oder Bereiche in der gleichen Reihenfolge angeben. Um beispielsweise die MONO-Achse **und** die wght-Achse hinzuzufügen, könnten Sie Recursive:wght,[email protected],0..1 als Schriftartabfrage verwenden.

Oder um die vollständige variable Schriftart zu erhalten, könnten Sie die folgende URL verwenden.

https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap

Natürlich müssen Sie das immer noch in einen HTML-Link einfügen, wie hier.

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">

Weitere Anpassungen zur Balance zwischen Flexibilität und Dateigröße

Auch wenn es verlockend sein kann, jede einzelne Achse einer variablen Schriftart zu verwenden, sollten Sie bedenken, dass jede zusätzliche Achse zur Gesamtdateigröße beiträgt. Wenn Sie also eine Achse wirklich nicht verwenden möchten, ist es sinnvoll, sie wegzulassen. Sie können sie jederzeit später hinzufügen.

Nehmen wir an, Sie möchten die Mono Casual-Stile von Recursive in einem Gewichtsbereich, dann könnten Sie dies tun:

<link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet">

Das obige funktioniert nicht mehr 🤷. Vielleicht war es eine Beta-Funktion oder vielleicht hat sich die Syntax einfach geändert. Kontaktieren Sie uns gerne, wenn Sie mehr wissen.

Sie können mehrere Schriftfamilien zu einem API-Aufruf mit zusätzlichen family-Parametern hinzufügen. Stellen Sie nur sicher, dass die Schriftarten alphabetisch nach Familiennamen sortiert sind.

<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet">

Variable Schriftarten verwenden

Standardachsen können alle mit vorhandenen CSS-Eigenschaften gesteuert werden. Wenn Sie beispielsweise eine variable Schriftart mit einem Gewichtsbereich haben, können Sie ein bestimmtes Gewicht mit font-weight: 425; angeben. Alle Achsen können mit font-variation-settings gesteuert werden. Wenn Sie also einen sehr fetten Mono Casual-Stil von Recursive wünschen (vorausgesetzt, Sie haben die vollständige Familie wie oben aufgerufen), könnten Sie das folgende CSS verwenden:

body {
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Etwas Gutes zu wissen: font-variation-settings ist viel angenehmer zu verwenden in Verbindung mit CSS-Custom-Properties. 

Sie können mehr Details über das Design mit variablen Schriftarten auf VariableFonts.io und in der hervorragenden Sammlung von CSS-Tricks-Artikeln über variable Schriftarten lesen.

Nerdige Anmerkungen zur Leistung von variablen Schriftarten

Wenn Sie alle 64 vordefinierten Stile von Recursive als separate WOFF2-Dateien verwenden würden (mit ihrem vollständigen, nicht-unterteilten Zeichensatz), wären das insgesamt etwa 6,4 MB. Im Gegensatz dazu könnten Sie diese stilistische Bandbreite (und alles dazwischen) für nur 537 KB in einer variablen Schriftart haben. Natürlich ist das ein leicht absurder Vergleich – Sie würden fast nie 64 Stile auf einer einzigen Webseite verwenden, insbesondere nicht mit ihren vollständigen Zeichensätzen (und wenn Sie das tun, sollten Sie Unterteilungen mit unicode-range verwenden).

Ein besserer Vergleich ist Recursive mit einem Achsenbereich im Vergleich zu Stilen innerhalb dieses Achsenbereichs. In meinen Tests ist eine Recursive WOFF2-Datei, die auf den „Google Fonts Latin Basic“-Zeichensatz unterteilt ist (einschließlich nur Zeichen für englische und westeuropäische Sprachen), einschließlich des vollständigen Gewichtsbereichs von 300–1000 (und alle anderen Achsen sind auf ihre Standardwerte „angeheftet“), 60 KB groß. In der Zwischenzeit ist ein einzelner Stil mit derselben Unterteilung 25 KB groß. **Wenn Sie also nur drei Gewichte von Recursive verwenden, können Sie etwa 15 KB sparen, indem Sie die variable Schriftart anstelle von einzelnen Dateien verwenden.**

Die vollständige variable Schriftart als unterteilte WOFF2-Datei liegt bei 281 KB, was für eine Schriftart ziemlich viel ist, aber nicht so viel, wenn man sie mit dem Gewicht eines großen JPEG-Bildes vergleicht. Wenn Sie also davon ausgehen, dass einzelne Stile etwa 25 KB groß sind, ist es besser, die variable Schriftart zu verwenden, wenn Sie mehr als 11 Stile verwenden möchten.

Diese Art von Mathematik ist aus zwei wichtigen Gründen meist eine akademische Übung.

1. Variable Schriftarten drehen sich nicht nur um die Dateigröße. Der viel größere Vorteil ist, dass sie es Ihnen ermöglichen, **nur zu designen**, indem Sie die exakten Schriftgewichte (oder andere Stile) auswählen, die Sie möchten. Sieht eine Schriftart ein wenig zu leicht aus? Erhöhen Sie das font-weight ein wenig, sagen wir von 400 auf 425!
2. Noch wichtiger ist (wie bereits erklärt), dass Google Fonts die schwere Arbeit für Sie erledigt, wenn Sie variable Schriftstile oder Achsen von Google Fonts anfordern, indem sie die für Ihre API-Anfrage und die Browser Ihrer Besucher als am leistungsfähigsten und nützlichsten erachteten Schriftarten senden.

Sie müssen also nicht wirklich Schriftarten herunterladen, die die Google Fonts API zurückgibt, um ihre Dateigrößen zu vergleichen. Dennoch ist es sinnvoll, die allgemeinen Kompromisse zu verstehen, damit Sie am besten entscheiden können, wann Sie variable Achsen nutzen und wann Sie sich auf ein paar Stile beschränken.

Was kommt als Nächstes?

Starten Sie CodePen und probieren Sie die API aus! Für CodePen möchten Sie wahrscheinlich die CSS @import-Syntax verwenden, wie hier im CSS-Bereich.

@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,[email protected],0..1,0..1,-15..0,300..1000&display=swap');

Es ist anscheinend besser, die HTML-Link-Syntax zu verwenden, um blockierende parallele Downloads anderer Ressourcen zu vermeiden. In CodePen würden Sie die Pen-Einstellungen öffnen, HTML auswählen und dann den <link> in den HTML-Head-Einstellungen einfügen.

Oder, hey, Sie können einfach meinen CodePen forken und dort experimentieren.

Nehmen Sie eine API-Konfigurationsabkürzung

Wenn Sie die Komplexität der Ermittlung exakter API-Aufrufe überspringen und variable Achsen von Recursive nutzen und semi-fortgeschrittene API-Aufrufe tätigen möchten, habe ich ein einfaches Konfigurationstool auf der Recursive-Miniseite (klicken Sie auf den Button „Get Recursive“) zusammengestellt. Dies ermöglicht es Ihnen, schnell angeheftete Stile oder Variablenbereiche auszuwählen, die Sie verwenden möchten, und gibt sogar Schätzungen für die resultierende Dateigröße an. Dies erschließt jedoch nur einen Teil der Funktionalität der API, und Sie können spezifischer werden, wenn Sie möchten. Es ist mein Versuch, Leute dazu zu bringen, die größte stilistische Bandbreite in den kleinsten Dateien zu nutzen, unter Berücksichtigung der aktuellen Einschränkungen des Instanziierens von variablen Schriftarten.

Verwenden Sie Recursive für Code

Außerdem ist Recursive eigentlich in erster Linie als Schriftart für Code konzipiert. Sie können sie auf CodePen über Ihre Kontoeinstellungen verwenden. Besser noch, Sie können die neueste Recursive-Veröffentlichung von GitHub herunterladen und in jedem Code-Editor einrichten.

Mehr Schriftarten erkunden!

Die Google Fonts API-Dokumentation enthält hilfreich eine (teilweise) Liste von variablen Schriftarten zusammen mit Details zu ihren verfügbaren Achsenbereichen. Ein paar meiner Favoriten mit Achsen jenseits von nur Gewicht sind Encode Sans (wdth, wght) und Inter (slnt, wght). Sie können Google Fonts auch filtern, um nur variable Schriftarten anzuzeigen, obwohl die meisten dieser Ergebnisse nur eine Gewicht-Achse haben (immer noch cool und nützlich, aber erfordert keine benutzerdefinierte URL-Konfiguration).

Einige weitere erstaunliche variable Schriftarten kommen zu Google Fonts. Einige, auf die ich mich besonders freue, sind:

• Fraunces: „Eine Display-Schriftart mit serifenbetonten „Old Style“-Elementen, inspiriert von den Eigenheiten von Schriftarten der frühen 20. Jahrhunderts wie Windsor, Souvenir und der Cooper Series.“
• Roboto Flex: Wie Roboto, aber mit einem erweiterten Bereich für Gewicht, Breite und optische Größe.
• Crispy: Eine kreative, eckige, super-flexible variable Display-Schriftart.
• Science Gothic: Eine quadratische serifenlose Schrift, die „sehr eng an Bank Gothic angelehnt ist, einer Schriftart aus den frühen 1930er Jahren – aber Kleinbuchstaben, Designachsen und Sprachabdeckung wurden hinzugefügt“.
• Commissioner: Eine humanistisch-serifenlose Schrift mit geringem Kontrast und fast klassischen Proportionen mit drei „Stimmen“ mit Strichen, die gerade, geschwungen oder keilförmig sein können.

Und ja, Sie können diese Schriftarten absolut herunterladen und selbst hosten, wenn Sie sie heute in Ihren Projekten verwenden möchten. Aber bleiben Sie auf Google Fonts auf dem Laufenden für weitere fantastisch-flexible Schriftarten!

Natürlich ist die Welt der Typografie **viel** größer als Open-Source-Schriften. Es gibt eine Reihe von unglaublichen Schriftgießereien, die an aufregenden, grenzüberschreitenden Schriften arbeiten, und viele von ihnen erforschen auch neue und aufregende Gebiete im Bereich der variablen Schriftarten. Viele neigen dazu, andere Ansätze zur Lizenzierung zu verfolgen, aber für das richtige Projekt kann eine gute Typografie einen extrem guten Wert darstellen (ich bin offensichtlich voreingenommen, aber für ein einfaches Argument sehen Sie nur, wie sehr Typografie Marken wie Apple, Stripe, Google, IBM, Figma, Slack und viele mehr stärkt). Wenn Sie Ihre Augen auf mehr Möglichkeiten richten möchten und diese Namen noch nicht kennen, schauen Sie sich unbedingt DJR, OHno, Grilli, XYZ, Dinamo, Typotheque, Underware, Bold Monday und die vielen sehr lustigen WIP-Projekte auf Future Fonts an. (Ich habe eine Reihe anderer erstaunlicher Gießereien weggelassen, aber jede dieser hat Dinge getan, die ich besonders liebe, und dies ist kein Verzeichnis von Schriftgießereien.)

Schließlich noch ein paar plumpe Eigenwerbung für mich: Wenn Sie mich und meine Arbeit über Recursive hinaus unterstützen möchten, schauen Sie sich bitte meine WIP vielseitige serifenlose Schriftart Name Sans an, melden Sie sich für meinen (sehr) seltenen Newsletter an und folgen Sie mir auf Instagram.