{"id":135,"date":"2015-12-20T23:44:07","date_gmt":"2015-12-20T22:44:07","guid":{"rendered":"https:\/\/quantenfrosch.at\/blog\/?p=135"},"modified":"2019-02-03T23:53:13","modified_gmt":"2019-02-03T22:53:13","slug":"typografie-fuers-webdesign","status":"publish","type":"post","link":"https:\/\/quantenfrosch.at\/blog\/typografie-fuers-webdesign\/","title":{"rendered":"Typografie f\u00fcrs Webdesign"},"content":{"rendered":"<p><strong>Typografie <\/strong>&#8211; was hat es mit diesem Begriff auf sich? Die meisten Website-Betreiber legen ihren Schwerpunkt auf Inhalte, weniger auf die grafische Aufbereitung. Mal hier, mal dort wird ein Bild eingebaut, das war&#8217;s auch schon. Im <a href=\"https:\/\/www.baseplus.de\/webdesign-trends-2018-der-whitespace-kehrt-zurueck\/\" target=\"_blank\" rel=\"noopener noreferrer\">modernen Webdesign<\/a> hat die Schrift jedoch eine gro\u00dfe Bedeutung, denn mit ihr k\u00f6nnen Sie Texte gekonnt in Szene setzen: In diesem Artikel erfahren Sie alles \u00fcber Schriftarten, Schriftgr\u00f6\u00dfen und Schriftmischungen.<\/p>\n<h2>Drei Regeln f\u00fcr Typografie<\/h2>\n<p>Der Musternutzer googelt nach einem bestimmten Begriff. Es werden ihm mehrere Vorschl\u00e4ge angezeigt und er klickt auf den zweiten Link. Nun erblickt er ein tolles Bild, das sein Interesse weckt &#8211; aber der Text. Er ist viel zu klein und der blaue Hintergrund macht das Lesen unm\u00f6glich. Daher verl\u00e4sst er die Website und entscheidet sich lieber f\u00fcr die Konkurrenz.<\/p>\n<ol>\n<li>Ein Text muss einladend wirken<\/li>\n<li>Inhalte und Schriften sollten sich erg\u00e4nzen<\/li>\n<li>Der Leser muss Informationen leicht aufnehmen k\u00f6nnen<\/li>\n<\/ol>\n<p>Um das zu erreichen, sollten Sie die folgenden Tipps umsetzen.<\/p>\n<h3>Schriftarten im Webdesign<\/h3>\n<p>Verwenden Sie 2 bis 4 verschiedene Schriftarten.<\/p>\n<p>Das Auge liest mit und es ist verwirrt, je mehr es &#8222;mitdenken&#8220; muss. Der Wechsel einer Schriftart (engl. Fonts) sollte immer klar definiert sein, wie etwa bei einem w\u00f6rtlichen Zitat. Bei Ratgebern ist es sinnvoll, bestimmte Fachbegriffe schriftlich hervorzuheben. Willk\u00fcrliche Schriftwechsel sind zu vermeiden.<\/p>\n<p>Anstatt die Schriftart unn\u00f6tig zu \u00e4ndern, k\u00f6nnen Sie einzelne Textbausteine kursiv, fett oder farblich markieren. F\u00fcr das Auge gestaltet sich solch ein Wechsel deutlich angenehmer.<\/p>\n<p>Tipp: Mehr Fonts sind nur bei bestimmten Textformen (Newsblog, Partyflyer) zu empfehlen.<\/p>\n<h3>Die Wahl der richtigen Schriftart<\/h3>\n<p>Im <a href=\"https:\/\/quantenfrosch.at\/webdesign\/\">Webdesign <\/a>sind diese Fonts h\u00e4ufig anzutreffen:<\/p>\n<ul>\n<li>Arial<\/li>\n<li>Comic Sans MS<\/li>\n<li>Courier New<\/li>\n<li>Georgia<\/li>\n<li>Times New Roman<\/li>\n<li>Trebuchet MS<\/li>\n<li>Verdana<\/li>\n<\/ul>\n<p>Alle <strong>Schriftarten haben ihren eigenen Charakter<\/strong>, nicht jede passt zur anderen. Einige Fonts sind \u00e4u\u00dferst eigenwillig. So scheidet Comic Sans h\u00e4ufig aus gestalterischen Gr\u00fcnden aus. Courier ist eine eigenwillige Schrift, die eher altmodisch wirkt:<\/p>\n<h5>#1. Courier<\/h5>\n<p>Diese Schrift wurde urspr\u00fcnglich f\u00fcr Schreibmaschinen verwendet. Alle Buchstaben sind gleich weit voneinander entfernt, weshalb sie zu den Monospace-Schriften geh\u00f6rt. Diese Tatsache verleiht ihr einen schwerf\u00e4lligen Eindruck. Sie sollte nur in Einzelf\u00e4llen eingesetzt werden, um etwa den Spruch eines alten Denkers zu unterstreichen.<\/p>\n<h5>#2. Georgia<\/h5>\n<p>Eine Alternative ist Georgia, die f\u00fcr Harmonie und klare Darstellungen steht. Gerade bei Blogs oder Zeitschriften erfreut sich diese Antiqua-Schriftart einer enormen Beliebtheit. Moderne Fonts wie Georgia sind proportionale Schriftarten, das hei\u00dft, die einzelnen Buchstaben haben unterschiedliche Entfernungen. Somit entf\u00e4llt der schwerf\u00e4llige Eindruck im Webdesign, den etwa Courier hat.<\/p>\n<h5>#3. Times<\/h5>\n<p>Der Font Times z\u00e4hlt zu den Antiqua-Schriften und hat Serifen &#8211; das sind kleine Striche an den Buchstabenenden. Ein Vorteil von Serifen besteht in der leichteren Lesbarkeit. Jedoch ist das eine Geschmacksfrage, da die Unterschiede minimal sind. Unabh\u00e4ngig davon wirkt Times seri\u00f6s und gediegen. Die Schrift eignet sich f\u00fcr Artikel in Zeitschriften und Zeitungen. F\u00fcr einen Blog ist sie ebenfalls zu empfehlen.<\/p>\n<h5>#4. Arial<\/h5>\n<p>Courier, Georgia und Times sind Serifenschriften. Anders sieht es bei Arial oder Verdana aus, die zu den Groteskschriften (auch Sans Serif) z\u00e4hlen. Die Atmosph\u00e4re wirkt etwas n\u00fcchtern, daf\u00fcr aber moderner als bei Times. F\u00fcr <a href=\"https:\/\/quantenfrosch.at\/woocommerce-shops-fuer-kleinunternehmen\/\">Onlineshops <\/a>ist sie eine gute Wahl oder generell f\u00fcr Bildunterschriften.<\/p>\n<p>Beachten Sie immer die Punktgr\u00f6\u00dfe des Textes:<\/p>\n<p><strong>Serifenschriften <\/strong>sind bei <strong>kleinen Gr\u00f6\u00dfen schlechter lesbar<\/strong>. Daher sollten Sie f\u00fcr kleine Textbausteine Schriften ohne Serifen verwenden. Arial oder Verdana sind gute Beispiele f\u00fcrs Webdesign. In der Regel gen\u00fcgt jeweils eine Schriftart f\u00fcr die \u00dcberschriften, f\u00fcr den Flie\u00dftext und f\u00fcr die Men\u00fcpunkte. Die Typografie sollte sich auf drei Gr\u00f6\u00dfen beschr\u00e4nken. Verzichten Sie auf \u00fcberaus kleine oder gro\u00dfe Textgr\u00f6\u00dfen, da ein zu kleiner Textabschnitt in manchen Browsern winzig erscheinen kann.<\/p>\n<p>Testen Sie einen Text in verschiedenen Browsern &#8211; mit unterschiedlichen Versionen!<\/p>\n<h4 style=\"text-align: left; margin-bottom: 20px;\">Kombination von Schriftarten<\/h4>\n<p>Die Schriften sollten sich weder zu \u00e4hnlich sehen, noch sich zu sehr voneinander unterscheiden. Altert\u00fcmliche oder statische Fonts passen eher weniger zu dynamischen und modernen Schriftarten.<\/p>\n<p>&#8222;Generell ist die Kombination einer Antiqua- mit einer Groteskschrift passend.&#8220;<\/p>\n<p>Einige Fonts fallen gr\u00f6\u00dfer aus als andere. Zudem sollten Sie die Gr\u00f6\u00dfe der Schriften auf Ihre Zielgruppe abstimmen. Ein Werbemittel f\u00fcr Senioren sieht sicherlich anders aus als der moderne Reiseblog eines 28-J\u00e4hrigen.<\/p>\n<p>G\u00e4ngige Fontgr\u00f6\u00dfen im Webdesign:<\/p>\n<ul>\n<li>6 bis 8 Pixel: Bildtexte und Hinweise<\/li>\n<li>10 bis 14 Pixel: Flie\u00dftexte<\/li>\n<li>15 Pixel aufw\u00e4rts: \u00dcberschriften<\/li>\n<\/ul>\n<p>F\u00fcr normale Artikel ist die Fontgr\u00f6\u00dfe 12 oder 13 zu empfehlen.<br \/>\nTipp: <strong>Kursive Schriften<\/strong> sind <strong>schwer lesbar<\/strong> und nicht leicht zu kombinieren. Muss es unbedingt kursiv sein, sollten Sie eine sehr gro\u00dfe Schriftgr\u00f6\u00dfe w\u00e4hlen.<\/p>\n<h6 style=\"margin-top: 30px;\">Fazit<\/h6>\n<p>Es existiert keine ultimative Schriftformel, da jedes Projekt individuell ist. Ein Onlineshop erfordert eine andere Typografie als der Versicherungsblog.<\/p>\n<p>Einige Grundregeln helfen Ihnen weiter:<\/p>\n<ol>\n<li>Was m\u00f6chten Sie mit Ihrer Website ausdr\u00fccken?<\/li>\n<li>Suchen Sie eine Schrift zu diesem Gedanken! (Finanzseiten ben\u00f6tigen andere Fonts als lustige Spa\u00dfblogs)<\/li>\n<li>W\u00e4hlen Sie zwei bis drei passende Schriftarten aus<\/li>\n<li>Wof\u00fcr sind die Fonts bestimmt? (Flie\u00dftexte, \u00dcberschriften)<\/li>\n<\/ol>\n<p>Wichtig ist, die Typografie einheitlich und \u00fcbersichtlich zu gestalten. Damit sich der Besucher auf Ihrer Website wohlf\u00fchlt und gerne wieder vorbeischaut.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typografie &#8211; was hat es mit diesem Begriff auf sich? Die meisten Website-Betreiber legen ihren Schwerpunkt auf Inhalte, weniger auf die grafische Aufbereitung. Mal hier, mal dort wird ein Bild<\/p>\n","protected":false},"author":6,"featured_media":134,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","rank_math_title":"Typografie f\u00fcrs Webdesign - Schriftarten f\u00fcr Ihre Website","rank_math_description":"Die Typografie hat einen gro\u00dfen Einfluss auf das Gesamterscheinungsbild einer Website. Erfahren Sie, was Sie bei der Schriftauswahl alles beachten sollten.","rank_math_focus_keyword":"typografie"},"categories":[10],"tags":[35],"class_list":["post-135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-design"],"_links":{"self":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":0,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media\/134"}],"wp:attachment":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}