Variable Fonts mit ungewöhnlichen Achsen
Experimentelle und ausdrucksstarke Variable Fonts mit eigenen Achsen: Weichheit, Hüpfen, Lockerheit, Morphing, Drehung, Grade und mehr.
Push the slider
Das Format der Variable Fonts erlaubt es, jede Eigenschaft eines Entwurfs zur Achse zu machen. Fünf sind registriert und verbreitet: Strichstärke, Breite, Neigung, Kursive und optische Größe. Darüber hinaus kann ein Gestalter für alles, was sich an der Schrift sinnvoll variieren lässt, eine eigene Achse erfinden und ihr ein Tag aus vier Großbuchstaben geben. Diese Freiheit hat in den letzten Jahren einfallsreiche Schriften hervorgebracht.
Eigene Achsen lassen sich in einige Gruppen einteilen. Parametrische Achsen steuern ein messbares Merkmal, etwa die Dicke dünner Striche oder die Höhe der Kleinbuchstaben, und sind Werkzeuge für die feine typografische Anpassung. Grade ändert, wie schwer Text wirkt, ohne seine Breite zu ändern, sodass Zeilen nicht umbrechen; das ist nützlich für den Dunkelmodus. Ausdrucksstarke Achsen verändern den Charakter der Buchstaben: weichere Ecken, ein lockeres Wackeln, ein Hüpfen entlang der Grundlinie, serifenartige Ausläufer. Und manche Achsen sind reines Konzept und binden die Form der Buchstaben an Daten oder drehen sie im Raum.
In CSS wird jede eigene Achse mit font-variation-settings gesetzt, über ihr Tag und eine Zahl. Da sie stufenlos sind, lassen sich Achsen animieren oder an Scrollen und Eingaben koppeln. Die Hinweise unten nennen die eigenen Achsen jedes Fonts, wie sie erfasst sind.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Die Achsen Softness und Wonky neben Strichstärke und optischer Größe.
-
Roboto Flex
13 Achsen, darunter parametrische Regler für Strichdicke und Buchstabenhöhen.
-
Google Sans Flex
Sechs Achsen: Strichstärke, Breite, optische Größe, Grade, Rundung und Neigung.
-
Commissioner
Flare and Volume axes grow serif-like endings on a humanist sans.
-
Geologica
Cursive and Sharpness axes beside weight and slant.
-
Shantell Sans
Bounce, Informality and Spacing axes on a marker-style handwriting font.
-
Nunito Sans
Eine Achse für die Kleinbuchstabenhöhe neben Strichstärke, Breite und optischer Größe.
-
Science Gothic
A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
-
Signika
A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
-
Kumbh Sans
A parametric axis changes the thickness of the thin strokes alone, beside weight.
-
Akshar
Weight and contrast axes in a condensed sans for Latin and Devanagari.
-
AR One Sans
A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
-
Honk
Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
-
Kablammo
A Morph axis makes its doodle-covered capitals shift and dance.
-
Tilt Neon
Two axes rotate its neon-tube letters up to 45 degrees in X and Y.
Die Schriftproben laden von jeder Familie ein lateinisches Basis-Subset. Jede Familie hier hat eine offene Lizenz. Auf ihrer Seite stehen die Bedingungen und die Originaldateien.
Fragen zu Variable Fonts mit ungewöhnlichen Achsen
Wie nutze ich eine eigene Achse in CSS?
Schreibe font-variation-settings mit dem Achsen-Tag in Anführungszeichen und einem Wert, zum Beispiel "SOFT" 100. Eigene Tags unterscheiden Groß- und Kleinschreibung und werden in Großbuchstaben geschrieben.
Lassen sich die Achsen von Variable Fonts animieren?
Ja. Achsenwerte lassen sich in CSS überblenden oder animieren und per JavaScript steuern, da es stufenlose Zahlen sind.
Wozu dient eine Grade-Achse?
Sie lässt Text heller oder schwerer wirken, ohne die Buchstabenbreiten zu ändern, sodass sich das Layout nicht verschiebt. Gestalter nutzen sie, um dunkle Hintergründe oder unterschiedliche Displays auszugleichen.