# Variable Fonts mit ungewöhnlichen Achsen > Experimentelle und ausdrucksstarke Variable Fonts mit eigenen Achsen: Weichheit, Hüpfen, Lockerheit, Morphing, Drehung, Grade und mehr. 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. How these were chosen: Variable Familien, deren Einträge mindestens eine eigene Achse über die registrierten Achsen für Strichstärke, Breite, Neigung, Kursive und optische Größe hinaus führen. ## Fonts (16) - [Recursive](https://trendhub.net/de/fonts/recursive.markdown) (Sans Serif, 16 Schnitte · variabel, OFL): Five axes in one file: proportional to monospace, linear to casual, upright to cursive. - [Fraunces](https://trendhub.net/de/fonts/fraunces.markdown) (Serif, 18 Schnitte · variabel, OFL): Die Achsen Softness und Wonky neben Strichstärke und optischer Größe. - [Roboto Flex](https://trendhub.net/de/fonts/roboto-flex.markdown) (Sans Serif, 20 Schnitte · variabel, OFL): 13 Achsen, darunter parametrische Regler für Strichdicke und Buchstabenhöhen. - [Google Sans Flex](https://trendhub.net/de/fonts/google-sans-flex.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Sechs Achsen: Strichstärke, Breite, optische Größe, Grade, Rundung und Neigung. - [Commissioner](https://trendhub.net/de/fonts/commissioner.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Flare and Volume axes grow serif-like endings on a humanist sans. - [Geologica](https://trendhub.net/de/fonts/geologica.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Cursive and Sharpness axes beside weight and slant. - [Shantell Sans](https://trendhub.net/de/fonts/shantell-sans.markdown) (Handschrift, 12 Schnitte · variabel, OFL): Bounce, Informality and Spacing axes on a marker-style handwriting font. - [Nunito Sans](https://trendhub.net/de/fonts/nunito-sans.markdown) (Sans Serif, 16 Schnitte · variabel, OFL): Eine Achse für die Kleinbuchstabenhöhe neben Strichstärke, Breite und optischer Größe. - [Science Gothic](https://trendhub.net/de/fonts/science-gothic.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): A custom contrast axis thins the horizontal strokes, beside weight, width and slant. - [Signika](https://trendhub.net/de/fonts/signika.markdown) (Sans Serif, 5 Schnitte · variabel, OFL): A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight. - [Kumbh Sans](https://trendhub.net/de/fonts/kumbh-sans.markdown) (Sans Serif, 9 Schnitte · variabel, OFL): A parametric axis changes the thickness of the thin strokes alone, beside weight. - [Akshar](https://trendhub.net/de/fonts/akshar.markdown) (Sans Serif, 5 Schnitte · variabel, OFL): Weight and contrast axes in a condensed sans for Latin and Devanagari. - [AR One Sans](https://trendhub.net/de/fonts/ar-one-sans.markdown) (Sans Serif, 4 Schnitte · variabel, OFL): A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight. - [Honk](https://trendhub.net/de/fonts/honk.markdown) (Display, 1 Schnitt · variabel, OFL): Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis. - [Kablammo](https://trendhub.net/de/fonts/kablammo.markdown) (Display, 1 Schnitt · variabel, OFL): A Morph axis makes its doodle-covered capitals shift and dance. - [Tilt Neon](https://trendhub.net/de/fonts/tilt-neon.markdown) (Display, 1 Schnitt · variabel, OFL): Two axes rotate its neon-tube letters up to 45 degrees in X and Y. ## FAQs ### 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. ## Related collections - [Variable Fonts mit Breitenachse](https://trendhub.net/de/fonts/for/variable-fonts-with-a-width-axis.markdown) - [Variable Fonts mit Achse für die optische Größe](https://trendhub.net/de/fonts/for/variable-fonts-with-optical-size.markdown) - [Futuristische Display-Fonts für Sci-Fi-Titel und Logos](https://trendhub.net/de/fonts/for/futuristic-display-fonts.markdown) - [Pixel- und Arcade-Fonts](https://trendhub.net/de/fonts/for/pixel-and-arcade-fonts.markdown) - [Handschrift-Fonts für Notizen, Zitate und persönliche Akzente](https://trendhub.net/de/fonts/for/handwriting-fonts.markdown) - [Schriftfamilien mit neun Strichstärken und Kursiven](https://trendhub.net/de/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/de/fonts/for/variable-fonts-with-unusual-axes (trendhub)