Zum Hauptinhalt springen
Variable Fonts

Erfahren Sie mehr über variable Fonts, die variablen Fonts von Monotype und wie Sie diese im Rahmen Ihrer Projekte verwenden können

Supriya Bisht avatar
Verfasst von Supriya Bisht
Vor über 2 Monaten aktualisiert

Ein variabler Font ist eine einzelne Fontdatei, in der eine kontinuierliche Palette an Fontstil-Variationen (mit verschiedenen Breiten, Stärken oder Größen) gespeichert werden kann.

Im Rahmen der OpenType 1.8-Spezifikation wurden neue Datenstrukturen für variable Fonts eingeführt. Mithilfe dieser Datenstrukturen können zwei oder mehr Stile aus einer Fontfamilie in eine einzelne Fontdatei gepackt werden.

Ein variabler Font enthält ein einzelnes Konturen-Set, von dem nahezu unbegrenzte Instanzen über Datensets abgeleitet werden können. Dies geschieht durch Definition eines Sets von Konturen-Variationen innerhalb des Fonts. Diese stellen einen ein- oder mehrachsigen Gestaltungsraum dar, in dem eine große Anzahl von Font-Instanzen interpoliert werden kann.

Nutzen Sie die Option Nur variable Fonts anzeigen für Variable Fonts im Abschnitt Filter auf der Seite Durchsuchen>Fonts von Monotype Fonts, um die variablen Fonts anzuzeigen.

Hinweis: Alle variablen Fonts, die von Monotype Fonts zur Verfügung gestellt werden, sind mit dem Label versehen.


Der Unterschied zwischen statischen Fonts und variablen Fonts

Der Unterschied zwischen statischen Fonts und variablen Fonts ergibt sich aus der nachstehenden Tabelle:

Statische Fonts

Variable Fonts

Definition

Fonts mit festgelegten Stilen, die für jede Variation eine andere Datei erfordern.

Fonts, die die Speicherung vieler verschiedener Schriftvariationen in einer einzelnen Datei ermöglichen.

Unterschiedliche Datei für jede Variation

Ja

Nein

Verbessert die Website-Performance

Nein

Ja

Bietet Flexibilität beim Design

Nein

Ja

Unterstützt CSS-Übergänge

Nein

Ja

Komprimierung

Nein

Ja

Responsive Typografie

Nein

Ja

Einfache Verteilung

Nein

Ja

Zugängliche Typografie

Nein

Ja

Anzahl der enthaltenen Stile

Ein Stil

Mehr als ein Stil

Browser-Support

Ja

Wird von den meisten Webbrowsern unterstützt

Hinweis: Klicken Sie hier, um die Webbrowser zu sehen, die variable Fonts unterstützen.

Verfügbarkeit dynamischer Texteffekte

Nein

Ja


Die Vorteile variabler Fonts

Der Einsatz variabler Fonts hat viele Vorteile, wie z. B.:

  • Komprimierung

    Die Größe eines variablen Fonts ist geringer als die Gesamtgröße der statischen Fonts, die denselben entsprechenden Stilumfang des variablen Fonts darstellen. Die Gesamtgröße von drei oder mehr statischen Fonts, die innerhalb eines Projekts separat genutzt werden, übersteigt beispielsweise die Größe eines einzelnen variablen Fonts, der diese verschiedenen Fonts umfasst. Je mehr Stile Sie einem variablen Font hinzufügen, desto mehr sparen Sie.

  • Verbesserte Website-Performance

    Eine Website kann eine einzelne variable Fontdatei laden und die Variationen bei Bedarf anpassen. Dies kann die Ladegeschwindigkeit und die Performance der Website verbessern.

  • Einfache Verteilung

  • Dynamische Texteffekte

    Variable Fonts können anhand von CSS-Animationen oder -Übergängen animiert werden. Sie können außerdem dynamische Texteffekte erstellen, die die Stärke, Breite, Neigung oder sonstige Eigenschaften des Fonts mit der Zeit ändern.

  • Mehr Variabilität

    Sie können eine große Bandbreite an Stilen in eine einzelne Fontdatei packen. Die OpenType 1.9-Spezifikation definiert Tags für fünf spezifische Achsen:

    • Schriftstärke

    • Schriftbreite

    • Optische Größen

    • Kursiv (ggü. Roman)

    • Geneigt (ggü. Roman)

    Die OpenType-Fontspezifikation lässt uns jedoch alle denkbaren Variationen erstellen und durch private benutzerdefinierte Achsen zeichnen.

    Monotype bietet viele Fontfamilien, die für eine Vielzahl von Stärken und Breiten konzipiert sind. Zum Beispiel: Helvetica Now, Cotford, Kairos Sans und Futura Now.

  • Responsive Typografie

    Variable Fonts bieten responsive Typografie und Anwendungsoptimierung. Die Stärke, der Kontrast und andere Variablen können zur Optimierung der Lesbarkeit auf einem bestimmten Gerät angepasst werden.

  • Bietet kreative Effizienz

    Variable Fonts sind flexibel und effizient und verfügen außerdem über kreatives Potenzial. Dies macht sie zu einer wertvollen Ressource für kreative Designer.

  • Zugängliche Typografie

    Anhand der möglichen Variationen bei variablen Fonts, die sich an die Leser und ihre Umgebung anpassen können, kann ein besseres Erlebnis erzielt werden.


