[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"STYDPchuxREDtVU1E9F5HYrks87htIaHutAo1N1AWDI":75,"Ntfp0xOGzDcR_F9HD6E_Qz9GBgXKRXRv8_7bIdidgCs":174,"_apollo:default":216},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":117,"postContentElements":13,"evergreen":13,"tags":13,"postWpBody":142,"wpHeaderImage":146,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":158,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":145,"wpYoastHead":167,"author":168},"NodeWpPost","729","Wie Typografie deine User Experience unterstützen kann. Teil 2",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1705996186,"UTC","+00:00","2024-01-23T07:49:46+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1698737144,"2023-10-31T07:25:44+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2",[94,101,108,113],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Wie Typografie deine User Experience unterstützen kann. Teil 2 | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":109,"tag":96,"attributes":114},{"__typename":111,"property":115,"content":116},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/wp-migration/wordpress-media-image/2023/10/BLOG_Typo_TEIL2_1204x630px.jpg?h=3ecc83bb&itok=YoAoya6F",{"__typename":118,"id":119,"name":120,"path":121,"status":20,"weight":122,"description":123,"langcode":127,"changed":128,"metatag":131},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":124,"processed":125,"format":126},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":129,"timezone":85,"offset":86,"time":130},1713772777,"2024-04-22T07:59:37+00:00",[132,135,139],{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":99,"content":134},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":136},{"__typename":98,"name":137,"content":138},"description","Themen aus dem Bereich Design & User Experience",{"__typename":102,"tag":103,"attributes":140},{"__typename":105,"href":141,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",{"__typename":143,"processed":144,"format":126,"summary":145},"TextSummary","\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Ca href=\"/blog/diggin-deep-into-typography\" target=\"_blank\" rel=\"noreferrer noopener\">Wir haben letztes Mal\u003C/a> genauer darauf geachtet, was eine gute Schrift ausmacht und worauf man bei der Schriftwahl achten sollte. Nun untersuchen wir, wie Layoutierung, Schriftmischung und inclusive Design (Barrierefreiheit) dabei unterstützen kann den Content unseren Usern best möglich gestalterisch zu vermitteln und damit auch die User Experience zu steigern. Abschließend gibt es auch ein paar Tipps, wo ihr moderne Fonts finden könnt und was es mit variable Fonts auf sich hat. 😉 \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\">\u003C/div>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>1 — Layoutierung eines Textes\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Zunächst einmal ist die Layoutierung eines Textes ausschlaggebend. Sie bestimmt, ob und wie der Inhalt erfasst wird. \u003C/strong> Hat man bereits eine passende Schrift gefunden, die zur Gestaltung aber auch charakterlich zu unserem Inhalt passt, so beginnt die typografische Ausgestaltung über die letztendlich gebotene Lesbarkeit. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Ein gut lesbarer Text setzt sich zusammen aus:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3  standard-list\">\n            \n\u003Cul>\u003Cli>der \u003Cstrong>Schriftgröße\u003C/strong>, \u003C/li>\u003Cli>\u003Cstrong>Zeilenlänge\u003C/strong> und \u003C/li>\u003Cli>\u003Cstrong>Zeilenabstand\u003C/strong> (oder Durchschuss). \u003C/li>\u003C/ul>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Diese drei Parameter stehen in unmittelbarer Abhängigkeit zueinander. Da das Zusammenspiel der drei Faktoren für jede Schrift abhängig von ihren individuellen Promotionen neu zu definieren ist, können festgelegte Werte nicht pauschal auf eine andere Schrift übertragen werden. Steht zum Beispiel ein Schriftwechsel vor, ist es notwendig Schriftgröße, Zeilenlänge und Durchschuss auf die neue Schrift anzupassen, um eine vergleichbare bzw. bessere Lesbarkeit zu gewährleisten. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>\u003Cstrong>Die drei Parameter genauer erklärt: \u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>1. Schriftgröße\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Die passende \u003Cstrong>Schriftgröße\u003C/strong> ist abhängig von der jeweiligen Schrift. Manche Schriften mit großen Ober- und Unterlängen müssen größer gesetzt werden (zum Beispiel Futura), anders als Schriften mit einer gleichmäßigen x-Höhe. Die Voreinstellungen in den Gestaltungsprogrammen sind daher nicht verlässlich und passen nicht für jede Schriftanwendung. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Ausschlaggebend für die Schriftgestaltung ist das gewählte Medium und die Textsorte. Im mobilen Design werden Schriften natürlich viel kleiner gesetzt, als im Desktop Design, abhängig von der Entfernung des Users zum Device.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Headlines oder Aufmacher Texte werden größer bzw. anders gesetzt wie Fließtexte. Alles dient der visuellen Unterscheidung und Sortierung des Contents, die wiederum die User Experience verbessern. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Der Wert der Punktgröße / rem Größe gibt nur ein ungefähres Maß für die Größe der Schrift an – tatsächlich kann der optische Eindruck extrem von der Punktangabe abweichen. Das liegt daran, dass sich ein Schriftzeichen mit seiner Größe dem vorhandenen Platz auf dem Kegel einpassen muss, sodass die Proportionen einer Schrift über ihre optische Größe entscheiden: \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-center col-xsmall-12 col-medium-6 col-medium-offset-3 \">\n            \n\u003Cdiv alt=\"Abbildung versch Schriften mit unterschiedlicher x-Höhe und Ober-&Unterlängen \" data-entity-type=\"media\" data-entity-uuid=\"5c915dc7-4a5f-4e43-8d12-aea2a67081a5\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=cyzdIL9o 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=yHnLORcf 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"576\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=02DNOdvL 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=vm_3nj9p 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=mETZQ-0i 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=Do511_Rx 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=xQy8buqw 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=styB36Mx 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=h8Np1CUu 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.webp?itok=HQxmqMdn 2x\" type=\"image/webp\" width=\"1620\" height=\"648\">\n                  \u003Cimg loading=\"lazy\" width=\"2461\" height=\"984\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb1-versch.-x-Ho%CC%88he-.jpg.jpg?itok=HQxmqMdn\" alt=\"Abbildung versch Schriften mit unterschiedlicher x-Höhe und Ober-&Unterlängen \" title=\"Abb1-versch.-x-Höhe-\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Bei dominanten Oberlängen wird die für die Leserlichkeit und Größenwirkung wichtige Mittelgänge viel kleiner abgebildet als bei einer Schrift mit dezenteren Oberlängen. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Aus diesem Grund sollten Schriften auf eine ähnliche x-Höhe angepasst werden, um einen aussagekräftigen Vergleich zu erhalten. Allerdings nimmt auch die Ausprägung von Ober-und Unterlägen Einfluss auf die optische Größe einer Schrift, weshalb die Anpassung der Schriftgröße nur nach Augenmaß erfolgen kann – was zwangsläufig zu subjektiven Ergebnissen führt.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>2. \u003Cstrong>Zeilenlänge\u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Zum zweiten Punkt, die \u003Cstrong>Zeilenlänge und Zeilenabstand\u003C/strong>. \u003Cbr>Dafür müssen wir zunächst mal verstehen, wie das Lesen überhaupt zustande kommt. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wir lesen nämlich nicht jeden Buchstaben einzeln, sondern das Auge springt quasi in mehreren ruckartigen Schritten über eine Zeile  – in sogenannten \u003Cstrong>Sakkaden\u003C/strong>. Es gleitet also nicht nur über die Zeilen, wie wir es selbst möglicherweise empfinden. Die Sakkaden werden in kurze \u003Cstrong>Fixationen\u003C/strong> unterbrochen. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"Beispieltext mit Vermerk auf Sakkaden & Fixation\" data-entity-type=\"media\" data-entity-uuid=\"b6e0bd1a-b3dc-4aca-8668-4488f25fd418\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=9mH8OqCK 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=xmkgusMp 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"576\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=Y6At4muS 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=AO9AeQMB 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=HEdE6FR4 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=FHEbfXUl 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=dYeKi377 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=FGGaN9F7 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=BapirMdL 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.webp?itok=ibmkb35p 2x\" type=\"image/webp\" width=\"1620\" height=\"648\">\n                  \u003Cimg loading=\"lazy\" width=\"2461\" height=\"984\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb2-Sakkaden-und-Fixation.jpg.jpg?itok=ibmkb35p\" alt=\"Beispieltext mit Vermerk auf Sakkaden & Fixation\" title=\"Abb2-Sakkaden-und-Fixation\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Nur während dieser Momente nimmt das Auge Buchstaben und Wörter wahr – während der Sprünge ist es quasi blind. Kommt es inhaltlich oder durch undeutliche Buchstabenformen zu Unklarheiten, springt das Auge zurück, um das Gelesene nochmals zu überprüfen. 10 bis 15 Prozent der Augenbewegungen sind solche rückwärtsgewandten Sakkaden (Regressionen) und blieben vom Leser meist unbemerkt – kosten aber viel Lesezeit und Konzentration. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>\u003Cem>Probier es selbst aus:\u003C/em>\u003C/strong>\u003Cbr>Lesetest: Halte zwei Finger über das linke Augenlid, lies diesen Absatz und versuch zu spüren wie sich dein Auge bewegt:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"Textbeispiel: Effektive Typografie verwendet eine Reihe von Strickstärken, Breiten und Implementierungen derselben Schrift. Es schafft starken Kontrast, visuelles Interesse und Hierachie.\" data-entity-type=\"media\" data-entity-uuid=\"32c26fa1-434b-4a4a-ae3a-b18f4da363b9\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=7wPjFyIQ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=GVtW6Pfd 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"576\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=ZBU2L8UK 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=fKc7QhFB 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=nB03Nq9S 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=TA5qsF6E 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=30tCuoPD 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=eDsQTs9e 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=ciDL_Plx 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.webp?itok=vf-iuRM2 2x\" type=\"image/webp\" width=\"1620\" height=\"648\">\n                  \u003Cimg loading=\"lazy\" width=\"2461\" height=\"984\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb3-Lesetest.jpg.jpg?itok=vf-iuRM2\" alt=\"Textbeispiel: Effektive Typografie verwendet eine Reihe von Strickstärken, Breiten und Implementierungen derselben Schrift. Es schafft starken Kontrast, visuelles Interesse und Hierachie.\" title=\"Abb3-Lesetest\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Du wirst an deinen Fingern spüren, wie sich das Auge sprunghaft nach rechts bewegt und einen großen Schritt nach links, wenn es in einer neuen Zeile angekommen ist. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Das heißt für einen optimalen Lesefluss ist die Schriftart wichtig, aber auch die Zeilenlänge.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Ist die Zeilenlänge zu breit, so ist es für das Auge mühsam vom Zeilenende in die neue Zeile links zu springen. Ist die Zeile zu kurz so ist der Lesefluss unterbrochen und das Auge springt zu oft in eine neue Zeile. Alles viel zu aufwendig für eine Handlung die wir aber so simpel wie möglich halten möchten. Die Zeilenlänge sollte daher, je nach Textgröße nicht zu breit oder zu schmal sein. Lange Zeilen benötigen generell einen größeren Abstand als kurze. Eine Schrift mit hoher x-Höhe profitiert von etwas mehr Durchschuss, da bereits die Zeichen selbst viel des Weißraums zwischen den Zeilen einnehmen. Umgekehrt ist bei ausgeprägten Ober- und Unterlängen ein geringer Zeilenabstand vorteilhaft, um den Text optisch zusammenzuhalten. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Die Zeilenlänge ist in erster Linie also von der Schriftgröße abhängig. In sehr kleinen Schriftgrößen ist es für Leser anstrengend, über längere Zeit den Blick auf einer Zeile zu halten. Für Lesegrößen (9-12pt. bzw 0,75-1 rem) ist häufig eine Zeilenlänge von 50-70 Zeichen optimal; diese Angabe ist aber lediglich ein Richtwert. Die optimale Zeilenlänge wird durch die individuellen Proportionen der Schrift definiert.\u003Cbr>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Das richtige Maß der Zeilenlänge entscheidet maßgeblich über den Lesefluss- und Geschwindigkeit. \u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Bei identischer Schriftgröße und Durchschuss scheint der Zeilenabstand bei kürzeren Zeilen größer zu sein als bei längeren Zeilen. \u003Cstrong>Daher gilt: je länger die Zeilen, umso größer der Zeilenabstand. Ein größerer Zeilenabstand hilft dem Leser beim Zeilenwechsel nicht in die falsche Zeile zu springen. \u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"Beispielstext als Anschauung für die Zeilenlänge\n\nText 1: Schriftgröße 20pt, Zeilenabstand 24pt\nText 2: Schriftgröße 20pt und Zeilenabstand 22pt\" data-entity-type=\"media\" data-entity-uuid=\"338a241b-070f-4686-a01c-4e8c98cb8b0c\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=ddn6GrXf 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=ejMv0sSD 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"1382\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=sMJ-OLk1 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=2SZYM0Ed 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"983\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=KY8XuPPv 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=wjnbtABB 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"715\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=2xa0um-G 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=-H82eKV9 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"461\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=Y_fkzfu1 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.webp?itok=mxNCPXp8 2x\" type=\"image/webp\" width=\"1620\" height=\"1555\">\n                  \u003Cimg loading=\"lazy\" width=\"2461\" height=\"2362\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb4-Beispiel-Zeilenla%CC%88nge.jpg.jpg?itok=mxNCPXp8\" alt=\"Beispielstext als Anschauung für die Zeilenlänge\n\nText 1: Schriftgröße 20pt, Zeilenabstand 24pt\nText 2: Schriftgröße 20pt und Zeilenabstand 22pt\" title=\"Abb4-Beispiel-Zeilenlänge\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>3. \u003Cstrong>Zeilenabstand\u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Anschließend wird der \u003Cstrong>Zeilenabstand \u003C/strong>ermittelt. Er beeinflusst den Grauwert des Textes und den gebotenen Lesekomfort. Bei zu geringem Zeilenabstand wird der Lesekomfort verringert, da zum einen Ober- und Unterlängen zweier Zeilen sich überschneiden können, sodass ein eindeutiges entziffern der Buchstaben mehr Zeitanspruch benötigt. Zum anderen kann der Leser während des Lesens in den Zeilen verrutschen, beim Zeilenwechsel leicht eine Zeile überspringen oder dieselbe Zeile erneut fixieren. Ist der Zeilenabstand zu groß, verliert der Text seinen Zusammenhalt. In beiden Fällen wird die Lesegeschwindigkeit herabgesetzt. Man sollte sich dabei nicht nur auf den in den Programmen voreingestellten Zeilenabständen verlassen, da diese nicht immer den optimalen Lesefluss bieten. Besonders Schriften mit einer hohen Mittellänge profitieren von zusätzlichen Raum zwischen den Zeilen, da sie mit ihrer x-Höhe bereits einen großen Teil der Zeilen ausfüllen, sodass der ausgeglichene Weißraum zwischen den Zeilen geringer als bei anderen Schriften ausfällt. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"Beispielstext für den Zeilenabstand\nText 1: Schrift 20pt, Zeilenabstand 25,5pt\nText 2: Schrift 20pt, Zeilenabstand 23pt\" data-entity-type=\"media\" data-entity-uuid=\"8287e863-75dc-4e10-bd58-e270fefd9891\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=m3GYLLmN 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=UXLlJ89l 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"1382\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=O5tHeEMM 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=a2Yb4VGi 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"983\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=Ma7bnwnG 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=Y5Deu1P2 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"715\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=RoUQw9Ww 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=kh10Ourx 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"461\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=CzCG-PZj 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.webp?itok=lw8Z1MBx 2x\" type=\"image/webp\" width=\"1620\" height=\"1555\">\n                  \u003Cimg loading=\"lazy\" width=\"2461\" height=\"2362\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb5.-Beispiel-Zeilenabsta%CC%88nde.jpg.jpg?itok=lw8Z1MBx\" alt=\"Beispielstext für den Zeilenabstand\nText 1: Schrift 20pt, Zeilenabstand 25,5pt\nText 2: Schrift 20pt, Zeilenabstand 23pt\" title=\"Abb5.-Beispiel-Zeilenabstände\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Weitere wichtige Gestaltungsmittel:\u003Cbr>\u003Cstrong>Gird, Weißraum und Barrierefreiheit\u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Die Positionierung der Schrift sollte sich immer am \u003Cstrong>Grid\u003C/strong> orientieren bzw einer bestimmten Regel der Ausrichtung am Grid folgen. So lassen sich starke und stilsichere Designs erstellen. Dabei muss darauf geachtet werden, dass das Layout auch mit mehreren Endgeräten funktioniert – sprich Responsive ist. Das Grid hilft dabei Texte zu sortieren, anzuordnen und besondere Layouts zu entwerfen um den User einen optischen Wegweiser zu bieten. Darauf aufbauend kann das Design dann in die Entwicklung gehen.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Nicht zu unterschätzen ist die Wichtigkeit des \u003Cstrong>Weißraums\u003C/strong>. Dieser bildet den Kontrast zum Schwarzraum – also zum Text, lädt zum Lesen ein, oder hebt bestimmte Bereiche optisch hervor.  \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\">\u003C/div>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>2 — Die Schriftmischung\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Generell ist ein Design insgesamt ruhiger und ansprechender, wenn wenig unterschiedliche Schriftarten eingesetzt werden. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Umso mehr Schriften wir mischen, umso mehr treten die einzelnen Schriften miteinander in Konkurrenz um die Aufmerksamkeit des Lesers. Es kann dadurch ein unruhiges Gesamtbild entstehen, das der leichten Aufnahme der Texte abträglich ist. Entscheidet man sich aber doch dafür unterschiedliche Schriftarten einzusetzen, so ist es notwenig folgende Punkte zu beachten: \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Zunächst gilt einmal: \u003Cstrong>In der Familie bleiben.\u003C/strong> Gibt es keinen zwingenden Grund weitere Schriftarten zu verwenden, so sollte man bei einer bleiben und die dafür entworfenen Schriftschnitte einer Schrift verwenden.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Entscheidet man sich doch für eine Schriftmischung, so gilt es folgende Punkte zu beachten: \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>(Empfohlen werden nur 2- max. 3 Schriften zu mischen)\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3  standard-list\">\n            \n\u003Cul>\u003Cli>\u003Cstrong>Kontrast erzeugen \u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>Einen ähnlichen Duktus verwenden\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>Schriftmischung innerhalb von Zeilen – x-Höhe anpassen\u003C/strong>\u003C/li>\u003C/ul>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>\u003Cstrong>Kontrast erzeugen\u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Erst wenn der Unterschied hinreichend groß ist, kann der Zweck der Schriftmischung wirksam zum Tragen kommen. So kann eine Groteskschrift statt mit einer anderen Groteskschrift besser mit einer Antiqua oder einer Schreibschrift kombiniert werden. Dieser Kontrast lässt sich weiter erhöhen, wenn sich auch die gewählten Schriftschnitte – zum Beispiel in Strichstärke, Neigung oder anderen Charaktereigenschaften – unterscheiden. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>\u003Cstrong>Einen ähnlichen Duktus verwenden\u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Also statische Schriften mit Statischen mischen und dynamische Schriften mit Dynamischen. \u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Diese lassen sich grundsätzlich leichter kombinieren und schaffen ein einheitliches, ruhigeres Gesamtbild trotz verschiedenerer Schriftarten.  Gleich und gleich verträgt sich gut 😉\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Exkurs:\u003C/strong>\u003Cbr>\u003Cstrong>Was sind Statische und dynamische Schriften?\u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cbr>Bei \u003Cstrong>statischen Schriften\u003C/strong> sind die Formen der Buchstaben in sich geschlossen. Erkennen kann man dies gut an c, e, a, s;\u003Cbr>Die Senkrechte ist betont. Das a ist offen, das g ohne untere Schleife. Wenn sie zu eng gesetzt werden, kann sich eine ‚Gartenzaun-Wirkung‘ ergeben. Bei mehrzeiligen Texten ist deshalb ein ausreichend großer Durchschuss nötig. Ruhiges, nüchternes Gesamtbild.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Die dynamische Schrift\u003C/strong> \u003Cbr>Die Achsen der Rundungen sind schräg versetzt, wie bei einer dynamischen Antiqua. Es herrscht eine Betonung der Waagerechten. Die Buchstaben sind deutlich unterschiedlich geformt, was sich beispielsweise an dem sogenannten zweistöckigen \u003Cem>g\u003C/em> deutlich zeigt. Auch die offene Form verschiedener Buchstaben (z. B. c, e, a) deutet auf einen dynamischen Stil hin.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Im Wortbild ergibt sich ein einheitlich, gemeinsames Bild, da die Buchstaben dicht zueinander stehen. Durch die dadurch hohe Lesbarkeit kann eine dynamische Grotesk für viele Aufgaben ohne Probleme eingesetzt werden.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"Gegenüberstellung zweier Beispiele für Dynamische (Brandon Grotesque) vs. Statische Schrift (Helvetica) - offene/versus, geschlossene Formen\" data-entity-type=\"media\" data-entity-uuid=\"250ba9fb-b2c5-4a03-9956-b39bc152e5b7\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=BClJ2ob5 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=Yo-Vs9Yz 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"1209\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=K069dMFF 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=jlpLH6Kc 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"860\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=JbNya9No 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=fUYMs1bM 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"626\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=nYLCjwwB 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=5da5i1AE 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"403\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=8WXB0706 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.webp?itok=rkL-ZL6R 2x\" type=\"image/webp\" width=\"1620\" height=\"1361\">\n                  \u003Cimg loading=\"lazy\" width=\"2461\" height=\"2067\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2023/10/Abb6-Dynamische-Statische-Schrift.jpg.jpg?itok=rkL-ZL6R\" alt=\"Gegenüberstellung zweier Beispiele für Dynamische (Brandon Grotesque) vs. Statische Schrift (Helvetica) - offene/versus, geschlossene Formen\" title=\"Abb6-Dynamische-Statische-Schrift\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>\u003Cstrong>Schriftmischung innerhalb von Zeilen\u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wie wir bereits gelesen haben, ist es in der Regel notwenig die x-Höhe unterschiedlicher Schriften anzupassen, da sie mit gleicher Schriftgröße in einer Zeile eher selten harmonieren.  \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Die x-Höhe ist also das entscheidende Maß. Also gilt die anzupassen. Für Schriftmischungen innerhalb von Zeilen gelten die vorgenannten Empfehlungen zu Kontrast und Duktus in gleicher Weise bzw. sind gegebenenfalls sogar besonders relevant. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\">\u003C/div>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>3 — Barrierefreiheit bzw. inclusive Design\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Der letzte aber sehr wichtige  Punkt in der Schriftgestaltung ist die Barrierefreiheit bzw. inclusive Design. \u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Das neue Barrierefreiheits-Gesetz (BaFG), welches 2024 noch als nationales Recht und ab Juni 2025 in Kraft treten wird, sieht für Websites aller Unternehmen, die digitale Produkte und Dienstleistungen anbieten, einen barrierefreien Zugang vor.In der allgemeinen Auslegung wird das als WCAG Level AA verstanden. Sprich eine Website muss für alle Menschen erreichbar und erfassbar sein. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Die Schriftfarbe muss zum Hintergrund ein bestimmten Kontrastwert erreichen, damit sie auch von Menschen mit Farbschwächen gelesen werden kann. Den Kontrastwert kann man sich hier ableiten lassen: \u003Ca href=\"https://contrast.tools/?tab=wcag-21\" target=\"_blank\" rel=\"noreferrer noopener\">Das Contrast tool\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wer auf den Geschmack gekommen ist, kann sich hier noch weiter in das Thema vertiefen: \u003Ca href=\"https://inclusivedesignprinciples.org/\" target=\"_blank\" rel=\"noreferrer noopener\">Inclusive Design Principles\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\">\u003C/div>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>\u003Cstrong>INSPIRATION\u003C/strong>\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>\u003Cstrong>Wo finde ich gute Schriften? Eine Type list to go 😉\u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Wo kann man gute Schriften finden bzw. Inspirationen finden?\u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Eine Top Adresse um Schriften in ihrer Anwendung bereits zu sehen ist \u003Cstrong>\u003Ca href=\"http://fontsinuse.com\" target=\"_blank\" rel=\"noreferrer noopener\">fontsinuse\u003C/a>\u003C/strong>\u003Ca href=\"http://fontsinuse.com\" target=\"_blank\" rel=\"noreferrer noopener\">\u003Cstrong>.com\u003C/strong>\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Einen guten Überblick über verschiedenste Fonts und die Fontsuche findet man auf: \u003Ca href=\"https://www.myfonts.com/\" target=\"_blank\" rel=\"noreferrer noopener\">\u003Cstrong>https://www.\u003C/strong>\u003C/a>\u003Cstrong>\u003Ca href=\"https://www.myfonts.com/\" target=\"_blank\" rel=\"noreferrer noopener\">myfonts\u003C/a>\u003C/strong>\u003Ca href=\"https://www.myfonts.com/\">\u003Cstrong>.com/\u003C/strong>\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Gute Designs und mit extravaganten Schriften findet man auch immer wieder auf: \u003Cstrong>\u003Ca href=\"http://awwwards.com\" target=\"_blank\" rel=\"noreferrer noopener\">awwwards\u003C/a>\u003C/strong>\u003Ca href=\"http://awwwards.com\">\u003Cstrong>.com\u003C/strong>\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Weitere empfehlenswerte Foundries Adressen sind: \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Ca href=\"https://abcdinamo.com/\" target=\"_blank\" rel=\"noreferrer noopener\">https://abcdinamo.com/\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Ca href=\"https://www.typemates.com/fonts\" target=\"_blank\" rel=\"noreferrer noopener\">https://www.typemates.com/fonts\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Ca href=\"https://justanotherfoundry.com/\" target=\"_blank\" rel=\"noreferrer noopener\">https://justanotherfoundry.com/\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Ca href=\"https://www.dstype.com/fonts\" target=\"_blank\" rel=\"noreferrer noopener\">https://www.dstype.com/fonts\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>\u003Cstrong>INSPIRATION:\u003C/strong>\u003C/h3>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Wie schaut die Zukunft der Typografie im Web aus? It`s variable fonts!\u003C/strong>\u003Cbr>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Was sind variable fonts, warum sollte man sie einsetzen und wo kann man sie finden?\u003C/strong> Variable Font ist eine Fontdatei, die sich wie viele Schriftschnitte verhält. Alle Varianten der Schrift – von der Strichstärke über die Breite bis hin zur Neigung – finden in einer hocheffizienten, komprimierten Datei ihren Platz. \u003Cbr>Variable Fonts lösen nicht nur das technische Problem, indem sie viel weniger Dateien verwenden, da ja nur mehr eine Fontdatei benötigt wird, das wiederum zu schnelleren Ladezeiten führt. Auch  neue kreative Möglichkeiten eröffnen sich hiermit und fördern die typografische Qualität von Websiten.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Effektive Typografie verwendet eine Reihe von Strichstärken, Breiten und Implementierungen derselben Schrift. Es schafft starken Kontrast, visuelles Interesse und Hierarchie. Variable Fonts ermöglichen es, viel kreativer und gezielter zu sein. Sie bieten die Möglichkeit, ein überzeugenderes Erlebnis zu schaffen, welches genau auf die Bedürfnisse des Benutzers zugeschnitten ist.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Aus all diesen Gründen darf Typografie nicht vernachlässigt werden. So komplex, verzwickt und breitgefächert es auch ist, ist eine gut gesetzte Typografie im Webdesign definitiv jeden Effort wert. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cbr>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n","Es sind nicht ausschließlich die Informationsarchitektur, oder UX writing allein, welche die User Experience verbessern, sondern vor allem die Typografie als das grundlegendste Designelement. Sie schafft es Marke, Inhalt und User zu einem zusammenhängenden, ansprechenden und nutzbaren Erlebnis zu verbinden und somit die User Experience zu verbessern. Wie das geht und was man dabei beachten sollte, erfährt ihr jetzt. ;)",{"__typename":147,"id":148,"excludeFromScreenreader":13,"mediaImage":149,"name":154,"path":157,"status":20},"MediaImage","266",{"__typename":150,"url":151,"width":152,"height":153,"alt":13,"title":154,"size":155,"mime":156},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2023/10/BLOG_TYPOGRAFIE_TEIL-2-2880x1300px-scaled.jpg",2560,1156,"BLOG_TYPOGRAFIE_TEIL 2-2880x1300px",402624,"image/jpeg","/media/266/edit",{"__typename":147,"id":159,"excludeFromScreenreader":13,"mediaImage":160,"name":164,"path":166,"status":20},"265",{"__typename":150,"url":161,"width":162,"height":163,"alt":13,"title":164,"size":165,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2023/10/BLOG_Typo_TEIL2_1204x630px.jpg",1204,630,"BLOG_Typo_TEIL2_1204x630px",438880,"/media/265/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Es sind nicht ausschließlich die Informationsarchitektur, oder UX writing allein, welche die User experience verbessern, sondern vor allem die Typografie als das grundlegendstes Designelement.\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Wie Typografie deine User Experience unterstützen kann. Teil 2 - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Es sind nicht ausschließlich die Informationsarchitektur, oder UX writing allein, welche die User experience verbessern, sondern vor allem die Typografie als das grundlegendstes Designelement.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2023-10-31T08:25:44+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2024-01-23T08:49:46+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2023/10/Abb1-versch.-x-Höhe-.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"10 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2023/10/Abb1-versch.-x-Ho\\u0308he-.jpg\",\"width\":2461,\"height\":984},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2/\",\"name\":\"Wie Typografie deine User Experience unterst\\u00fctzen kann. Teil 2 - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2/#primaryimage\"},\"datePublished\":\"2023-10-31T08:25:44+00:00\",\"dateModified\":\"2024-01-23T08:49:46+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/1148e993c3c904514147aae8c29c1b23\"},\"description\":\"Es sind nicht ausschlie\\u00dflich die Informationsarchitektur, oder UX writing allein, welche die User experience verbessern, sondern vor allem die Typografie als das grundlegendstes Designelement.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/1148e993c3c904514147aae8c29c1b23\",\"name\":\"Miriam Perkmann\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/880dfe8fac180347a81d4b722bf6e9b9?s=96&d=mm&r=g\",\"caption\":\"Miriam Perkmann\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":169,"id":170,"myRole":171,"name":172,"nickname":173},"User","14","UX/UI Designerin","miriam-perkmann","Miriam Perkmann",{"latestKnowhow":175},[176,191,204],{"__typename":79,"id":177,"title":178,"path":179,"wpTeaserText":180,"wpPromotedTeaserImage":13,"wpHeaderImage":181},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":147,"id":182,"excludeFromScreenreader":13,"mediaImage":183,"name":189,"path":190,"status":20},"3364",{"__typename":150,"url":184,"width":185,"height":186,"alt":187,"title":13,"size":188,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":192,"title":193,"path":194,"wpTeaserText":195,"wpPromotedTeaserImage":13,"wpHeaderImage":196},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":147,"id":197,"excludeFromScreenreader":13,"mediaImage":198,"name":202,"path":203,"status":20},"3355",{"__typename":150,"url":199,"width":185,"height":186,"alt":200,"title":13,"size":201,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":205,"title":206,"path":207,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":208},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":147,"id":209,"excludeFromScreenreader":21,"mediaImage":210,"name":214,"path":215,"status":20},"3303",{"__typename":150,"url":211,"width":185,"height":186,"alt":212,"title":13,"size":213,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":217,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":218,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":222,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":225,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":228,"Menu:footer":231,"ROOT_QUERY":241,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":257,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":260,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":263,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":266,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":269,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":272,"Menu:nuxt-main-menu":275,"TermCategories:8":289,"MediaImage:266":300,"MediaImage:265":302,"User:14":304,"NodeWpPost:729":305,"MediaImage:3364":327,"NodeWpPost:1619":329,"MediaImage:3355":332,"NodeWpPost:1616":334,"MediaImage:3303":337,"NodeWpPost:1606":339},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",219,"internal",20,"expanded",21,"attributes",221],{"__ref":220},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",223,"internal",20,"expanded",21,"attributes",224],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",226,"internal",20,"expanded",21,"attributes",227],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",229,"internal",21,"expanded",21,"attributes",230],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",232],[233,235,237,239],{"__ref":234},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":236},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":238},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":240},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",242,"menu({\"name\":\"FOOTER\"})",243,"menu({\"name\":\"NUXT_MAIN_MENU\"})",245,"route({\"path\":\"/blog/wie-typografie-deine-user-experience-unterstuetzen-kann-teil-2\"})",247,"latestKnowhow({\"excludeId\":\"729\",\"limit\":3})",250],"Query",{"__ref":244},"Menu:footer",{"__ref":246},"Menu:nuxt-main-menu",["null","__typename",77,"entity",248],{"__ref":249},"NodeWpPost:729",[251,253,255],{"__ref":252},"NodeWpPost:1619",{"__ref":254},"NodeWpPost:1616",{"__ref":256},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",258,"internal",20,"expanded",21,"attributes",259],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",261,"internal",20,"expanded",21,"attributes",262],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",264,"internal",20,"expanded",21,"attributes",265],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",267,"internal",20,"expanded",21,"attributes",268],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",270,"internal",20,"expanded",21,"attributes",271],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",273,"internal",20,"expanded",21,"attributes",274],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",276],[277,279,281,283,285,287],{"__ref":278},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":280},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":282},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":284},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":286},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":288},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",118,"id",119,"name",120,"path",121,"status",20,"weight",122,"description",290,"langcode",291,"changed",292,"metatag",293],["null","__typename",124,"processed",125,"format",126],{"__ref":220},["null","__typename",83,"timestamp",129,"timezone",85,"offset",86,"time",130],[294,296,298],["null","__typename",95,"tag",96,"attributes",295],["null","__typename",98,"name",99,"content",134],["null","__typename",95,"tag",96,"attributes",297],["null","__typename",98,"name",137,"content",138],["null","__typename",102,"tag",103,"attributes",299],["null","__typename",105,"href",141,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",147,"id",148,"excludeFromScreenreader",13,"mediaImage",301,"name",154,"path",157,"status",20],["null","__typename",150,"url",151,"width",152,"height",153,"alt",13,"title",154,"size",155,"mime",156],["null","__typename",147,"id",159,"excludeFromScreenreader",13,"mediaImage",303,"name",164,"path",166,"status",20],["null","__typename",150,"url",161,"width",162,"height",163,"alt",13,"title",164,"size",165,"mime",156],["null","__typename",169,"id",170,"myRole",171,"name",172,"nickname",173],["null","__typename",79,"id",80,"title",81,"changed",306,"created",307,"langcode",308,"path",92,"promote",21,"status",20,"sticky",21,"metatag",309,"category",318,"contentElements",13,"evergreen",13,"tags",13,"wpBody",320,"wpHeaderImage",321,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",323,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",145,"wpYoastHead",167,"author",325],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":220},[310,312,314,316],["null","__typename",95,"tag",96,"attributes",311],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",313],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",315],["null","__typename",111,"property",112,"content",81],["null","__typename",109,"tag",96,"attributes",317],["null","__typename",111,"property",115,"content",116],{"__ref":319},"TermCategories:8",["null","__typename",143,"processed",144,"format",126,"summary",145],{"__ref":322},"MediaImage:266",{"__ref":324},"MediaImage:265",{"__ref":326},"User:14",["null","__typename",147,"id",182,"excludeFromScreenreader",13,"mediaImage",328,"name",189,"path",190,"status",20],["null","__typename",150,"url",184,"width",185,"height",186,"alt",187,"title",13,"size",188,"mime",156],["null","__typename",79,"id",177,"title",178,"path",179,"wpTeaserText",180,"wpPromotedTeaserImage",13,"wpHeaderImage",330],{"__ref":331},"MediaImage:3364",["null","__typename",147,"id",197,"excludeFromScreenreader",13,"mediaImage",333,"name",202,"path",203,"status",20],["null","__typename",150,"url",199,"width",185,"height",186,"alt",200,"title",13,"size",201,"mime",156],["null","__typename",79,"id",192,"title",193,"path",194,"wpTeaserText",195,"wpPromotedTeaserImage",13,"wpHeaderImage",335],{"__ref":336},"MediaImage:3355",["null","__typename",147,"id",209,"excludeFromScreenreader",21,"mediaImage",338,"name",214,"path",215,"status",20],["null","__typename",150,"url",211,"width",185,"height",186,"alt",212,"title",13,"size",213,"mime",156],["null","__typename",79,"id",205,"title",206,"path",207,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",340],{"__ref":341},"MediaImage:3303"]