Variable Fonts für eine variable Welt
Variable Fonts für eine variable Welt
Phil Garnham Wissen teilen
Wir leben heute in einer variablen Welt, in der sich Designstrukturen an ihre Umgebung anpassen, das Design optimiert und zielgerichtet ist und der Text dynamisch ist und sich dem Kontext anpasst. Nie zuvor waren die Systeme der visuellen Sprache so anpassungsfähig und reaktionsschnell. Was wäre, wenn Fonts sich ebenfalls anpassen könnte?
Echte responsive Typografie ist in greifbare Nähe gerückt: Fonts kann sich jetzt an Licht, Entfernung, Geräusche und Bewegung anpassen... wir können uns auf eine bestimmte Funktionalität konzentrieren oder unerwartete Ausdrucksmöglichkeiten schaffen - oder beides. Und das Beste daran ist, dass die variablen Möglichkeiten von Fonts in einer einzigen kleinen Font Datei zusammengefasst sind.
Unser responsives Logo für Amsteldok reagiert auf Bewegung und Tageszeit, lesen Sie alles Über hier.
Was ist eine Variable Font?
Heute sind wir an Lizenzierung Font Dateien gewöhnt, bei denen jede Stil Datei eine separate Datei ist. Eine variable Font kann eine ganze Familie von Stilen in eine kleine, optimierte TrueType- oder WOFF2 Font Datei packen: eine einzige Font Datei, die wie eine vollständige Font Familie funktioniert, aber den Kreativen viel mehr bietet.
Was ist eine Achse? Was ist der Gestaltungsraum?
Achsen sind die linearen Strukturen, die den variablen Fonts ihre Superkräfte verleihen. Betrachten Sie sie als leistungsstarke Schieberegler, mit denen Sie das Aussehen und die Wirkung von Fontneu gestalten können. FS Kitty hat eine "Schatten"-Achse, FS Pimlico hat eine "Glühen"-Achse. Durch Verschieben und Anpassen dieser Achsen können Sie den Schatten- oder Glüheffekt verstärken oder abschwächen. In einer traditionellen Textfamilie Font finden Sie eine Reihe von Standard- oder "registrierten Achsen" wie Gewicht (wght), Breite (wdth), Kursiv (ital), optische Größe (opsz) und Neigung (slnt).
Der Typ Designer kann alle Arten von Achsen in einer variablen Font erstellen, die Möglichkeiten sind nahezu unbegrenzt. Darüber hinaus werden alle Design-Transformationen sorgfältig innerhalb eines Rahmens erstellt, der als Font "Design-Raum" bekannt ist. Dieser "Design-Raum" definiert die Grenzen des Fonts Spielplatzes, so dass es als Font Nutzer unmöglich ist, unerwartete Verzerrungen zu erzeugen. Wir können bei allen möglichen Iterationen einer variablen Font von Fontsmith die gleiche hohe Designqualität garantieren wie bei unseren statischen Font Standarddateien.
Vorteil eins: Gestaltung
Was bedeutet das alles für Sie als Designer? Nehmen wir an, Sie haben FS Industrie Bold in Ihrer Markenidentität festgelegt. Großartig! Es wäre jedoch ideal, eine etwas leichtere Schrift zu wählen, die irgendwo zwischen Medium und Bold liegt Fonts, eine Schrift, die für die Marke eine einzigartige "SemiBold" sein wird. Mit der variablen FS Industrie Font können Sie ein genaues Gewicht und eine Breite einstellen, die überall im Designbereich vorhanden sind. Verschieben Sie die Schieberegler für "Gewicht" und "Breite" oder weisen Sie die Werte in CSS zu, um die perfekten Proportionen und den Grad der Fettheit zu finden.
Stellen Sie sich nun vor, Sie suchen ein gegliedertes Serifen-Schriftsystem, z. B. eine kontrastreiche Display-Serif für knackige Überschriften und eine kontrastarme Text-Serif für kleinformatigen Text. Perfekt! FS Kim hat eine optische Größenachse. Sie können den Kontrast in jedem Buchstaben erhöhen oder verringern, um die Lesbarkeit von Fonts bei bestimmten Pixelgrößen zu verbessern. (Hinweis: Sie können die Achse für die optische Größe auch als intelligente Funktion in CSS implementieren, der Webbrowser wird dann automatisch die entsprechende optische Größe der Font implementieren).
Vorteile: Logistik
Es versteht sich von selbst, dass eine einzelne Datei viel einfacher zu verwalten ist. Eine Font Datei zum Installieren, eine Font Datei zum Referenzieren, eine Font Datei zum Laden in einen Browser. Weniger Dateien, die gepflegt, verwaltet und im Auge behalten werden müssen. Viel Spaß mit Tagen!
Vorteile: Erreichbarkeit
Wenn eine Schrift nicht von allen Fähigkeiten gelesen werden kann, ist sie nicht inklusiv. Variable Fonts können das Leseerlebnis und die Zugänglichkeit verbessern, da sie so programmiert werden können, dass sie sich an den Kontext, das Gerät, die Nutzer Präferenzen und den Leseabstand anpassen... So kann zum Beispiel eine "Grad"-Achse Ändern eine Fonts Dunkelheit subtil abschwächen und sie fetter machen, ohne den Buchstabenabstand oder die Zeilenlänge zu verändern. Der Vorteil? Ändern Sie können die Schwärzung von Fontfür Benutzer mit Sehbehinderungen anpassen, während die Integrität der Designstruktur erhalten bleibt. Oder die Größe und Form der Buchstaben kann an die Pixeldichte des Geräts oder die Geräteausrichtung angepasst werden. Das sind nur ein paar Beispiele. Variable Fonts verbessern die Möglichkeiten zur Anpassung der Schrift an den Leser erheblich.
Vorteile: Kreativität
Die variable Font Technologie ist noch jung, nämlich erst drei Jahre alt. Achtung: Die Unterstützung ist begrenzt :( Aber auch diese Technologie wächst schnell heran. Heute bieten alle großen Browser ein gewisses Maß an Unterstützung, ebenso wie einige desktop Anwendungen. Heute ist ein guter Tag, um mit dem Spielen und Nachdenken anzufangen - "Was kann ich mit einer variablen Font erstellen?". Stellen Sie sich eine neue Welt der Font Möglichkeiten vor! Verbessertes responsives Webdesign, aufwändige Dekoration, Hinzufügen unterschiedlicher Texturen, Animieren von Schnörkeln entlang einer Achse mit CSS, Erstellen interaktiver Buchstabenformen, brauchen wir eine "Floppy-Jelly"-Achse? :) Wir können jetzt die Daten von Font in ganz neuen Formen und Dimensionen manipulieren.
Vorteile: Größe ist alles
Variable Fonts verbessern die Webleistung. Sie tun dies, indem sie alle möglichen Font Stile in eine einzige Datei packen, eine Datei, die auf einen Bruchteil der Standard Font Dateigröße reduziert wurde. Nehmen wir zum Beispiel die typografisch reichhaltigen Nachrichten Webseiten , die sich stark auf eine ausgefeilte typografische Hierarchie stützen, um einen klaren und zugänglichen Inhalt zu liefern. Alle Font Dateien müssen gleichzeitig in Ihr Browserfenster geladen werden, um die Webseite zu rendern, und das kann oft eine Menge Daten bedeuten. Diese Datenbelastung kann zu Font Fallback- und Browser-Rendering-Problemen führen, insbesondere bei mobilen Verbindungen. Unsere variablen Font Dateien haben eine Verringerung der Dateigröße von 70-85%, da alle Stile in einer Datei enthalten sind, wodurch die Verzögerung zwischen dem Laden und der Anzeige der Fonts verringert und die Leistung von Font verbessert wird.
Variable Studie Fonts
Die variable Schrift Fonts von Fontsmith können Sie kostenlos ausprobieren! Klicken Sie einfach auf "Download trial Fonts" und folgen Sie dem Download-Verfahren auf MyFonts. com.
Vollständig variabel Fonts
Unsere variablen Fonts können in den Formaten TrueType desktop und WOFF2 web Font lizenziert werden und enthalten einen vollständigen Zeichensatz*. Kaufen Sie einfach die komplette Font Familie einer beliebigen variablen Font auf unserer Webseite und die variable Font Version ist enthalten. * Hinweis: FS Kitty, FS Pimlico Glow und FS Pele sind zur Zeit nicht in einer Version mit vollständigem Zeichensatz erhältlich.
Das Kleingedruckte
Die variable Schrift Fonts von Fontsmith können Sie kostenlos testen. Klicken Sie einfach auf 'Download trial Fonts' und folgen Sie dem Download-Verfahren auf MyFonts. com. Diese Testdateien Font haben den Namen "VFTrial" angehängt und enthalten einen reduzierten Zeichensatz für "Testzwecke" Font .