{"id":1943,"date":"2023-01-16T12:25:11","date_gmt":"2023-01-16T11:25:11","guid":{"rendered":"https:\/\/www.visionconnect.de\/blog\/?p=1943"},"modified":"2023-01-16T15:20:58","modified_gmt":"2023-01-16T14:20:58","slug":"variable-fonts","status":"publish","type":"post","link":"https:\/\/www.visionconnect.de\/blog\/2023\/variable-fonts\/","title":{"rendered":"Variable Fonts"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>\u00bbVariable Fonts\u00ab<\/strong> werden auch als <strong>\u00bbOpenType\u00ae* Variable Fonts\u00ab<\/strong>, <strong>\u00bbVariable Schriftarten\u00ab<\/strong> oder <strong>\u00bbVariable Schriften\u00ab<\/strong> bezeichnet und sind eine Technologie, die es erm\u00f6glicht, eine Schriftfamilie \u2013 also eine Gruppe zusammengeh\u00f6render Schriftstile \u2013 in einer Datei zu speichern. Im Gegensatz zu traditionellen Schriftdateien, bei denen jeder Schriftstil in einer eigenen Datei gespeichert wird, erm\u00f6glichen Variable Fonts es, die Stile in einer einzigen Datei zu speichern. Dies hat mehrere Vorteile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die Vorteile und Einsatzm\u00f6glichkeiten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zun\u00e4chst einmal sind <strong><strong>\u00bbVariable Fonts\u00ab<\/strong><\/strong> sehr platzsparend, da f\u00fcr Schriftfamilien nur eine Datei vorgehalten werden muss. Einzelne Dateien f\u00fcr die jeweiligen Schriftstile wie Schriftbreite (z. B. condensed, wide), Schriftlage (z. B. italic) und Schriftst\u00e4rke (z.B. light, bold, etc.) sind deshalb nicht mehr notwendig. Dies ist insbesondere f\u00fcr Webseiten von Vorteil, da weniger Ressourcen heruntergeladen werden, was die Ladezeit der Seite verbessert und somit einen weiteren Performance-Faktor bei der Google Bewertung darstellt.<br><br>Dar\u00fcber hinaus erm\u00f6glichen <strong><strong>\u00bbVariable Fonts\u00ab<\/strong><\/strong> eine einfache Anpassung der Schrift an die Bed\u00fcrfnisse des Designs. Statt mehrere Schriftdateien zu verwenden, um verschiedene Schriftgr\u00f6\u00dfen oder -stile zu erzielen, kann mit einer einzigen Fonts-Datei alles erreicht werden. Dies vereinfacht den Designprozess und die Gestaltung der Website oder des Dokuments f\u00e4llt \u2013 zumindest aus technischer Sicht \u2013 leichter.<br><br><strong><strong>\u00bbVariable Fonts\u00ab<\/strong><\/strong> werden auch f\u00fcr die Gestaltung von Benutzeroberfl\u00e4chen immer beliebter. Sie erm\u00f6glichen es, die Schrift an das Display anzupassen, auf dem sie angezeigt wird, und somit f\u00fcr eine bessere Lesbarkeit und Benutzerfreundlichkeit zu sorgen.<br><br>Ein weiterer Vorteil von <strong><strong>\u00bbVariable Fonts\u00ab<\/strong><\/strong> ist, dass sie die M\u00f6glichkeit bieten, Animationen und Transitions zu erstellen. Durch die Anpassung verschiedener Schriftstile wie Schriftbreite, Schriftlage oder Schriftst\u00e4rke k\u00f6nnen interessante visuelle Effekte erzielt werden, die mit traditionellen Schriftdateien nicht m\u00f6glich w\u00e4ren.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2023\/01\/blog-illu-1-1024x453.jpg\" alt=\"\" class=\"wp-image-1992\" width=\"1130\" height=\"501\" srcset=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2023\/01\/blog-illu-1-1024x453.jpg 1024w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2023\/01\/blog-illu-1-418x185.jpg 418w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2023\/01\/blog-illu-1-825x365.jpg 825w, https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2023\/01\/blog-illu-1.jpg 1130w\" sizes=\"auto, (max-width: 1130px) 100vw, 1130px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alles in allem bieten <strong><strong>\u00bbVariable Fonts\u00ab<\/strong><\/strong> viele Vorteile gegen\u00fcber traditionellen Schriftdateien und sind eine Technologie, die in Zukunft sicherlich noch an Bedeutung gewinnen wird. Sie vereinfachen den Designprozess, sparen Platz und Ressourcen und erm\u00f6glichen die Erstellung von ansprechenden visuellen Effekten. Wenn also dar\u00fcber nachgedacht wird, Schriftarten zu aktualisieren, sollten Variable Fonts definitiv in Betracht gezogen werden.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">* OpenType\u00ae ist ein plattform\u00fcbergreifendes Schriftdateiformat<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.typografie.info\/3\/artikel.htm\/wissen\/was-sind-variable-fonts-r455\/\" target=\"_blank\" rel=\"noreferrer noopener\">www.typografie.info\/3\/artikel.htm\/wissen\/was-sind-variable-fonts-r455\/<\/a><br><a href=\"https:\/\/www.typolexikon.de\/variable-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">www.typolexikon.de\/variable-fonts\/<\/a><br><a href=\"https:\/\/variablefonts.io\/about-variable-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">variablefonts.io\/about-variable-fonts\/<\/a><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wo es bisher \u00fcblich war f\u00fcr unterschiedliche Schriftstile wie Strichst\u00e4rken, Schriftbreiten und Schriftlagen separate Font-Dateien vorzuhalten, werden bei dieser Schrifttechnologie die gew\u00fcnschten Stilvarianten anhand einer einzelnen Schriftdatei und den darin enthaltenen Stilattributtabellen \u00bbinterpoliert\u00ab.<\/p>\n","protected":false},"author":16,"featured_media":1985,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,5],"tags":[47,25,26,46],"class_list":["post-1943","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-technik","tag-css","tag-design","tag-technik","tag-typogafie"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/comments?post=1943"}],"version-history":[{"count":26,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1943\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1943\/revisions\/1997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/media\/1985"}],"wp:attachment":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/media?parent=1943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/categories?post=1943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/tags?post=1943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}