{"id":5859,"date":"2021-06-25T15:34:09","date_gmt":"2021-06-25T12:34:09","guid":{"rendered":"https:\/\/typetype.org\/de\/?p=5859"},"modified":"2026-02-05T08:50:04","modified_gmt":"2026-02-05T05:50:04","slug":"variable-fonts-whats-new-in-them-for-designers","status":"publish","type":"post","link":"https:\/\/typetype.org\/de\/blog\/variable-fonts-whats-new-in-them-for-designers\/","title":{"rendered":"Variable Schriften: Was ist neu f\u00fcr Designer?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/var_fonts.gif\" alt=\"\" class=\"wp-image-1000005860\"\/><\/figure>\n\n\n\n<p>In&nbsp;diesem Artikel werden wir \u00fcber <a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variable Schriften<\/a> sprechen und erkl\u00e4ren, warum sie ein interessantes, n\u00fctzliches, aber untersch\u00e4tztes Werkzeug sind. Wir werden auch ihre Nachteile und die Feinheiten der Arbeit mit ihnen behandeln. <\/p>\n\n\n\n<p>Der Artikel behandelt die folgenden Themen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Entstehungsgeschichte <\/li>\n\n\n\n<li>Technische Besonderheiten <\/li>\n\n\n\n<li>Vor- und Nachteile <\/li>\n\n\n\n<li>Nutzungsspezifika <\/li>\n\n\n\n<li>Beispiele f\u00fcr kreative Anwendungen <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Entstehungsgeschichte<\/h2>\n\n\n\n<p>Beginnen wir mit der Geschichte der Entwicklung der Technologie <a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variabler<\/a> Schriften. <\/p>\n\n\n\n<p>Ende der 1980er Jahre stellte Adobe das PostScript-Format vor, und Apple pr\u00e4sentierte das TrueType-Format f\u00fcr die Entwicklung von Schriftendateien. Beide verwendeten B\u00e9zier-Kurven zur Konstruktion von Zeichen. Diese Formate verwenden wir bis heute in&nbsp;aktualisierten Formen, wenn wir mit Schriftendateien arbeiten. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-8.png\" alt=\"\" class=\"wp-image-1000005861\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8.png 3001w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-1024x328.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-768x246.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-1200x384.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-2048x655.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-8-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">1980er Jahre&nbsp;\u2014 PostScript (Adobe), TrueType (Apple)<\/figcaption><\/figure>\n\n\n\n<p>1991 stellte Adobe die Multiple-Master-Technologie als Erweiterung des PostScript-Formats vor. Sie erm\u00f6glichte&nbsp;es, mehrere Konturvarianten f\u00fcr eine Glyphe in&nbsp;derselben Schriftendatei zu&nbsp;speichern. Diese Varianten waren die Endpunkte auf einer Skala, zwischen denen man Zwischenwerte finden konnte, beispielsweise um&nbsp;das Gewicht oder die Breite zu&nbsp;\u00e4ndern. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-9.png\" alt=\"\" class=\"wp-image-1000005862\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9.png 3001w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-768x245.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-1200x383.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-2048x654.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-9-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">1991&nbsp;\u2014 Multiple Master (Adobe) <\/figcaption><\/figure>\n\n\n\n<p>Um&nbsp;eine solche Schrift zu&nbsp;verwenden, musste zun\u00e4chst ein statisches Schriftbild mit einem speziellen Programm (Adobe Type Manager) generiert und dann ins System hochgeladen werden, um&nbsp;es&nbsp;in&nbsp;einem Grafikeditor zu&nbsp;nutzen. Aufgrund der Komplexit\u00e4t der Nutzung wurde dieses Format nie popul\u00e4r, und Schriftendesigner setzten weiterhin auf statische Schriftbilder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-10.png\" alt=\"\" class=\"wp-image-1000005863\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10.png 3001w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-768x245.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-1200x383.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-2048x654.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-10-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">Statische Schrift<\/figcaption><\/figure>\n\n\n\n<p>1997 stellten Adobe und Microsoft gemeinsam die OpenType-Technologie vor. Diese basierte auf dem TrueType-Format, erlaubte jedoch die Implementierung einer viel gr\u00f6\u00dferen Anzahl von Zeichen (65.000, zuvor war die Grenze 256). TrueType erm\u00f6glichte auch OpenType-Funktionen, ohne die wir uns moderne Schriften heute nicht mehr vorstellen k\u00f6nnen. Dazu geh\u00f6ren die Unterst\u00fctzung von Kapit\u00e4lchen, Tabellenziffern, Hochstellungen, stilistische Sets, kontextbezogene Alternativen und mehr. Das OpenType-Format ist bis heute das popul\u00e4rste. <\/p>\n\n\n\n<p>Im&nbsp;Jahr 2016 k\u00fcndigten Adobe, Apple, Google und Microsoft die neue Version des OpenType-Formats an&nbsp;\u2014 OpenType Font Variables. Seitdem k\u00f6nnen Schriftendesigner Informationen \u00fcber mehrere Schriftbilder einer Schriftfamilie in&nbsp;einer einzigen Datei speichern. Der entscheidende Punkt dieses Formats \u00e4hnelt Multiple Master, hat jedoch einen wesentlichen Unterschied: Statische Schriftbilder m\u00fcssen nicht mehr im&nbsp;Voraus generiert werden. Parameter k\u00f6nnen direkt im&nbsp;Grafikeditor eingestellt werden. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-12.gif\" alt=\"\" class=\"wp-image-1000005864\"\/><figcaption class=\"wp-element-caption\">2016&nbsp;\u2014 OpenType Font Variables <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Technische Besonderheiten <\/h2>\n\n\n\n<p>Schauen wir uns genauer&nbsp;an, wie sich dieses Format vom klassischen OpenType unterscheidet. <\/p>\n\n\n\n<p>Wenn ein Designer eine Schriftfamilie kauft, beispielsweise eine serifenlose Schrift mit neun Gewichten, erh\u00e4lt er&nbsp;oder sie neun separate Schriftendateien. Diese Schriftbilder wurden zuvor von einem Schriftendesigner vorbereitet, und die Gewichte wurden so&nbsp;berechnet, dass die Breiten schrittweise vom leichtesten zum fettesten angeordnet sind.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-13.png\" alt=\"\" class=\"wp-image-1000005865\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13.png 3001w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-768x245.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-1200x383.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-2048x654.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-13-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-norms-pro\/\">TT\u00a0Norms Pro<\/a><\/figcaption><\/figure>\n\n\n\n<p>Eine variable Schrift hingegen besteht aus nur einer Datei, und der Bereich der Schriftbilder ist nur durch die d\u00fcnnsten und fettesten Varianten begrenzt. Der Designer kann jede beliebige Variante dazwischen ausw\u00e4hlen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-14.gif\" alt=\"\" class=\"wp-image-1000005866\"\/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-norms-pro\/\">TT\u00a0Norms Pro<\/a> Variable<\/figcaption><\/figure>\n\n\n\n<p>Wenn man in&nbsp;eine Schrift hineinschaut, sieht man, dass jedes Zeichen Ankerpunkte hat, auf denen es&nbsp;aufgebaut ist. Wenn die Anzahl dieser Punkte in&nbsp;den leichtesten und fettesten Schriftbildern gleich ist, kann das Programm sie verbinden und die Zwischenpositionen berechnen. Die Schriftenentwicklung ist nat\u00fcrlich nicht so&nbsp;einfach und direkt, und oft m\u00fcssen mehr als zwei Master angegeben werden, aber dies beeinflusst die Benutzererfahrung nicht. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-15.png\" alt=\"\" class=\"wp-image-1000005867\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15.png 3000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-768x246.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-1200x384.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-2048x655.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-15-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\">Ankerpunkte<\/figcaption><\/figure>\n\n\n\n<p>Der Bereich zwischen zwei End-Schriftbildern wird als Achse bezeichnet. In&nbsp;Grafikeditoren wie Adobe sieht dies wie ein Schieberegler aus, mit dem der gew\u00fcnschte Wert eingestellt werden kann.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-16.gif\" alt=\"\" class=\"wp-image-1000005868\"\/><figcaption class=\"wp-element-caption\">Schieberegler im&nbsp;Grafikeditor <\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Variationsachsen-Optionen<\/h4>\n\n\n\n<p>Die erste Variante ist die Gewichtsachse, die bereits beschrieben wurde. In&nbsp;den meisten Schriftfamilien gibt es&nbsp;mehrere Schriftbilder mit unterschiedlichen Gewichten, und theoretisch k\u00f6nnen sie alle variabel sein. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-17.gif\" alt=\"\" class=\"wp-image-1000005869\"\/><figcaption class=\"wp-element-caption\">Gewichtsachse <\/figcaption><\/figure>\n\n\n\n<p>Stellen Sie sich vor, Sie haben eine regul\u00e4re Schriftfamilie gekauft und planen, sie f\u00fcr ein Buch oder eine Website mit einem gro\u00dfen Textumfang zu&nbsp;verwenden. Sie wissen, welches optimale Gewicht der Haupttext haben sollte, damit er&nbsp;angenehm zu&nbsp;lesen ist. Aber Sie haben ein Problem: Das regul\u00e4re Schriftbild der Familie wirkt zu&nbsp;leicht, und das n\u00e4chste, sagen wir Medium, wirkt zu&nbsp;fett. Ein Gewicht zwischen Regular und Medium w\u00e4re perfekt, existiert aber nicht. Mit einer variablen Schrift k\u00f6nnten Sie den Schieberegler im&nbsp;Editor bewegen oder einen benutzerdefinierten Wert in&nbsp;CSS angeben, um&nbsp;es&nbsp;zu&nbsp;erstellen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-18-1-1.png\" alt=\"\" class=\"wp-image-1000005874\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1.png 3001w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-768x245.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-1200x383.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-2048x654.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">Optimales Gewicht<\/figcaption><\/figure>\n\n\n\n<p>Die n\u00e4chste h\u00e4ufige Achse ist die Breite der Schrift. In&nbsp;statischen Familien gibt es&nbsp;mehrere Breitenoptionen, zum Beispiel Normal, Condensed oder Extended. In&nbsp;der variablen Schrift k\u00f6nnen Sie die ben\u00f6tigte Breite manuell zwischen der schmalsten und der breitesten Variante ausw\u00e4hlen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-19.gif\" alt=\"\" class=\"wp-image-1000005871\"\/><figcaption class=\"wp-element-caption\">Breitenachse <\/figcaption><\/figure>\n\n\n\n<p>Diese Einstellung kann n\u00fctzlich sein, wenn Sie Text in&nbsp;schmalen Spalten setzen, die so&nbsp;viel Text wie m\u00f6glich aufnehmen m\u00fcssen. Die normale Breite ist f\u00fcr diesen Zweck zu&nbsp;breit, und die schmale ist f\u00fcr das Lesen gro\u00dfer Texte unpraktisch. Eine variable Schrift w\u00fcrde es&nbsp;Ihnen erm\u00f6glichen, das Schriftbild etwas schmaler zu&nbsp;machen, ohne die Lesbarkeit zu&nbsp;beeintr\u00e4chtigen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-18-1.png\" alt=\"\" class=\"wp-image-1000005872\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1.png 3001w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-768x245.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1200x383.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-2048x654.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-18-1-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">Optimale Breite<\/figcaption><\/figure>\n\n\n\n<p>Die dritte Achse ist die Neigung. Sie ist anwendbar, wenn die Zeichen im&nbsp;geneigten Schriftbild genauso konstruiert sind wie im&nbsp;aufrechten. Diese Variante findet sich meistens in&nbsp;<a href=\"https:\/\/typetype.org\/de\/fonts\/serif\/\">serifenlosen<\/a> Schriften. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-22.gif\" alt=\"\" class=\"wp-image-1000005875\"\/><figcaption class=\"wp-element-caption\">Neigungsachse <\/figcaption><\/figure>\n\n\n\n<p>Sie k\u00f6nnen den Neigungswinkel selbst w\u00e4hlen und so&nbsp;regulieren, wie stark sich dieses Schriftbild im&nbsp;Text abhebt. Diese Option ist n\u00fctzlich, wenn Sie einen gro\u00dfen Textblock in&nbsp;einem geneigten Schriftbild setzen m\u00fcssen, ohne den Leser zu&nbsp;st\u00f6ren.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-23.png\" alt=\"\" class=\"wp-image-1000005877\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23.png 3001w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-768x245.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-1200x383.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-2048x654.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-23-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">Optimale Neigung <\/figcaption><\/figure>\n\n\n\n<p>Schlie\u00dflich gibt es&nbsp;eine weniger verbreitete, aber ebenfalls in&nbsp;das OTF-Var-Format eingebettete Achse: die optische Gr\u00f6\u00dfenachse.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-24.png\" alt=\"\" class=\"wp-image-1000005878\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24.png 3000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-768x246.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-1200x384.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-2048x655.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-24-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-fors\/\">TT\u00a0Fors<\/a> Display<\/figcaption><\/figure>\n\n\n\n<p>Sie haben vielleicht Display- und Text-Unterfamilien in&nbsp;<a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variablen<\/a> Schriften gesehen. Die erste zeichnet sich in&nbsp;der Regel durch h\u00f6heren Kontrast, mehr Details und engere Abst\u00e4nde aus. Display-Schriftbilder werden in&nbsp;Titeln, Plakaten und anderen F\u00e4llen verwendet, in&nbsp;denen gro\u00dfe Textgr\u00f6\u00dfen ben\u00f6tigt werden. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-25.png\" alt=\"\" class=\"wp-image-1000005879\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25.png 3000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-768x246.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-1200x384.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-2048x655.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-25-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-fors\/\">TT\u00a0Fors<\/a> Display<\/figcaption><\/figure>\n\n\n\n<p>Die Text-Unterfamilie hat hingegen niedrigeren Kontrast und weniger Details. Insgesamt ist sie in&nbsp;kleineren Gr\u00f6\u00dfen und bei gro\u00dfen Texten besser lesbar. <\/p>\n\n\n\n<p>In&nbsp;einer variablen Schrift k\u00f6nnen Sie eine Zwischenstufe generieren, die in&nbsp;kleinen Gr\u00f6\u00dfen immer noch gut lesbar ist, aber raffinierter als ein einfaches Text-Schriftbild. Diese Variante w\u00e4re beispielsweise ideal f\u00fcr kleinere Titel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-26.png\" alt=\"\" class=\"wp-image-1000005880\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26.png 3000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-768x246.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-1200x384.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-1536x491.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-2048x655.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-26-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-fors\/\">TT\u00a0Fors<\/a> Text<\/figcaption><\/figure>\n\n\n\n<p>Wir haben nun die Achsen behandelt, die von den Formatentwicklern implementiert wurden. F\u00fcr sie wurden spezifische Namen entwickelt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wght&nbsp;\u2014 Gewicht <\/li>\n\n\n\n<li>wdth&nbsp;\u2014 Breite <\/li>\n\n\n\n<li>slnt&nbsp;\u2014 Neigung <\/li>\n\n\n\n<li>ital&nbsp;\u2014 Kursiv <\/li>\n\n\n\n<li>opsz&nbsp;\u2014 optische Gr\u00f6\u00dfe <\/li>\n<\/ul>\n\n\n\n<p>Schriftendesigner k\u00f6nnen jedoch auch ihre eigenen Achsen erfinden und implementieren. <\/p>\n\n\n\n<p>Es&nbsp;gibt fertige Beispiele, bei denen sich die folgenden Parameter \u00e4ndern: Serifenl\u00e4nge, H\u00f6he von Klein- und Gro\u00dfbuchstaben, H\u00f6he von Ober- und Unterl\u00e4ngen, Kontrast usw.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-28.gif\" alt=\"\" class=\"wp-image-1000005881\"\/><figcaption class=\"wp-element-caption\">Quelle: <a href=\"https:\/\/www.axis-praxis.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis.org<\/a><\/figcaption><\/figure>\n\n\n\n<p>Eine Schrift kann nat\u00fcrlich auch dekorativ ver\u00e4ndert werden. Hier ist nur die Vorstellungskraft des Autors die Grenze. <\/p>\n\n\n\n<p>Stellen Sie sich vor, eine Achse bietet Ihnen tausend Optionen f\u00fcr Schriftbilder. Wenn Sie zwei Achsen haben, gibt es&nbsp;nun eine Million Optionen. Mit benutzerdefinierten Achsen werden die Schriftm\u00f6glichkeiten unendlich. <\/p>\n\n\n\n<p>Zusammenfassend l\u00e4sst sich sagen, dass mit <a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variablen<\/a> Schriften fast jede typografische Aufgabe gel\u00f6st werden kann. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vor- und Nachteile variabler Schriften<\/h2>\n\n\n\n<p>Lassen Sie uns nun einige Probleme besprechen, die bei der Verwendung <a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variabler<\/a> Schriften auftreten, sowie interessante Anwendungsf\u00e4lle. <\/p>\n\n\n\n<p>Es&nbsp;sollte auch angemerkt werden, dass die Technologie variabler Schriften seit vielen Jahren existiert. W\u00e4hrend die Technologie der Schrifteditoren erheblich vorangeschritten ist und variable Schriften viel einfacher zu&nbsp;erstellen sind, sind sie immer noch nicht sehr popul\u00e4r oder weit verbreitet. Dies bedeutet, dass entweder noch kein Bereich existiert, in&nbsp;dem sie genutzt werden k\u00f6nnen, oder dass das Produkt selbst nicht der Marktnachfrage entspricht, oder dass die Werkzeuge ihre Nutzung nicht erm\u00f6glichen. Derzeit unterst\u00fctzen nicht alle Grafikeditoren und Browser variable Schriften&nbsp;\u2014 zum Beispiel unterst\u00fctzen nicht alle Browser Design-Apps.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-31-33.1.png\" alt=\"\" class=\"wp-image-1000005883\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1.png 1440w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-1024x327.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-768x245.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-1200x383.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.1-300x96.png 300w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><figcaption class=\"wp-element-caption\">Quelle: <a href=\"https:\/\/v-fonts.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-31-33.2.png\" alt=\"\" class=\"wp-image-1000005884\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2.png 3000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-1024x328.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-768x246.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-1200x384.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-1536x492.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-2048x655.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-31-33.2-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\">Quelle: <a href=\"https:\/\/v-fonts.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a><\/figcaption><\/figure>\n\n\n\n<p>Der gr\u00f6\u00dfte Nachteil variabler Schriften ist die geringe Qualit\u00e4t. Viele variable Schriften sind von mittelm\u00e4\u00dfiger Qualit\u00e4t und k\u00f6nnen daher in&nbsp;kritischen Momenten Probleme verursachen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-34.gif\" alt=\"\" class=\"wp-image-1000005885\"\/><figcaption class=\"wp-element-caption\">Geringe Qualit\u00e4t einiger variabler Schriften<\/figcaption><\/figure>\n\n\n\n<p>Ein weiteres Beispiel: Wenn Sie eine Website haben, die t\u00e4glich eine Million Mal geladen wird und die gesamte Norms PRO-Familie verwendet, nimmt sie 5.306&nbsp;KByte auf der Webseite ein. Wenn Sie die variable Version der Familie verwenden, ben\u00f6tigt sie nur 1.875&nbsp;KByte. Schauen Sie sich die Tabelle unten&nbsp;an. Bei dieser enormen Anzahl an&nbsp;t\u00e4glichen Aufrufen ergibt sich ein Gesamtunterschied von 3.272&nbsp;GB, die vom Server geladen werden m\u00fcssen. F\u00fcr jeden einzelnen Ladevorgang ist dies zwar nicht besonders relevant, aber in&nbsp;der Summe macht es&nbsp;einen Unterschied.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-35-35.png\" alt=\"\" class=\"wp-image-1000005886\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35.png 3000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-1024x328.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-420x134.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-768x246.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-1200x384.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-1536x492.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-2048x655.png 2048w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-600x192.png 600w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-944x302.png 944w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-80x26.png 80w, https:\/\/typetype.org\/de\/wp-content\/uploads\/slajd-35-35-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\">Unterschied zwischen statischer und variabler Version der Schrift <\/figcaption><\/figure>\n\n\n\n<p>Es&nbsp;ist auch zu&nbsp;beachten, dass die meisten variablen Schriften nicht gehinted sind. Dies ist ein schwieriger Prozess, der erlernt werden muss. Aus diesem Grund werden variable Schriften in&nbsp;kleinen Gr\u00f6\u00dfen m\u00f6glicherweise nicht immer korrekt dargestellt.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-37.mp4\"><\/video><figcaption class=\"wp-element-caption\">Hinting von variablen Schriften<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wie man variable Schriften verwendet<\/h2>\n\n\n\n<p>Lassen Sie uns nun \u00fcber die Verwendung <a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variabler<\/a> Schriften in&nbsp;der Praxis sprechen. <\/p>\n\n\n\n<p>Schauen wir uns zun\u00e4chst Adobe Illustrator an. Angenommen, Sie haben bereits einen Text eingegeben und m\u00f6chten eine bereits installierte variable Schrift daf\u00fcr ausw\u00e4hlen. Solche Schriften haben ein &#8222;var&#8220;-Zeichen neben sich in&nbsp;der Liste. \u00dcbrigens hat Adobe in&nbsp;den neuesten Softwareversionen eigene variable Schriften installiert, sodass Sie sofort mit ihnen experimentieren k\u00f6nnen.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-39.mp4\"><\/video><figcaption class=\"wp-element-caption\">Auswahl einer variablen Schrift in&nbsp;Adobe Illustrator <\/figcaption><\/figure>\n\n\n\n<p>Sobald Sie eine variable Schrift ausgew\u00e4hlt haben, erscheint im&nbsp;Zeichenbedienfeld eine zus\u00e4tzliche Schaltfl\u00e4che &#8222;Variable Font&#8220;. Dahinter verbergen sich alle in&nbsp;der Schrift vorhandenen variablen Achsen, und Sie k\u00f6nnen die Parameter mit den Schiebereglern \u00e4ndern. Die Ergebnisse sind sofort sichtbar. Andere Einstellungen in&nbsp;diesem Bedienfeld bleiben unver\u00e4ndert.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-40.mp4\"><\/video><figcaption class=\"wp-element-caption\">Variable Schieberegler im&nbsp;Zeichenbedienfeld<\/figcaption><\/figure>\n\n\n\n<p>Sie k\u00f6nnen auch eines der Schriftbilder aus der Liste ausw\u00e4hlen und diese Familie als statisch verwenden.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-41.mp4\"><\/video><figcaption class=\"wp-element-caption\">Variable Schrift als statische Schriftbilder<\/figcaption><\/figure>\n\n\n\n<p>Der Prozess in&nbsp;Sketch ist absolut identisch, aber es&nbsp;gibt keine speziellen Markierungen neben variablen Schriften.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-42.mp4\"><\/video><figcaption class=\"wp-element-caption\">Auswahl einer variablen Schrift in&nbsp;Sketch<\/figcaption><\/figure>\n\n\n\n<p>Variable Schriften k\u00f6nnen mit Hilfe von CSS im&nbsp;Web implementiert werden. Wir werden dies nicht im&nbsp;Detail behandeln, aber wir k\u00f6nnen uns ansehen, wie variable Schriften im&nbsp;Web integriert werden. <\/p>\n\n\n\n<p>Hier sehen Sie, dass die \u00c4nderung der Eigenschaften variabler Schriften mit CSS Transitions m\u00f6glich ist.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-44.mp4\"><\/video><figcaption class=\"wp-element-caption\">CSS Transitions<\/figcaption><\/figure>\n\n\n\n<p>Diese Demo zeigt die Unterst\u00fctzung f\u00fcr CSS Animation.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-45-1.mp4\"><\/video><figcaption class=\"wp-element-caption\">CSS Animation<\/figcaption><\/figure>\n\n\n\n<p>Und ein Beispiel, wie es&nbsp;m\u00f6glich ist, jeden Buchstaben separat zu&nbsp;animieren.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-46.mp4\"><\/video><figcaption class=\"wp-element-caption\">Animation jedes Buchstabens separat<\/figcaption><\/figure>\n\n\n\n<p>Sie k\u00f6nnen mehr \u00fcber die Verwendung variabler Schriften im&nbsp;Web in&nbsp;Richard Rutters Artikeln auf Medium lesen:<\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@clagnut\/get-started-with-variable-fonts-c055fd73ecd7\" target=\"_blank\" rel=\"noreferrer noopener\">Get started with variable fonts<\/a>&nbsp;\u2014 eine kurze, aber umfassende Einf\u00fchrung.<br><a href=\"https:\/\/clearleft.com\/posts\/how-to-use-variable-fonts-in-the-real-world\" target=\"_blank\" rel=\"noreferrer noopener\">How to&nbsp;use variable fonts in&nbsp;the real world<\/a>&nbsp;\u2014 Beschreibung der Probleme, die auftreten k\u00f6nnen, und wie man sie l\u00f6st.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Beispiele f\u00fcr kreative Anwendungen<\/h2>\n\n\n\n<p>Schauen wir uns kreative Beispiele an&nbsp;\u2014 wie Sie <a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variable<\/a> Schriften mit etwas Fantasie verwenden k\u00f6nnen. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Beispiel f\u00fcr das Strecken der Schrift in&nbsp;Abh\u00e4ngigkeit von der Gr\u00f6\u00dfe des Containers.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-21.mp4\"><\/video><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/vimeo.com\/303531520\" target=\"_blank\" rel=\"noreferrer noopener\">Quelle<\/a><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Beispiel f\u00fcr interessante Versuche, variable Schriften in&nbsp;AR (Augmented Reality) zu&nbsp;verwenden. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-49.mp4\"><\/video><figcaption class=\"wp-element-caption\">Quelle: <a href=\"https:\/\/vimeo.com\/303531635\" target=\"_blank\" rel=\"noreferrer noopener\">Variable Schriften in&nbsp;AR<\/a> <\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Beispiel, wie sich eine Schrift in&nbsp;Abh\u00e4ngigkeit von der Betrachtungsentfernung ver\u00e4ndern kann.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-50.mp4\"><\/video><figcaption class=\"wp-element-caption\">Quelle: <a href=\"https:\/\/vimeo.com\/178954414\" target=\"_blank\" rel=\"noreferrer noopener\">Distance Based Interpolation<\/a><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Beispiel f\u00fcr die Anpassung der Schrifts\u00e4ttigung in&nbsp;Abh\u00e4ngigkeit von den Lesebedingungen, in&nbsp;diesem Fall der Beleuchtung.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/sites\/5\/slajd-51.mp4\"><\/video><figcaption class=\"wp-element-caption\">Quelle: <a href=\"https:\/\/blog.prototypr.io\/an-exploration-of-variable-fonts-37f85a91a048\" target=\"_blank\" rel=\"noreferrer noopener\">Variable Schrift bei unterschiedlichen Lesebedingungen<\/a><\/figcaption><\/figure>\n\n\n\n<p>Sie k\u00f6nnen einen Schritt weiter gehen und bewegte Bilder aus der Schrift erstellen, wie <a href=\"https:\/\/www.axis-praxis.org\/playground\/horse\/\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis<\/a> vorschl\u00e4gt. Sie k\u00f6nnen sie sogar bunt machen, indem Sie mehrere Buchstaben \u00fcbereinander legen, wie in&nbsp;<a href=\"https:\/\/www.axis-praxis.org\/playground\/horse\/\" target=\"_blank\" rel=\"noreferrer noopener\">Toshi Omagari<\/a> Experimenten zu&nbsp;sehen ist. Dies geht jedoch nat\u00fcrlich \u00fcber die urspr\u00fcnglichen Zwecke der Schriftnutzung hinaus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-52-53.gif\" alt=\"\" class=\"wp-image-1000005902\"\/><figcaption class=\"wp-element-caption\">Bewegte Bilder aus der Schrift <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">N\u00fctzliche Quellen<\/h2>\n\n\n\n<p>Wir m\u00f6chten einige Ressourcen vorschlagen, wo&nbsp;Sie mit <a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">variablen<\/a> Schriften arbeiten k\u00f6nnen. <\/p>\n\n\n\n<p>Erstens, <a href=\"https:\/\/www.axis-praxis.org\/specimens\/__DEFAULT__\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis.org<\/a>, das eine gro\u00dfe Sammlung variabler Schriften bietet. Sie k\u00f6nnen dort auch Ihre eigene Schrift hochladen. <\/p>\n\n\n\n<p>Zweitens gibt es&nbsp;<a href=\"https:\/\/v-fonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a>, wo&nbsp;Sie verschiedene Schriften in&nbsp;vereinfachter Form ausprobieren k\u00f6nnen.<\/p>\n\n\n\n<p>Schlie\u00dflich gibt es&nbsp;die gro\u00dfartige Website, die wir in&nbsp;unserer Arbeit aktiv nutzen, um&nbsp;variable Schriften zu&nbsp;testen: <a href=\"https:\/\/dinamodarkroom.com\/gauntlet\/\" target=\"_blank\" rel=\"noreferrer noopener\">dinamodarkroom.com<\/a> von Dinamo. Dort k\u00f6nnen Sie nicht nur variable Achsen, sondern auch OpenType-Funktionen testen und statische Schriften mit definierten Parametern hochladen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Anstelle eines Fazits <\/h2>\n\n\n\n<p><a href=\"https:\/\/typetype.org\/de\/fonts\/variable\/\">Variable<\/a> Schriften haben das Potenzial, ein integraler Bestandteil der Schriftwelt zu&nbsp;werden. In&nbsp;den letzten Jahren wurde viel \u00fcber sie gesprochen, aber sie sind noch nicht weit verbreitet. Derzeit sind sie Werkzeuge zur L\u00f6sung spezifischer Aufgaben. Wir m\u00fcssen auch feststellen, dass immer mehr variable Schriften erscheinen. Sie werden die Welt erobern! Es&nbsp;ist nur eine Frage der Zeit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In\u00a0diesem Artikel werden wir \u00fcber variable Schriften sprechen und erkl\u00e4ren, warum sie ein interessantes, n\u00fctzliches, aber untersch\u00e4tztes Werkzeug sind. Wir werden auch ihre Nachteile und die Feinheiten der Arbeit mit ihnen behandeln.<\/p>\n","protected":false},"author":1,"featured_media":1000005860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[188],"class_list":["post-5859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-work-with-fonts"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/5859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/comments?post=5859"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/5859\/revisions"}],"predecessor-version":[{"id":47032,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/5859\/revisions\/47032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/media\/1000005860"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/media?parent=5859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/categories?post=5859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/tags?post=5859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}