Beschränkungen variabler Fonts

Je nach Anwendungsfall können variable Fonts den folgenden Beschränkungen unterliegen:

  • Ein variabler Font ist eine komprimierte Form mehrerer Stile. Wenn Sie jedoch nur daran interessiert sind, zwei oder drei Stärken aus einer riesengroßen variablen Fontfamilie einzusetzen, verlieren Sie möglicherweise die Größeneinsparungen. Das heißt, dass variable Fonts zwar die Dateigröße verringern können, aber auch erhöhen, wenn sie viele Variationen umfassen, die nicht benötigt werden.

  • Nicht alle Fonts sind im variablen Format erhältlich.

    Neuere Fontdaten werden üblicherweise als interpolierbare Schriften gezeichnet und können einfach als variable Fonts entwickelt werden. Ältere Fonts, die separat als statische Designs gezeichnet wurden, weisen unter Umständen eine größere strukturelle Variabilität über eine Achse hinweg auf und lassen sich nicht einfach als interpolierbare Fonts erstellen.

    Times New Roman ist beispielsweise ein schlechter Kandidat, da die Änderungen bei der Betonungsdirektionalität sowie bei der Form und Ausrichtung der Serifen bei den Kleinbuchstaben zu seltsamen Interpolationen führen.

  • Variable Fonts werden nicht von allen Browsern unterstützt.

    Einzelheiten hierzu sind dem Abschnitt Browser-Support zu entnehmen.

  • Die Anpassung der Variationen eines Fonts innerhalb der variablen Fontdatei kann sich komplex gestalten und erfordert gute CSS- und Design-Kenntnisse in Bezug auf den variablen Font.


Browser-Support für variable Fonts

Unsere WOFF- und WOFF2-Fontdateien werden von allen modernen Browsern unterstützt. Unterschiedliche Browser oder Browser-Versionen können unterschiedliche Formate unterstützen.

Browser-Support für WOFF-Fontdateien

  • Internet Explorer 9+

  • Edge 12+

  • Firefox 3.6+

  • Chrome 5+

  • Safari 5.1+

  • Opera 11.5+

  • iOS Safari 5+

  • Android 4.4+

  • Blackberry 7+

  • Opera Mobile 12+

  • Chrome Android 70+

  • Firefox Android 63+

  • Internet Explorer Mobile 10+

  • UC for Android 11.8+

  • Samsung Internet 4+

  • QQ 1.2+

  • Baidu 7.12+

Browser-Support für WOFF2-Fontdateien

  • Edge 14+

  • Firefox 39+

  • Chrome 36+

  • Safari 12+

  • Opera 23+

  • iOS Safari 10+

  • Android 67+

  • Opera Mobile 46+

  • Chrome Android 70+

  • Firefox Android 63+

  • Samsung Internet 4+

  • QQ 1.2+

  • Baidu 7.12+



Download von variablen Fonts

Führen Sie die nachstehenden Schritte aus, um variable Fonts von der Monotype Fonts-Plattform herunterzuladen:

  1. Klicken Sie auf das Symbol Synchronisierungs- und Downloadoptionen für den erforderlichen variablen Font.

  2. Öffnen Sie die Registerkarte Downloadoptionen.

  3. Wählen Sie Ihr bevorzugtes Dateiformat (z. B. CFF oder TFF) für den Download aus.

  4. Wählen Sie einzelne Fontstärken und -stile für den Download aus oder klicken Sie auf Fontfamilie herunterladen, um die gesamte Fontfamilie herunterzuladen.


Installation von variablen Fonts

Mac

