{"id":7579,"date":"2025-07-12T09:18:35","date_gmt":"2025-07-12T09:18:35","guid":{"rendered":"https:\/\/wpt.nineblaess.de\/blog\/20-tipps-um-deine-typografie-skills-zu-verbessern\/"},"modified":"2026-03-29T21:06:15","modified_gmt":"2026-03-29T21:06:15","slug":"typografie-grundlagen-tipps","status":"publish","type":"post","link":"https:\/\/www.nineblaess.de\/de\/blog\/typografie-grundlagen-tipps\/","title":{"rendered":"22 Typografie-Tipps f\u00fcr Designer, die besser gestalten wollen als KI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7579\" class=\"elementor elementor-7579 elementor-1835\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17954c1 e-flex e-con-boxed e-con e-parent\" data-id=\"17954c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb4b99b elementor-widget elementor-widget-text-editor\" data-id=\"eb4b99b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Eine KI kann Pixel perfekt in ein Raster setzen. Sie sp\u00fcrt jedoch nicht, wenn ein Flattersatz nicht optimal gesetzt ist, und sie versteht auch nicht, warum eine Schriftart f\u00fcr eine Zielgruppe funktioniert und f\u00fcr eine andere nicht. Genau das ist dein Vorteil als Designer mit ge\u00fcbtem Auge.  <\/p><p>In diesem Artikel findest du 22 Typografie-Tipps, die \u00fcber die Grundlagen hinausgehen\u2014Details, die eine KI einfach (noch) nicht beherrscht.<\/p><p>Als selbstgelernte Designerin habe ich jahrelang an mir gezweifelt. Doch kaum etwas hat meine Arbeit so stark verbessert wie das Erlernen der Typografie. Hier sind also die Typografie-Tipps, die ich gerne fr\u00fcher gewusst h\u00e4tte.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c636833 elementor-widget elementor-widget-heading\" data-id=\"c636833\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">1. Ber\u00fccksichtige die Zielgruppe<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91b1837 elementor-widget elementor-widget-text-editor\" data-id=\"91b1837\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Eine Zielgruppenanalyse umfasst mehr als nur demografische Daten wie Alter und Wohnort. Tauche in die Welt der Zielgruppe ein. Was ist ihnen vertraut? Was signalisiert f\u00fcr sie Qualit\u00e4t und was funktioniert bei ihnen gar nicht?    <\/p><p>Eine Schrift, die in einem Kopenhagener Designstudio funktioniert, kann f\u00fcr ein Familienunternehmen im l\u00e4ndlichen Neuseeland v\u00f6llig ungeeignet sein. Eine KI kann zwar Daten analysieren, aber dieses kulturelle Gesp\u00fcr hat sie nicht. Du hingegen schon. <\/p><p>Frag dich also, bevor du startest:<\/p><ul><li>F\u00fcr wen mache ich das?<\/li><li>Was ist diesen Menschen wichtig?<\/li><li>Wie soll sich das Design f\u00fcr sie anf\u00fchlen?<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb33aa9 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"cb33aa9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>\u00dcberlege nicht nur, wer deine Zielgruppe ist, sondern auch, wem sie bereits vertraut. W\u00e4hle Schriftarten, die eine Verbindung zu dieser Welt herstellen. <\/p><p>Mehr dazu erf\u00e4hrst du in meinem Artikel, in dem ich erkl\u00e4re, warum es f\u00fcr Unternehmen und Marken so <a href=\"https:\/\/www.nineblaess.de\/de\/blog\/zielgruppe-zu-identifizieren\/\">wichtig ist, ihre Zielgruppe zu kennen<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66acd0a elementor-widget elementor-widget-heading\" data-id=\"66acd0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">2. Nutze professionell designte Schriftarten<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6f4074 elementor-widget elementor-widget-text-editor\" data-id=\"e6f4074\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Kostenlose Schriftarten k\u00f6nnen gut funktionieren, werden aber oft zu h\u00e4ufig benutzt. Professionelle Schriftarten bieten mehr Einzigartigkeit, eine gr\u00f6\u00dfere Auswahl an Schriftschnitten und -stilen sowie vollst\u00e4ndige Zeichens\u00e4tze. <\/p><p>Letzteres ist besonders wichtig, wenn du mit Sprachen wie Deutsch oder Te Reo M\u0101ori arbeitest\u2014wie ich, da beide Sonderzeichen wie \u201e\u00e4\u201d oder \u201e\u0101\u201d ben\u00f6tigen, die viele kostenlose Schriftarten nicht enthalten.<\/p><p>Auch variable Schriftarten sind einen Blick wert. Sie vereinen mehrere Schriftst\u00e4rken und Stile in einer einzigen Datei und machen Websites schneller. Wenn du aber nur eine oder zwei Schriftst\u00e4rken brauchst, k\u00f6nnen einzelne Dateien nach wie vor die bessere Wahl sein.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a4f2f0 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"4a4f2f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Wenn sich Design abheben soll, investiere in eine hochwertige Schriftart.<\/p><p>In diesem Artikel stelle ich dir die besten <a href=\"https:\/\/www.nineblaess.de\/de\/blog\/websites-schriftarten-fuer-marke-finden\/\">Websites vor, auf denen du Schriftarten<\/a> findest\u2014sowohl Open-Source- als auch kostenpflichtige. Viele Foundries haben Testversionen. Probiere sie unbedingt aus, bevor du dich festlegst. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e53db6 elementor-widget elementor-widget-heading\" data-id=\"3e53db6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">3. Nutze eine klare Hierarchie<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9225335 elementor-widget elementor-widget-text-editor\" data-id=\"9225335\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Jedes Design braucht eine klare Hierarchie, die den Blick lenkt. Die meisten Menschen \u00fcberfliegen eine Seite, bevor sie sie lesen. Wenn die Informationen nicht klar strukturiert sind, geht deine Botschaft unter. Und wenn Nutzer nicht schnell finden, was sie suchen, verlierst du sie.  <\/p><p>Gr\u00f6\u00dfe, Schriftst\u00e4rke, Farbe und Schriftstil helfen dabei, den Blick zu lenken.<\/p><p>Die <a href=\"http:\/\/mymind.com\/\" target=\"_blank\" rel=\"noopener\">MyMind-Website<\/a> macht das gut. Das Auge landet zuerst auf der \u00dcberschrift, dann auf dem Button und schlie\u00dflich auf der Navigation. Sogar die Kreisform leitet den Blick nat\u00fcrlich zur zentrierten \u00dcberschrift. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58fa50f elementor-widget elementor-widget-image\" data-id=\"58fa50f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2000\" height=\"1170\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Screenshot-MyMind.webp\" class=\"attachment-full size-full wp-image-10379\" alt=\"Screenshot der Startseite von MyMind. Die typografische Hierarchie ist hier ganz klar: Eine gro\u00dfe Serifenschrift dominiert als \u00dcberschrift, gefolgt von einer Unter\u00fcberschrift und den Navigationselementen.\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Screenshot-MyMind.webp 2000w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Screenshot-MyMind-300x176.webp 300w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Screenshot-MyMind-1024x599.webp 1024w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Screenshot-MyMind-768x449.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Screenshot-MyMind-1536x899.webp 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Screenshot der Startseite von MyMind. Die typografische Hierarchie ist hier ganz klar: Eine gro\u00dfe Serifenschrift dominiert als \u00dcberschrift, gefolgt von einer Unter\u00fcberschrift und den Navigationselementen. <\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a12136 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"9a12136\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Lege vor dem Designen fest, was als Erstes, Zweites und Drittes wahrgenommen werden soll und baue dein Layout dementsprechend auf. Es ist einer dieser einfachen Typografie-Tipps, die einen gro\u00dfen Unterschied beim fertigen Design ausmachen. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ece6926 elementor-widget elementor-widget-text-editor\" data-id=\"ece6926\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>4. Verwende Rastersysteme<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e5833d elementor-widget elementor-widget-text-editor\" data-id=\"3e5833d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Raster sorgen f\u00fcr Struktur. Sie ordnen Inhalte in Spalten und Zeilen an und sorgen daf\u00fcr, dass nichts fehl am Platz wirkt. <\/p><p>Es gibt verschiedene Arten von Rastern\u2014hier sind die wichtigsten:<\/p><ul><li>Manuskriptraster haben eine Haupttextspalte. Sie sind ideal f\u00fcr B\u00fccher und l\u00e4ngere Texte.<\/li><li>Spaltenraster haben mehrere Spalten und in der Standard f\u00fcr Websites und Magazine.<\/li><li>Modulare Raster kombinieren Spalten und Zeilen, was sie n\u00fctzlich f\u00fcr komplexe Layouts mit viel Inhalt macht.<\/li><li>Das Grundlinienraster wird oft mit anderen Rastern kombiniert. Es gibt dem Text einen einheitlichen vertikalen Rhythmus, sodass mehrspaltige Layouts koh\u00e4rent wirken\u2014und bei beidseitig bedruckten Seiten die Zeilen immer \u00fcbereinanderliegen.<\/li><li>Hierarchische Raster sind frei gestaltbar. Sie orientieren sich am Inhalt statt an festen Spalten und Zeilen.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a401d85 elementor-widget elementor-widget-image\" data-id=\"a401d85\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2000\" height=\"1424\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-menu-2-column-grid-and-baseline-grid-1.webp\" class=\"attachment-full size-full wp-image-10380\" alt=\"Eine zweiseitige Speisekarte f\u00fcr Hotel Post Gries mit eingeblendeten Rasterlinien als Beispiel f\u00fcr den Einsatz eines mehrspaltigen Rastersystems und eines Grundlinienrasters, um Inhalte in einem Layout einheitlich auszurichten.\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-menu-2-column-grid-and-baseline-grid-1.webp 2000w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-menu-2-column-grid-and-baseline-grid-1-300x214.webp 300w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-menu-2-column-grid-and-baseline-grid-1-1024x729.webp 1024w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-menu-2-column-grid-and-baseline-grid-1-768x547.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-menu-2-column-grid-and-baseline-grid-1-1536x1094.webp 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Typografie-Tipp 4 in der Praxis: Speisekarten-Layout, was ich f\u00fcr <a href=\"https:\/\/www.nineblaess.de\/work\/hotel-post-gries\/\" target=\"_blank\" rel=\"noopener\">Hotel Post Gries<\/a> designed habe mit Spalten- und Grundlinienraster.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b3cbdd elementor-widget elementor-widget-image\" data-id=\"1b3cbdd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2000\" height=\"1424\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-Menu-no-Grid.webp\" class=\"attachment-full size-full wp-image-10381\" alt=\"\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-Menu-no-Grid.webp 2000w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-Menu-no-Grid-300x214.webp 300w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-Menu-no-Grid-1024x729.webp 1024w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-Menu-no-Grid-768x547.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Bar-Menu-no-Grid-1536x1094.webp 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Das fertige Layout, sauber ausgerichtet ohne Rasterlinien.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91a10c8 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"91a10c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Wenn du dich zu stark an ein Raster h\u00e4ltst, wirkt dein Design schnell zu starr. Indem du einigen Elementen erlaubst, aus dem Raster auszubrechen, erzeugst du Spannung. Allerdings solltest du es nicht \u00fcbertreiben.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f441a2c elementor-widget elementor-widget-heading\" data-id=\"f441a2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">5. Verwende nicht zu viele Schriftarten &amp; paare sie harmonisch<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d6e1d4 elementor-widget elementor-widget-text-editor\" data-id=\"9d6e1d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Verwende nicht mehr als zwei bis drei Schriftarten, da dein Design sonst schnell un\u00fcbersichtlich wirken kann. Wenn du verschiedene Schriftarten kombinieren m\u00f6chtest, helfen dir diese Tipps:  <\/p><ul><li>Kombiniere keine zwei Schriften aus derselben Kategorie. W\u00e4hle beispielsweise eine Serifenschrift und eine serifenlose Schrift, um Kontrast zu erzeugen und zu vermeiden, dass die Schriften miteinander konkurrieren.<\/li><li>Achte auf die x-H\u00f6he. Schriftarten mit \u00e4hnlicher x-H\u00f6he wirken harmonischer zusammen. <\/li><li>Kombiniere Schriftarten mit \u00e4hnlichem Stresswinkel\u2014vertikal oder diagonal\u2014f\u00fcr ein Gef\u00fchl der Zusammengeh\u00f6rigkeit.<\/li><li>Erstelle eine Hierarchie durch unterschiedliche Schriftst\u00e4rken, bevor du mehr Schriftarten hinzuf\u00fcgst.<\/li><li>Schriftarten desselben Designers teilen oft \u00e4hnliche Grundproportionen und passen gut zusammen.<\/li><li>Viele Schriftfamilien enthalten schmale und breite Varianten (condensed &amp; extended). Kombiniere sie f\u00fcr Spannung innerhalb einer Familie. <\/li><li>Entscheide dich f\u00fcr eine dominante Schriftart f\u00fcr \u00dcberschriften und eine erg\u00e4nzende, gut lesbare f\u00fcr den Flie\u00dftext. Behandle nicht beide gleich. <\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fa12b1 elementor-widget elementor-widget-image\" data-id=\"0fa12b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1121\" height=\"2100\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Font-Pairing-Tips-for-designers-scaled.webp\" class=\"attachment-full size-full wp-image-10382\" alt=\"\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Font-Pairing-Tips-for-designers-scaled.webp 1121w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Font-Pairing-Tips-for-designers-160x300.webp 160w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Font-Pairing-Tips-for-designers-547x1024.webp 547w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Font-Pairing-Tips-for-designers-768x1439.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Font-Pairing-Tips-for-designers-820x1536.webp 820w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Font-Pairing-Tips-for-designers-1093x2048.webp 1093w\" sizes=\"(max-width: 1121px) 100vw, 1121px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Sechs Tipps zur Schriftkombination f\u00fcr Designer<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66e5b85 elementor-widget elementor-widget-heading\" data-id=\"66e5b85\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">6. Nutze Kontraste<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf84a88 elementor-widget elementor-widget-text-editor\" data-id=\"bf84a88\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Kontraste helfen dabei, eine Hierarchie herzustellen und dadurch eine bessere Lesbarkeit zu garantieren. Du kannst Gr\u00f6\u00dfe, Schriftst\u00e4rke, Farbe, Stil oder sogar Hintergr\u00fcnde nutzen, um Kontraste zu erzeugen\u2014wie es zum Beispiel <a href=\"https:\/\/jokolade.de\/\" target=\"_blank\" rel=\"noopener\">Jokolade<\/a> macht. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18f2c60 elementor-widget elementor-widget-image\" data-id=\"18f2c60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1200\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Jokolade-typography.webp\" class=\"attachment-full size-full wp-image-7358\" alt=\"Screenshot der Jokolade-Website: Schokoladenverpackung mit hellgelbem Zitronenelement, auf dem Text platziert ist, um die Typografie hervorzuheben.\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Jokolade-typography.webp 2048w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Jokolade-typography-300x176.webp 300w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Jokolade-typography-1024x600.webp 1024w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Jokolade-typography-768x450.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Jokolade-typography-1536x900.webp 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aee02ff elementor-widget elementor-widget-text-editor\" data-id=\"aee02ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Du siehst\u2014Kontrast kann auch durch Farben oder Formen hinter dem Text entstehen. Achte dabei aber immer darauf, dass Text und Hintergrund gut lesbar bleiben. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d4043a callout-box elementor-widget elementor-widget-text-editor\" data-id=\"1d4043a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Wenn du dir bei der Lesbarkeit unsicher bist, pr\u00fcfe das Kontrastverh\u00e4ltnis. Die WCAG empfiehlt f\u00fcr Flie\u00dftext ein Verh\u00e4ltnis von 4,5:1. Tools wie <a href=\"https:\/\/coolors.co\/?ref=66a6f513e58237000b0c792e\" target=\"_blank\" rel=\"noopener\">Coolors<\/a> k\u00f6nnen dir dabei helfen, dieses Verh\u00e4ltnis f\u00fcr deine Farben zu testen.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e43922d elementor-widget elementor-widget-heading\" data-id=\"e43922d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">7. Nutze Wei\u00dfraum<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6e149b elementor-widget elementor-widget-text-editor\" data-id=\"d6e149b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Als Designanf\u00e4nger untersch\u00e4tzen wir oft das Potenzial von Wei\u00dfraum. Dabei musst du nicht jeden Zentimeter deiner Fl\u00e4che mit Text oder Bildern f\u00fcllen. In den meisten F\u00e4llen gilt: Weniger ist mehr.  <\/p><p>Wei\u00dfraum l\u00e4sst dein Design atmen und verleiht ihm einen hochwertigeren Look. Au\u00dferdem leitet er die Aufmerksamkeit genau dorthin, wo du sie haben m\u00f6chtest. <\/p><p>Ein gutes Beispiel ist die Website von Aesop. Sie ist minimalistisch gestaltet und wirkt dadurch sehr hochwertig und sauber. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f521e76 elementor-widget elementor-widget-image\" data-id=\"f521e76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"583\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Asop-Website-typography-1024x746.webp\" class=\"attachment-large size-large wp-image-7359\" alt=\"Screenshot der Aesop-Website mit off-white Hintergrund und viel negativem Raum, der ein sauberes, minimalistisches Layout und eine klare Typografie zeigt.\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Asop-Website-typography-1024x746.webp 1024w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Asop-Website-typography-300x218.webp 300w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Asop-Website-typography-768x559.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Asop-Website-typography-1536x1118.webp 1536w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Asop-Website-typography.webp 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0db2b53 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"0db2b53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Manchmal ist es hilfreich, zun\u00e4chst alles auf das Wesentliche zu reduzieren und nur das zur\u00fcckzuholen, was der Botschaft wirklich dient.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8a71a1 elementor-widget elementor-widget-heading\" data-id=\"b8a71a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">8. Nutze die passende Textausrichtung<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbf84cc elementor-widget elementor-widget-text-editor\" data-id=\"cbf84cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die Ausrichtung des Textes beeinflusst nicht nur das gesamte Erscheinungsbild deines Designs, sondern auch die Lesbarkeit.<\/p><p>Linksb\u00fcndiger Text eignet sich am besten f\u00fcr Flie\u00dftext. Leser in Kulturen, die von links nach rechts lesen, beginnen so jede Zeile am selben Punkt, was das Auge weniger belastet. <\/p><p>Wenn du linksb\u00fcndigen Text verwendest, achte auf den Flattersatz, also den ungleichm\u00e4\u00dfigen vertikalen Rand auf der rechten Seite. Ein guter Flattersatz wirkt weich und organisch, nicht wie eine Treppe oder Kluft. Genau hier versagt KI noch. Sie bricht Zeilen einfach dort, wo sie auf den Containerrand treffen, ohne den visuellen Rhythmus zu ber\u00fccksichtigen.   <\/p><p>Zentrierter Text eignet sich f\u00fcr kurze Passagen wie Zitate oder \u00dcberschriften, ist bei l\u00e4ngeren Zeilen jedoch schwer zu lesen.<\/p><p>Blocksatz kann in gedruckter Form formell wirken, ist aber schwieriger perfekt umzusetzen. Auf dem Bildschirm entstehen in schmalen Spalten oft ungleichm\u00e4\u00dfige Wortabst\u00e4nde. Verwende Blocksatz daher nur, wenn deine Zeilenl\u00e4nge lang genug ist, um L\u00fccken zu vermeiden.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7dd343 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"e7dd343\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Aktiviere beim Blocksatz immer die Silbentrennung. So werden die Abst\u00e4nde gleichm\u00e4\u00dfiger verteilt und unsch\u00f6ne L\u00fccken verhindert. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2687a30 elementor-widget elementor-widget-heading\" data-id=\"2687a30\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">9. Vermeide reines Schwarz und Wei\u00df<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4cd19e9 elementor-widget elementor-widget-text-editor\" data-id=\"4cd19e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Auf Bildschirmen kann schwarzer Text auf wei\u00dfem Hintergrund f\u00fcr die Augen schnell erm\u00fcdend sein. In solchen F\u00e4llen ist es hilfreich, die Intensit\u00e4t etwas abzuschw\u00e4chen. Wenn du stattdessen Fast-Schwarz und ged\u00e4mpftes Wei\u00df nutzt, wird das von den wenigsten bewusst wahrgenommen, aber der Unterschied wird sp\u00fcrbar sein.  <\/p><p>Meine Website verwendet beispielsweise die Farben #080708 f\u00fcr Schwarz und #F5F5F5 f\u00fcr Wei\u00df, was das Lesen viel angenehmer macht.<\/p><p>Das gleiche gilt \u00fcbrigens auch f\u00fcr den Dunkelmodus. Wei\u00dfer Text auf schwarzem Hintergrund kann sehr intensiv wirken. Angenehmer ist cremefarbener Text auf Dunkelgrau.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b1442a callout-box elementor-widget elementor-widget-text-editor\" data-id=\"0b1442a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Du kannst auch einen Hintergrund in einer dezenten Variante deiner Markenfarbe verwenden. Das schafft einen subtilen Markenbezug. <\/p><p>In diesem Kontext gef\u00e4llt dir vielleicht auch mein Artikel dar\u00fcber, <a href=\"https:\/\/www.nineblaess.de\/de\/blog\/was-macht-eine-marke-wiedererkennbar\/\">was Marken wiedererkennbar macht<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22e5612 elementor-widget elementor-widget-heading\" data-id=\"22e5612\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">10. Richte Textelemente optisch aus, nicht mathematisch<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7918f6 elementor-widget elementor-widget-text-editor\" data-id=\"b7918f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Etwas kann mathematisch zentriert sein und dennoch falsch aussehen. Bestimmte Buchstabenformen, wie beispielsweise A, V oder T, haben auf einer Seite mehr \u201eFreiraum\u201d und wirken dadurch auf einem Hintergrund, wie zum Beispiel einem Button, nicht zentriert, auch wenn sie es nicht sind. <\/p><p>Schriftdesigner wissen das und bauen deshalb kleine optische Korrekturen in ihre Schriften ein. Genau das solltest du auch tun, wenn du beispielsweise Text in Buttons setzt. <\/p><p>Ein guter Ansatz ist es, Text zun\u00e4chst mathematisch auszurichten und dann nach Gef\u00fchl nachzujustieren. Wenn etwas nicht stimmig aussieht, vertraue deinem Instinkt. Meistens ist es dann auch so. <\/p><p>\u00dcbrigens kann KI eine solche optische Ausrichtung nicht vornehmen. Sie arbeitet mit Rahmen, also den \u00e4u\u00dfersten R\u00e4ndern einer Form, und richtet rein mathematisch aus. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2679c71 elementor-widget elementor-widget-image\" data-id=\"2679c71\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"328\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Optical-vs-mathematical-alignment-1024x420.webp\" class=\"attachment-large size-large wp-image-10383\" alt=\"\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Optical-vs-mathematical-alignment-1024x420.webp 1024w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Optical-vs-mathematical-alignment-300x123.webp 300w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Optical-vs-mathematical-alignment-768x315.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Optical-vs-mathematical-alignment.webp 1401w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Der gleich Buchstabe zweimal zentriert\u2014links mathematisch und rechts optisch ausgerichtet.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-025e10b callout-box elementor-widget elementor-widget-text-editor\" data-id=\"025e10b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Je mehr du \u00fcbst, desto besser wird dein Blick daf\u00fcr. <\/p><p>Wenn du Schwierigkeiten hast, die ungleichen Abst\u00e4nde zu erkennen, weil dein Gehirn damit besch\u00e4ftigt ist, das Wort zu lesen, drehe dein Design einfach auf den Kopf. Dein Gehirn sieht die Buchstaben dann als Formen und visuelles Gewicht, was sie leichter ausrichten l\u00e4sst.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77e21c1 elementor-widget elementor-widget-heading\" data-id=\"77e21c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">11. Verwende eine typografische Skala<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-840acb9 elementor-widget elementor-widget-text-editor\" data-id=\"840acb9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Eine typografische Skala sorgt daf\u00fcr, dass die Gr\u00f6\u00dfen von \u00dcberschriften und Flie\u00dftext aufeinander abgestimmt sind, sodass alles zusammenpasst und nicht willk\u00fcrlich wirkt. Das Prinzip ist, dass sich jede Gr\u00f6\u00dfe aus der vorherigen ergibt, indem diese mit einem festen Verh\u00e4ltnis multipliziert wird. <\/p><p>Beginne immer mit der Gr\u00f6\u00dfe des Flie\u00dftextes und leite die Gr\u00f6\u00dfen der \u00dcberschriften daraus ab. Ist dein Flie\u00dftext zum Beispiel 16 px gro\u00df und du verwendest den Goldenen Schnitt (1,618), ergibt das die n\u00e4chste Gr\u00f6\u00dfe: 16 \u00d7 1,618 = ca. 26 px. So entstehen Gr\u00f6\u00dfen, die sich harmonisch anf\u00fchlen. <\/p><p><a href=\"http:\/\/typescale.com\/\" target=\"_blank\" rel=\"noopener\">Typescale.com<\/a> nimmt dir die Berechnung ab. Passe die finalen Gr\u00f6\u00dfen aber immer mit dem Auge an. Was im Tool stimmt, kann im echten Layout trotzdem falsch wirken.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59e6c62 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"59e6c62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Eine typografische Skala erleichtert auch Entwicklern die Arbeit, denn ein durchdachtes System mit einheitlichen Gr\u00f6\u00dfen wird einmal gebaut und kann dann \u00fcberall verwendet werden.<\/p><p>Im Webdesign verwende ich gerne die CSS-Funktion \u201eclamp()\u201d, um \u201eFluid Type\u201d zu erstellen, die zwischen Mobil- und Desktop-Ansichten automatisch skaliert.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fbe5db elementor-widget elementor-widget-heading\" data-id=\"1fbe5db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">12. Nutze optische Schriftschnitte (Display- vs. Textschriften)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef9dc48 elementor-widget elementor-widget-text-editor\" data-id=\"ef9dc48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Bei der Typografie geht es nicht darum, eine Schrift einfach gr\u00f6\u00dfer oder kleiner zu ziehen. Einige hochwertige Schriftfamilien wie die von Klim oder Pangram Pangram bieten optische Schriftschnitte, die speziell f\u00fcr verschiedene Gr\u00f6\u00dfen entwickelt wurden. <\/p><p>Display- oder Headline-Schriften sind f\u00fcr 24 px und gr\u00f6\u00dfer konzipiert. Sie haben engere Laufweiten und feine Haarlinien, die in gro\u00dfen Gr\u00f6\u00dfen besonders elegant wirken. <\/p><p>Textschriften sind f\u00fcr Flie\u00dftext gemacht. Sie haben breitere \u00d6ffnungen\u2014die Aussparungen in Buchstaben wie \u201ee\u201c oder \u201ec\u201c\u2014und kr\u00e4ftigere Striche, die die Lesbarkeit bei kleinen Gr\u00f6\u00dfen sicherstellen. <\/p><p>Die meisten KI-Tools und einfachen Generatoren skalieren Textschriften einfach hoch oder runter. Und das sieht man. Die Schriften wirken klobig und unleserlich.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98806b8 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"98806b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Pr\u00fcfe, ob deine Schriftfamilie Schnitte mit Namen wie \u201eDisplay\u201c, \u201eHeadline\u201c, \u201eBanner\u201c oder \u201ePoster\u201c enth\u00e4lt. Diese sind f\u00fcr gro\u00dfe Gr\u00f6\u00dfen gemacht. F\u00fcr kleinen Text verwendest du besser die Varianten \u201eText\u201c oder \u201eBody\u201c.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed7ca76 elementor-widget elementor-widget-heading\" data-id=\"ed7ca76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">13. Achte auf den richtigen Zeilenabstand<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2152795 elementor-widget elementor-widget-text-editor\" data-id=\"2152795\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Der Zeilenabstand ist der Abstand zwischen den Textzeilen. Wenn er nicht stimmt, leidet die Lesbarkeit sofort. Zeilen, die zu dicht beieinander stehen, verschwimmen ineinander und Zeilen, die zu weit auseinander liegen, wirken un\u00fcbersichtlich und verlieren den Zusammenhang.  <\/p><p>Ein guter Ausgangspunkt ist meist das 1,2-fache der Schriftgr\u00f6\u00dfe f\u00fcr \u00dcberschriften und das 1,5-fache f\u00fcr Flie\u00dftext. Passe den Wert dann je nach Schriftart und Zeilenl\u00e4nge an. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2abc04 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"c2abc04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Meistens musst du den Zeilenabstand im Webdesign auf die verschiedenen Bildschirmgr\u00f6\u00dfen anpassen. Was auf dem Desktop gut aussieht, kann auf Mobilger\u00e4ten manchmal zu eng wirken, vor allem, wenn die Zeilenl\u00e4nge hier geringer ist. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8372fc9 elementor-widget elementor-widget-heading\" data-id=\"8372fc9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">14. Achte auf die Zeilenl\u00e4nge<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3962752 elementor-widget elementor-widget-text-editor\" data-id=\"3962752\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die Zeilenl\u00e4nge hat einen gr\u00f6\u00dferen Einfluss auf die Lesbarkeit, als den meisten bewusst ist. Lange Zeilen erschweren es, den Anschluss zur n\u00e4chsten Zeile zu finden. Zu kurze Zeilen st\u00f6ren hingegen den Lesefluss. <\/p><p>F\u00fcr Flie\u00dftext ist eine gute Faustregel 45 bis 75 Zeichen pro Zeile, wobei sich bei einspaltigen Layouts etwa 65 Zeichen als ideal erweisen.<\/p><p>Auf breiten Bildschirmen sollte die Textspalte daher schmaler gehalten werden, statt sie \u00fcber das gesamte Layout zu strecken.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09393e8 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"09393e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Auf Mobilger\u00e4ten funktionieren k\u00fcrzere Zeilenl\u00e4ngen\u2014etwa 40 bis 50 Zeichen\u2014aufgrund des schmaleren Bildschirms besser.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5ad2d3 elementor-widget elementor-widget-heading\" data-id=\"c5ad2d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">15. Verwende Lead-Paragraphen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1802081 elementor-widget elementor-widget-text-editor\" data-id=\"1802081\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ein Lead-Paragraph ist eine kurze Einleitung, die sich optisch vom restlichen Flie\u00dftext abhebt. Dies kann beispielsweise durch eine gr\u00f6\u00dfere Schriftgr\u00f6\u00dfe, eine andere Schriftst\u00e4rke, einen anderen Stil oder eine Initiale geschehen. Er erleichtert den Einstieg, bevor sich der Leser auf den gesamten Text einl\u00e4sst. <\/p><p>Lead-Paragraphen sind hilfreich, um lange Texte aufzulockern. In Brosch\u00fcren oder auf Websites kann nicht alles gleich wichtig sein. Ein anders gesetzter Absatz signalisiert, was Priorit\u00e4t hat, und verleiht dem Layout mehr Struktur. Au\u00dferdem werden Online-Artikel oft geteilt, ohne dass sie vollst\u00e4ndig gelesen wurden. Ein starker Lead-Paragraph kann dabei helfen.   <\/p><p>Um zu sehen, wie ein solcher Lead-Paragraph in der Praxis aussieht, scrolle einfach noch einmal etwas hoch. Auf meiner Website ist der erste Absatz jedes Artikels gr\u00f6\u00dfer gesetzt. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fef527 elementor-widget elementor-widget-heading\" data-id=\"6fef527\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">16. Verwende f\u00fcr Flie\u00dftext Schriften mit geringem Strichkontrast<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e3f31d elementor-widget elementor-widget-text-editor\" data-id=\"8e3f31d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Schriften mit hohem Strichkontrast, wie Bodoni, sehen in gro\u00dfen Gr\u00f6\u00dfen fantastisch aus. Bei kleinen Gr\u00f6\u00dfen verschwinden die feinen Haarlinien allerdings, und der Text wird schwer lesbar. <\/p><p>F\u00fcr Flie\u00dftext sind Schriften mit gleichm\u00e4\u00dfigen Strichst\u00e4rken und wenig Kontrast immer die bessere Wahl. Sie erm\u00fcden das Auge weniger und bleiben auch bei kleinen Gr\u00f6\u00dfen gut lesbar. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d1aedd elementor-widget elementor-widget-heading\" data-id=\"2d1aedd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">17. Achte auf die x-H\u00f6he<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5cbbcb elementor-widget elementor-widget-text-editor\" data-id=\"a5cbbcb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die x-H\u00f6he bezeichnet die H\u00f6he der Kleinbuchstaben einer Schrift.<\/p><p>Schriften mit einer gr\u00f6\u00dferen x-H\u00f6he sind bei kleinen Gr\u00f6\u00dfen in der Regel leichter zu lesen, weil die Buchstaben besser hervortreten.<\/p><p>Wenn die x-H\u00f6he allerdings zu gro\u00df ist, verlieren die W\u00f6rter ihre typische Form. Das ist ein Problem, weil wir Texte nicht Buchstabe f\u00fcr Buchstabe lesen, sondern W\u00f6rter meist als Ganzes anhand ihrer Form erfassen. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7099967 elementor-widget elementor-widget-heading\" data-id=\"7099967\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">18. Verwende f\u00fcr Hervorhebungen Kursivschrift statt Fettdruck<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e28ee7 elementor-widget elementor-widget-text-editor\" data-id=\"3e28ee7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ich bin immer etwas <strong>irritiert<\/strong>, wenn ich einen Satz <strong>voller fetter W\u00f6rter sehe<\/strong>. Das st\u00f6rt den Lesefluss und l\u00e4sst das Auge unkontrolliert <strong>\u00fcber die Seite springen.<\/strong><\/p><p>Kursivschrift ist eine subtilere Art, etwas hervorzuheben. Die Botschaft kommt an, ohne den Rest zu dominieren. <\/p><p>Das hei\u00dft aber nicht, dass fett gedruckte W\u00f6rter immer unpassend sind. Am Anfang eines Aufz\u00e4hlungspunkts zum Beispiel ist es sinnvoll. Hier hilft es dabei, den Text schneller zu \u00fcberfliegen. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38d80a4 elementor-widget elementor-widget-heading\" data-id=\"38d80a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">19. Vermeide Witwen und Waisen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-020ca83 elementor-widget elementor-widget-text-editor\" data-id=\"020ca83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Eine Witwe ist ein einzelnes Wort, das allein in der letzten Zeile eines Absatzes steht. Eine Waise ist eine einzelne Zeile am Anfang einer neuen Spalte oder Seite. Beide wirken unfertig und zeigen sofort, ob jemand sich mit Typografie auskennt, oder nicht.  <\/p><p>Im Druck l\u00e4sst sich das durch angepasste Zeilenumbr\u00fcche oder kleine Text\u00e4nderungen beheben. Im Web ist es kniffliger, da sich Text auf verschiedenen Bildschirmgr\u00f6\u00dfen unterschiedlich verh\u00e4lt. Man kann den Satz leicht umformulieren, aber eine Garantie hat man nie. Manchmal muss man es einfach akzeptieren.   <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2001a0 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"e2001a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Es gibt tats\u00e4chlich auch CSS-Eigenschaften, um Witwen (widows) und Waisen (orphans) zu verhindern, aber die Browserunterst\u00fctzung ist nicht \u00fcberall gleich. Verlass dich also nicht zu sehr darauf.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9daa00 elementor-widget elementor-widget-heading\" data-id=\"e9daa00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">20. Achte auf das Kerning<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6597061 elementor-widget elementor-widget-text-editor\" data-id=\"6597061\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Kerning ist der Abstand zwischen einzelnen Buchstabenpaaren. Schon ein kleiner Fehler hier kann ein Design unprofessionell wirken lassen, auch wenn alles andere stimmt. Sicherlich nehmen die meisten Leute es nicht bewusst wahr, aber sie merken, dass es irgendwie unprofessionell aussieht\u2014besonders bei Logos und gro\u00dfen \u00dcberschriften.  <\/p><p>Die meisten Design-Tools regeln Kerning automatisch. Allerdings k\u00f6nnen sie nur mit dem arbeiten, was die Schriftart bereitstellt. Kostenlose Schriftarten haben oft unvollst\u00e4ndige Kerning-Tabellen. Das spricht wiederum f\u00fcr eine Investition in professionelle Schriftarten. <\/p><p>Wie dem auch sei, \u00fcberpr\u00fcfe \u00dcberschriften und Logos trotzdem immer manuell. Je gr\u00f6\u00dfer die Schrift, desto auff\u00e4lliger wird schlechtes Kerning. <\/p><p>KI kernt \u00fcbrigens nicht automatisch. Selbst bei professionellen Schriftarten entstehen bei bestimmten Paaren wie Va, Ty, Wa oder Ly optische L\u00fccken. KI kann diesen Abstand nicht \u201esehen\u201c, denn sie kennt nur die Koordinaten des Begrenzungsrahmens.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9633a08 callout-box elementor-widget elementor-widget-text-editor\" data-id=\"9633a08\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>Wenn du dein Auge trainieren willst, ist dieses <a href=\"http:\/\/type.method.ac\" target=\"_blank\" rel=\"noopener\">Kerning-Spiel<\/a> eine gute \u00dcbung. Wenn du dir hierf\u00fcr f\u00fcnf Minuten Zeit nimmst, siehst du schlechtes Kerning danach \u00fcberall. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df88398 elementor-widget elementor-widget-heading\" data-id=\"df88398\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">21. Verwende OpenType-Funktionen und Glyphen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65b6373 elementor-widget elementor-widget-text-editor\" data-id=\"65b6373\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die meisten professionellen Schriftarten verf\u00fcgen \u00fcber Funktionen, die viele Designer nie verwenden. OpenType-Funktionen sind das Geheimnis, das deinen Textsatz richtig professionell aussehen l\u00e4sst.<\/p><p>Je nach Schriftart hast du Zugriff auf:<\/p><ul><li><strong>Ligaturen:<\/strong> Sie verbinden zwei Buchstaben zu einem Zeichen, wie fi oder fl, f\u00fcr sauberere Abst\u00e4nde und ein professionelleres Erscheinungsbild.<\/li><li><strong>Kapit\u00e4lchen:<\/strong> Das sind Gro\u00dfbuchstabenformen in der H\u00f6he von Kleinbuchstaben. Sie sind praktisch f\u00fcr \u00dcberschriften oder Abk\u00fcrzungen, die nicht zu dominant sein sollen.<\/li><li><strong>Stilistische Alternativen:<\/strong> Sie bieten verschiedene Versionen bestimmter Buchstaben f\u00fcr eine leicht andere Wirkung\u2014zum Beispiel das einst\u00f6ckige vs. zweist\u00f6ckige a.<\/li><li><strong>Schw\u00fcnge:<\/strong> Sie f\u00fcgen bestimmten Zeichen dekorative Verzierungen hinzu, was Schrift in gro\u00dfen Gr\u00f6\u00dfen interessanter macht.<\/li><li><strong>Medi\u00e4valziffern:<\/strong> Sie sitzen auf der Grundlinie wie Kleinbuchstaben und f\u00fcgen sich harmonischer in Flie\u00dftext ein.<\/li><li><strong>Kontextuelle Alternativen:<\/strong> Sie passen sich automatisch an die umliegenden Zeichen an, um bessere Abst\u00e4nde und einen fl\u00fcssigeren Satz zu schaffen.<\/li><li><strong>Br\u00fcche:<\/strong> Sie liefern korrekte Zeichen wie \u00bc statt des unsch\u00f6nen 1\/4.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-765e94f callout-box elementor-widget elementor-widget-text-editor\" data-id=\"765e94f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Design-Tipp<\/h4><p>In Illustrator und InDesign findest du \u201eOpenType\u201c und \u201eGlyphen\u201c unter deinen Werkzeugen. Es lohnt sich, ein paar Minuten damit zu verbringen, um zu sehen, was deine Schriftarten alles enthalten. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60ce7c0 elementor-widget elementor-widget-heading\" data-id=\"60ce7c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">22. Achte auf korrekte Interpunktion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5c9cd2 elementor-widget elementor-widget-text-editor\" data-id=\"d5c9cd2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die Interpunktion geh\u00f6rt auch zur Typografie. Wenn sie nicht stimmt, dann st\u00f6rt das den Lesefluss und sieht unprofessionell aus\u2014selbst wenn viele das Problem sicher nicht konkret benennen k\u00f6nnten. <\/p><p>Falsche Interpunktion ist auch ein ganz klares Zeichen f\u00fcr KI-generierte oder unprofessionelle Textlayouts. Algorithmen verwenden standardm\u00e4\u00dfig gerade Anf\u00fchrungszeichen und Fu\u00dfzeichen, weil sie den Kontext des Satzes nicht verstehen. <\/p><p>Hier eine kurze \u00dcbersicht der korrekten Zeichen:<\/p><ul><li><strong>Bindestrich (-):<\/strong> verbindet W\u00f6rter oder trennt sie am Zeilenende<\/li><li><strong>Gedankenstrich (\u2013):<\/strong> f\u00fcr Zahlenbereiche (Seiten 10\u201320) und verwandte Begriffe<\/li><li><strong>Langer Gedankenstrich (\u2014):<\/strong> markiert einen Gedankenbruch oder setzt einen Einschub ab\u2014so wie hier<\/li><li><strong>Mittelpunkt (\u00b7):<\/strong> eine subtile Alternative zu Aufz\u00e4hlungspunkten, wenn du Textelemente voneinander trennen m\u00f6chtest<\/li><li><strong>Typografische Anf\u00fchrungszeichen (\u201e &#8222;):<\/strong> im Deutschen sind sie unten und oben (66 99), nicht die geraden Zollzeichen<\/li><li><strong>Apostroph (\u2019):<\/strong> das geschwungene Zeichen f\u00fcr Auslassungen, nicht das gerade Fu\u00dfzeichen<\/li><li><strong>Auslassungspunkte (\u2026):<\/strong> ein gesondertes Zeichen, nicht drei einzeln getippte Punkte<\/li><li><strong>Korrekte Sonderzeichen (\u00a9 \u00ae \u00b0C \u2122):<\/strong> immer das richtige Zeichen verwenden, nicht (c) oder \u00e4hnliche Varianten<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee224b4 elementor-widget elementor-widget-image\" data-id=\"ee224b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1401\" height=\"1684\" src=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Punctuation-tips.webp\" class=\"attachment-full size-full wp-image-10384\" alt=\"Eine Typografie-\u00dcbersicht mit dem Titel \u201eInterpunktion-Tipps&quot; zeigt den Unterschied zwischen Standard-Tastaturzeichen und professionellem Textsatz. Mit Vergleichen f\u00fcr Bindestriche, Gedankenstriche, Mittelpunkte zur Trennung, gerade vs. typografische Anf\u00fchrungszeichen und das korrekte Auslassungszeichen.\" srcset=\"https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Punctuation-tips.webp 1401w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Punctuation-tips-250x300.webp 250w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Punctuation-tips-852x1024.webp 852w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Punctuation-tips-768x923.webp 768w, https:\/\/www.nineblaess.de\/wp-content\/uploads\/2025\/07\/Punctuation-tips-1278x1536.webp 1278w\" sizes=\"(max-width: 1401px) 100vw, 1401px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Vergleich von Tastatur-Standardzeichen und professioneller Interpunktion\u2014die Feinheiten, die KI-Tools \u00fcbersehen<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb04f39 elementor-widget elementor-widget-heading\" data-id=\"bb04f39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Bonus-Tipp: Trainiere diese Typografie-Tipps regelm\u00e4\u00dfig<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d027435 elementor-widget elementor-widget-text-editor\" data-id=\"d027435\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>KI kann zwar Designs generieren, aber gerade bei den kleinen Details, wie den Feinheiten der Typografie, hapert es noch. Es braucht ein geschultes Auge, um zu erkennen, wenn der Zeilenabstand nicht stimmt, wenn eine Schriftart die falsche Botschaft vermittelt oder wenn etwas f\u00fcr die Zielgruppe einfach nicht funktioniert. <\/p><p>Letztlich geht es bei der Typografie darum, ein System zu schaffen, das so intuitiv ist, dass die Nutzer gar nicht merken, dass sie gelenkt werden\u2014und ich hoffe, dabei helfen dir diese Typografie-Tipps. <\/p><p>Wenn du als Designer mit KI erfolgreich sein willst, musst du also als Art Director arbeiten k\u00f6nnen.<\/p><p>Es ist fast genauso wichtig, diese Regeln zu kennen wie zu wissen, wann man sie brechen darf. KI befolgt sie jedes Mal perfekt. Aber genau da liegt deine Chance, denn was ein Design menschlich und spannend macht, ist oft genau das, was uns \u00fcberrascht.   <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50de89f elementor-widget elementor-widget-text-editor\" data-id=\"50de89f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Typografie-Ressourcen<\/h3><div>Wenn du deine Design-Skills weiter verbessern m\u00f6chtest, findest du hier einige n\u00fctzliche Tipps und Ressourcen zum Thema Typografie.<\/div><ul><li>Zahlreiche <a href=\"https:\/\/www.typewolf.com\/typography-books\" target=\"_blank\" rel=\"noopener\">B\u00fccher<\/a> und Kurse bieten eine ausgezeichnete M\u00f6glichkeit, tiefer in das Thema einzutauchen.<\/li><li>Ebenfalls gut ist <a href=\"https:\/\/www.typewolf.com\/checklist\" target=\"_blank\" rel=\"noopener\">The Flawless Typography Checklist<\/a> von Typewolf, das Erkenntnisse und Expertise aus verschiedenen Quellen zusammenfasst.<\/li><li>Hier sind die <a href=\"https:\/\/www.nineblaess.de\/de\/blog\/websites-schriftarten-fuer-marke-finden\/\">25 besten Websites, um Schriftarten zu finden.<\/a><\/li><li>Und schlie\u00dflich: \u00dcben, \u00fcben, \u00fcben! Dieser Artikel stellt <a href=\"https:\/\/elements.envato.com\/learn\/font-trends\" target=\"_blank\" rel=\"noopener\">acht aktuelle Schrifttrends<\/a> vor, die dich inspirieren k\u00f6nnten. <\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc47a9f elementor-widget elementor-widget-text-editor\" data-id=\"bc47a9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Und was jetzt?<\/h3><ul><li>Wenn du deine Arbeiten professionell pr\u00e4sentieren m\u00f6chtest, schau dir meine Auswahl der <a href=\"https:\/\/www.nineblaess.de\/de\/blog\/premium-mockups-fuer-designer\/\">besten Premium-Mockup-Websites<\/a> an\u2014inklusive einiger Rabattcodes.<\/li><li>Wenn du auch die fotografische Qualit\u00e4t deiner Entw\u00fcrfe verbessern m\u00f6chtest, ist mein Artikel mit den besten <a href=\"https:\/\/www.nineblaess.de\/de\/blog\/authentische-stockfotos-fur-marken\/\">Stockfoto-Websites<\/a> vielleicht hilfreich.<\/li><li>Und wenn du deine Skills \u00fcber Typografie hinaus weiter ausbauen m\u00f6chtest, habe ich hier die besten <a href=\"https:\/\/www.nineblaess.de\/de\/blog\/branding-ressourcen\/\">Ressourcen zum Thema Branding<\/a> zusammengestellt\u2014mit B\u00fcchern, Tools und anderen Ressourcen, die man immer griffbereit haben sollte.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Eine KI kann Pixel perfekt in ein Raster setzen. Sie sp\u00fcrt jedoch nicht, wenn ein Flattersatz nicht optimal gesetzt ist, und sie versteht auch nicht, warum eine Schriftart f\u00fcr eine Zielgruppe funktioniert und f\u00fcr eine andere nicht. Genau das ist dein Vorteil als Designer mit ge\u00fcbtem Auge. In diesem Artikel findest du 22 Typografie-Tipps, die [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7570,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[34,35],"class_list":["post-7579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-branding","tag-ressourcen","tag-visuelles-branding"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/posts\/7579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/comments?post=7579"}],"version-history":[{"count":0,"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/posts\/7579\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/media\/7570"}],"wp:attachment":[{"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/media?parent=7579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/categories?post=7579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nineblaess.de\/de\/wp-json\/wp\/v2\/tags?post=7579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}