Führen Sie die nachstehenden Schritte aus, um einen Font auf einem Mac-Gerät zu installieren:

  1. Extrahieren Sie die Inhalte des heruntergeladenen ZIP-Archivs per Doppelklick.

  2. Jetzt stehen Ihnen die beiden folgenden Optionen zur Installation eines Fonts auf dem Mac-Gerät zur Verfügung:

  3. Ziehen Sie die Fontdateien zur Aktivierung des Fonts in den Ordner „Fonts“, der sich im Ordner „Library“ befindet: Macintosh HD/Library/Fonts. Sie können auch die Tastenkombination Strg+Umschalttaste+G verwenden.

  4. Verwenden Sie Font Book, die Fontverwaltungs-App für Mac OS, zur Installation der Fonts.

  5. Klicken Sie zweimal auf den Font, sodass ein „Font Book“-Fenster erscheint.

  6. Klicken Sie zur Installation der Fonts auf Fonts installieren.

    Der Abschnitt „Support“ auf der Website von Apple – http://support.apple.com/kb/HT2509 – enthält weitere Informationen hierzu.

  7. Starten Sie alle offenen Anwendungen neu, um die neu installierten Fonts nutzen zu können.

Windows

Windows XP oder höher:

Klicken Sie mit der rechten Maustaste auf das ZIP-Archiv und wählen Sie Alle extrahieren. Dies erstellt einen neuen Ordner mit Ihren Fonts an dem von Ihnen gewählten Speicherort.

Alle anderen Windows-Versionen:

Gehen Sie zu Festplatte (C:) › Windows › Fonts. Gehen Sie zu dem Ordner, den Sie mithilfe der heruntergeladenen ZIP-Datei erstellt haben, und ziehen Sie die Fontdateien in den Ordner „Fonts“.

Windows 7 und höher:

  1. Klicken Sie mit der rechten Maustaste auf die extrahierten Fontdateien und wählen Sie Installieren oder Für alle Benutzer installieren.

  2. Starten Sie alle offenen Anwendungen neu, um die neu installierten Fonts nutzen zu können.


Synchronisierung variabler Fonts

Die Synchronisierung von Fonts involviert den Transfer von Fonts vom Browser-Dashboard in die Desktop-App von Monotype.

Fonts und Fontfamilien, die in die Desktop-App von Monotype synchronisiert wurden, stehen in den meisten Design-Anwendungen automatisch zur Verfügung. Es ist kein Download von einzelnen Fontdateien erforderlich.

Die Synchronisierung ist die primäre Methode, mit der über Monotype Fonts auf Fonts zugegriffen werden kann.

Führen Sie die nachstehenden Schritte aus, um variable Fonts in der Desktop-App von Monotype zu synchronisieren:

  1. Klicken Sie zur Synchronisierung des benötigten variablen Fonts auf das Symbol Synchronisierungs- und Downloadoptionen.

  2. Wählen Sie in der Registerkarte Mit Monotype-App synchronisieren Ihr bevorzugtes Dateiformat (z. B. CFF oder TTF) aus.

  3. Synchronisieren Sie einzelne Fontstärken und -stile oder klicken Sie zur Synchronisierung der gesamten Fontfamilie auf Fontfamilie synchronisieren.


Rückgängigmachen der Synchronisierung variabler Fonts

Führen Sie die nachstehenden Schritte aus, um die Synchronisierung eines variablen Fonts rückgängig zu machen:

  1. Klicken Sie auf das Symbol Synchronisierungs- und Downloadoptionen für den synchronisierten variablen Font.

  2. Klicken Sie in der Registerkarte Mit Monotype-App synchronisieren auf Synchronisierung rückgängig machen.


Einsatz variabler Fonts

Kommerziell erhältliche variable Fonts werden derzeit im TTF-Format erstellt. Es besteht die Möglichkeit, ein Set von statischen Fonts, die zu Ihren variablen Fonts passen, anzufordern. Diese können zeitgleich mit den variablen Fonts installiert werden.

Variable Fonts bringen wahrscheinlich für Web- und Design-Teams den größten Nutzen. Sie bieten im Vergleich zu statischen Fontfamilien Einsparungen bei der Dateigröße. Dies ist besonders relevant für Webanwendungen. Die Einsparungen bei der Dateigröße sind abhängig vom Design und von der Anzahl der Stile. Generell sind sie innerhalb der Fontfamilie proportional zur Anzahl der Stile. Variable Fonts bieten außerdem mehr Flexibilität für das UI-Design-Team.


Das könnte Sie interessieren

Hat dies deine Frage beantwortet?