{"id":15168,"date":"2023-04-15T22:34:25","date_gmt":"2023-04-15T19:34:25","guid":{"rendered":"https:\/\/typetype.org\/de\/?p=15168"},"modified":"2026-02-05T08:52:08","modified_gmt":"2026-02-05T05:52:08","slug":"web-fonts-how-to-choose-and-use-fonts-on-a-website","status":"publish","type":"post","link":"https:\/\/typetype.org\/de\/blog\/web-fonts-how-to-choose-and-use-fonts-on-a-website\/","title":{"rendered":"Web-Schriften: wie man Schriftarten auf einer Website ausw\u00e4hlt und verwendet"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_1-1.gif\" alt=\"\" class=\"wp-image-10000048429\"\/><\/figure>\n\n\n\n<p>F\u00fcr einen unerfahrenen Designer k\u00f6nnen Web-Schriften kompliziert und sogar einsch\u00fcchternd wirken. Aber das ist kein Grund zur Verzweiflung, denn mit der Zeit werden Sie mit den richtigen Informationen zum Profi! <\/p>\n\n\n\n<p>Au\u00dferdem ist Webdesign heute einer der interessantesten Bereiche. Von jungen Start-ups bis hin zu&nbsp;Unternehmen mit einer langen Geschichte m\u00f6chte jede Marke eine Website und vielleicht sogar eine App haben. Die Schriftarten, die f\u00fcr die Website und die Anwendung ausgew\u00e4hlt werden, werden Teil der Unternehmensidentit\u00e4t. <\/p>\n\n\n\n<p>Da&nbsp;Web-Schriften immer h\u00e4ufiger f\u00fcr die Gestaltung von Websites und Anwendungen gew\u00e4hlt werden, werden wir heute dar\u00fcber sprechen. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Web-Schriften <\/h2>\n\n\n\n<p>Auf den von Ihnen verwendeten Ger\u00e4ten (Laptop, Smartphone, Tablet) sind Systemschriftarten vorinstalliert. Die meisten Websites und Anwendungen verwenden Schriftarten, die auf einen Webserver hochgeladen wurden. Dies sind Web-Schriften. <\/p>\n\n\n\n<p>Web-Schriften sind so&nbsp;konzipiert, dass sie auf allen Ger\u00e4ten, Betriebssystemen und Browsern gut dargestellt werden. Im&nbsp;Idealfall werden sie identisch angezeigt, wie vom Designer beabsichtigt. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_2-1.gif\" alt=\"\" class=\"wp-image-10000048430\"\/><\/figure>\n\n\n\n<p>Das Problem besteht darin, dass ein und dieselbe Website von Tausenden von Nutzern auf v\u00f6llig unterschiedlichen Ger\u00e4ten betrachtet wird, von einem hochmodernen Smartphone mit neuer Software bis hin zu&nbsp;einem dickb\u00e4uchigen Computermonitor, dessen Betriebssystem \u00e4lter ist als die meisten sozialen Netzwerke. <\/p>\n\n\n\n<p>Wie Sie sich vielleicht denken k\u00f6nnen, kann die Schrift aufgrund technischer Gegebenheiten nicht f\u00fcr alle Benutzer gleich aussehen. Die Aufgabe des Designers besteht also darin, so&nbsp;viele Nuancen wie m\u00f6glich zu&nbsp;ber\u00fccksichtigen, damit die Schrift f\u00fcr die Mehrheit der Nutzer korrekt angezeigt wird. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sichere oder Standard-Web-Schriften <\/h2>\n\n\n\n<p>Sichere Web-Schriften sind Schriftarten, die alle Arten von Betriebssystemen und Browsern unterst\u00fctzen. Kein Font ist absolut sicher. <\/p>\n\n\n\n<p>Sichere Schriftarten werden oft als Standardschriftarten bezeichnet, da&nbsp;sie auf vielen Ger\u00e4ten vorinstalliert sind. Aus diesem Grund stehen sie den meisten Benutzern zur Verf\u00fcgung. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_3-1.gif\" alt=\"\" class=\"wp-image-10000048431\"\/><\/figure>\n\n\n\n<p>Im&nbsp;Internet gibt es&nbsp;eine Liste von sicheren Web-Schriften, die bekannte Schriften sind. Genau hier liegt das Problem f\u00fcr den Designer bei der Verwendung solcher Schriften. Diese Schriften wurden so&nbsp;oft verwendet, dass sie f\u00fcr den Benutzer banal und langweilig werden. Es&nbsp;ist schwierig, mit ihnen den Charakter der Marke zu&nbsp;unterstreichen, so&nbsp;dass solche Schriften nur selten Teil der Corporate Identity werden. Ein unerfahrener Designer sollte sich jedoch mit ihnen vertraut machen. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installation von benutzerdefinierten Schriftarten auf einer Website <\/h2>\n\n\n\n<p>Jetzt kommen wir zum interessantesten Teil des Artikels! <\/p>\n\n\n\n<p>Die Verwendung von Standardschriften ist relativ sicher, aber f\u00fcr einen Designer langweilig. Wenn Sie eine andere Schriftart w\u00e4hlen m\u00f6chten, bietet Ihnen die moderne Typografie eine gro\u00dfe Auswahl an&nbsp;Web-Schriften in&nbsp;einer Vielzahl von Stilen. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alle diese Schriften werden als Nicht-Standard-Schriften bezeichnet. Sie k\u00f6nnen sich unterscheiden:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nach Schriftart: Serifen, serifenlose Schrift, Blockschrift; <\/li>\n\n\n\n<li>nach Zweck: Text, Anzeige oder \u00dcberschrift; <\/li>\n\n\n\n<li>nach Charakter: streng oder anmutig, neutral oder gewagt; <\/li>\n\n\n\n<li>durch F\u00fclle: Eine Familie kann mehrere Unterfamilien und Stile umfassen; <\/li>\n\n\n\n<li>nach Zeichensatz, Anzahl der Stile und Sprachunterst\u00fctzung. <\/li>\n<\/ul>\n\n\n\n<p>Viel wichtiger ist, dass sie sich in&nbsp;der Qualit\u00e4t unterscheiden werden. Je&nbsp;besser die Schrift aus grafischer und technischer Sicht ist, desto wahrscheinlicher ist&nbsp;es, dass sie auf m\u00f6glichst vielen Ger\u00e4ten sch\u00f6n und korrekt angezeigt wird. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Worauf ist zu&nbsp;achten?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Der Ruf des Studios oder des Designers, der die Schriftart entworfen hat. Fragen Sie andere Designer nach ihren Erfahrungen, lesen Sie Bewertungen und sehen Sie sich echte Websites und mobile Anwendungen&nbsp;an, die die gew\u00fcnschten Schriftarten verwenden. <\/li>\n\n\n\n<li>Kerning, Lesbarkeit, Konturen. Und das Beste: in&nbsp;verschiedenen Gr\u00f6\u00dfen. Viele Studios bieten&nbsp;an, eine Testversion der Schriftart herunterzuladen, um&nbsp;sie kostenlos auszuprobieren. Die <a href=\"https:\/\/typetype.org\/de\/trial-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Testschriften<\/a> von TypeType Studio beispielsweise sind in&nbsp;Bezug auf Zusammensetzung und technische Merkmale absolut identisch mit den kommerziellen Schriften. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_4-1.gif\" alt=\"\" class=\"wp-image-10000048432\"\/><\/figure>\n\n\n\n<p>Wenn Sie die gew\u00fcnschte Schriftart bereits ausgew\u00e4hlt und gekauft haben, m\u00fcssen Sie sie nur noch installieren. <\/p>\n\n\n\n<p>Wenn Sie WordPress verwenden, k\u00f6nnen Sie das Plugin Use Any Font installieren, mit dem Sie Schriftarten auf Ihre Website hochladen k\u00f6nnen. <\/p>\n\n\n\n<p>Andernfalls k\u00f6nnen Sie die Schriftart \u00fcber den Host Ihrer Website hochladen. Dazu ben\u00f6tigen Sie zun\u00e4chst eine entsprechende <a href=\"https:\/\/typetype.org\/de\/licensing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lizenz<\/a>, die es&nbsp;Ihnen erlaubt, die Schriftart auf Ihrer Website zu&nbsp;verwenden. Bei TypeType ist dies zum Beispiel eine Weblizenz. <\/p>\n\n\n\n<p>Sie ben\u00f6tigen Schriftdateien in&nbsp;den erforderlichen Formaten (mehr dazu sp\u00e4ter), die Sie \u00fcber die @font-face-Regel in&nbsp;das CSS einf\u00fcgen m\u00fcssen. Sie m\u00fcssen den Namen der Schriftart, die Adresse ihres Standorts und ihr Gewicht angeben. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_5-1.gif\" alt=\"\" class=\"wp-image-10000048433\"\/><\/figure>\n\n\n\n<p>Sp\u00e4ter k\u00f6nnen Sie die @font-face-Regel verwenden, um&nbsp;den Text zu&nbsp;formatieren, indem Sie den Schriftstil, die Gr\u00f6\u00dfe und die Farbe ausw\u00e4hlen. Sie k\u00f6nnen auch eine Ausweichschrift aus den sicheren Schriften ausw\u00e4hlen, die angezeigt wird, wenn eine nicht standardm\u00e4\u00dfige Webschrift auf dem Ger\u00e4t eines Benutzers nicht geladen werden kann. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00dcber Schriftformate und -gr\u00f6\u00dfen im&nbsp;Webdesign<\/h2>\n\n\n\n<p>Web-Schriften k\u00f6nnen unterschiedliche Formate haben. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schriftarten in&nbsp;den folgenden Formaten werden im&nbsp;Webdesign verwendet: <\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TTF (TrueType-Schriftart); <\/li>\n\n\n\n<li>OTF (OpenType-Schriftart); <\/li>\n\n\n\n<li>SVG (Skalierbare Vektorgrafik); <\/li>\n\n\n\n<li>EOT (Embedded Open Type); <\/li>\n\n\n\n<li>WOFF \u0438&nbsp;WOFF2 (The Web Open Font Format). <\/li>\n<\/ul>\n\n\n\n<p>Sie k\u00f6nnen mehrere Formate gleichzeitig verwenden, um&nbsp;die Wahrscheinlichkeit zu&nbsp;erh\u00f6hen, dass eine Schrift auf verschiedenen Ger\u00e4ten korrekt angezeigt wird. Die beliebtesten Formate f\u00fcr Webdesign sind WOFF und WOFF2, die auf den meisten modernen Ger\u00e4ten angezeigt werden. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_6-1.png\" alt=\"\" class=\"wp-image-10000048434\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_6-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_6-1-1024x371.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_6-1-1200x435.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_6-1-768x278.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_6-1-1536x557.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_6-1-420x152.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_6-1-600x218.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<p>Ein weiteres wichtiges Kriterium ist die Gr\u00f6\u00dfe der Webschrift. Je&nbsp;kleiner die Schriftdatei ist, desto schneller wird die Schrift auf der Website geladen. Wenn Sie z. B. eine Schriftart mit erweiterten lateinischen und kyrillischen Schriftzeichen gekauft haben und nur den Standardsatz ben\u00f6tigen, k\u00f6nnen wir das Gewicht der Schrift reduzieren. Wenn Sie eine TypeType-Schriftart verwenden, fragen Sie bitte nach einer <a href=\"https:\/\/typetype.org\/de\/custom-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Anpassung<\/a>. Wir k\u00f6nnen das Gewicht der Schriftdatei verringern, indem wir Sprachen oder Zeichen entfernen, die Sie nicht ben\u00f6tigen. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Farbe, Stil und Schriftgr\u00f6\u00dfe auf der Website <\/h2>\n\n\n\n<p>Mit der @font-face-Regel k\u00f6nnen Sie steuern, wie die Schrift auf der Website angezeigt wird. Sie k\u00f6nnen die Hintergrund- oder Schriftfarbe, die Gr\u00f6\u00dfe oder den Stil festlegen. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verwenden Sie die Eigenschaft \u00abcolor\u00bb, um&nbsp;die Schriftfarbe auszuw\u00e4hlen. Um&nbsp;den Texthintergrund zu&nbsp;\u00e4ndern, verwenden Sie \u00abbackground-color\u00bb. Sie k\u00f6nnen sowohl den Farbnamen als auch den RGB-Code verwenden. <\/li>\n\n\n\n<li>Verwenden Sie die Eigenschaft \u00abfont-size\u00bb, um&nbsp;die Schriftgr\u00f6\u00dfe auszuw\u00e4hlen. Die Gr\u00f6\u00dfe kann in&nbsp;Pixeln angegeben werden oder den Wert em&nbsp;verwenden. <\/li>\n\n\n\n<li>Und nat\u00fcrlich k\u00f6nnen Sie kursiv oder fett f\u00fcr ausgew\u00e4hlte Textpassagen w\u00e4hlen. Verwenden Sie \u00abfont-style\u00bb und \u00abfont-weight\u00bb. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_7-1.png\" alt=\"\" class=\"wp-image-10000048435\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_7-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_7-1-1024x445.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_7-1-1200x522.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_7-1-768x334.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_7-1-1536x668.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_7-1-420x183.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_7-1-600x261.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00fcfung <\/h2>\n\n\n\n<p>Das Wichtigste bei der Arbeit mit Schriftarten f\u00fcr Websites ist das Testen. <\/p>\n\n\n\n<p>Pr\u00fcfen Sie nach Abschluss der Arbeiten das Ergebnis auf allen verf\u00fcgbaren Ger\u00e4ten, Browsern und Betriebssystemen. <\/p>\n\n\n\n<p>Es&nbsp;ist besser, alle Ihre Freunde in&nbsp;die Entwurfspr\u00fcfung einzubeziehen, als sp\u00e4ter, nachdem das Projekt geliefert wurde, unangenehme Kommentare vom Kunden zu&nbsp;erhalten. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Schriftarten f\u00fcr Websites zu&nbsp;w\u00e4hlen sind<\/h2>\n\n\n\n<p>Selbst bei qualitativ hochwertigen und f\u00fcr das Webdesign gut geeigneten Schriften kann es&nbsp;schwierig sein, die richtige f\u00fcr ein Projekt auszuw\u00e4hlen. <\/p>\n\n\n\n<p>Wir haben bereits <a href=\"https:\/\/typetype.org\/de\/blog\/typography-main-types-and-characteristics-of-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">einen Artikel<\/a> \u00fcber Typografie geschrieben, in&nbsp;dem wir \u00fcber die wichtigsten Schriftarten gesprochen haben. Darin finden Sie Empfehlungen f\u00fcr die Auswahl der richtigen Schriftart f\u00fcr verschiedene Projekte. <\/p>\n\n\n\n<p>Und in&nbsp;dem <a href=\"https:\/\/typetype.org\/de\/blog\/serif-and-sans-serif-font-differences\/\" target=\"_blank\" rel=\"noreferrer noopener\">Artikel<\/a> \u00abSerif und Sans Serif: Unterschiede der Schriftarten\u00bb haben wir \u00fcber die beiden beliebtesten Schriftartenkategorien gesprochen. Lesen Sie ihn, wenn Sie wissen m\u00f6chten, was jede dieser Schriftarten \u00fcber eine Marke aussagt. <\/p>\n\n\n\n<p>Mobile Apps und Websites verwenden in&nbsp;der Regel zwei Schriftarten. F\u00fcr \u00dcberschriften&nbsp;\u2014 gr\u00f6\u00dfer und ausdrucksst\u00e4rker, und f\u00fcr Textfelder&nbsp;\u2014 neutraler. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_8-1.png\" alt=\"\" class=\"wp-image-10000048436\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_8-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_8-1-1024x512.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_8-1-1200x600.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_8-1-768x384.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_8-1-1536x768.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_8-1-420x210.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_8-1-600x300.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<p>Achten Sie bei der Auswahl der Schriftarten auf eine gute Lesbarkeit. Die meisten Nutzer besuchen Websites von mobilen Ger\u00e4ten aus, und sie sollten sich beim Lesen des Textes wohlf\u00fchlen. Es&nbsp;ist besser, eine neutrale Schriftart zu&nbsp;w\u00e4hlen, die nicht vom Lesen ablenkt. <\/p>\n\n\n\n<p>Achten Sie auf die begleitenden gestalterischen Faktoren&nbsp;\u2014 zu&nbsp;heller und kontrastreicher Text auf dunklem Hintergrund ist unm\u00f6glich zu&nbsp;lesen, da&nbsp;die Augen schnell erm\u00fcden. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Website-Schriftkombinationen <\/h2>\n\n\n\n<p>Seien Sie bei der Auswahl mehrerer Schriftarten f\u00fcr die Gestaltung Ihrer Website vorsichtig. Sie sollten nicht mehr als 2&nbsp;Schriftarten und mehr als 3&nbsp;Stile auf einer Website verwenden. Es&nbsp;ist besser, minimalistisch zu&nbsp;sein, da&nbsp;dies die Ladegeschwindigkeit der Seite verringert und das Design \u00fcbersichtlicher macht. <\/p>\n\n\n\n<p>Wir haben <a href=\"https:\/\/typetype.org\/de\/blog\/complementing-each-other-font-pairs-using-tt-norms-pro-and-tt-norms-pro-serif-as-an-example\/\" target=\"_blank\" rel=\"noreferrer noopener\">einen Artikel<\/a> \u00fcber Schriftartenpaare und ihre Verwendung im\u00a0Design geschrieben. Erfahren Sie, wie Sie mit den Bestsellern des Studios Schriftarten ausw\u00e4hlen k\u00f6nnen: <a href=\"https:\/\/typetype.org\/de\/fonts\/tt-norms-pro\/\">TT\u00a0Norms<sup class=\"reg\">\u00ae<\/sup> Pro<\/a> Sans Serif und <a href=\"https:\/\/typetype.org\/de\/fonts\/tt-norms-pro-serif\/\">TT\u00a0Norms<sup class=\"reg\">\u00ae<\/sup> Pro Serif<\/a> Serif.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die Top 10&nbsp;der besten Web-Schriften f\u00fcr Websites von TypeType<\/h2>\n\n\n\n<p>Wir stellen Ihnen eine Auswahl von 10&nbsp;unserer Web-Schriften vor, die auf Websites und mobilen Anwendungen stilvoll aussehen. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Beginnen wir mit den Textschriften.<\/h3>\n\n\n\n<p>Sie eignen sich aufgrund ihrer guten Lesbarkeit und ihres neutralen Charakters gut zur Formatierung gro\u00dfer Textmengen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_9-1.png\" alt=\"\" class=\"wp-image-10000048437\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_9-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_9-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_9-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_9-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_9-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_9-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_9-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-interphases\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-interphases\/\">TT&nbsp;Interphases Pro<\/a><\/h4>\n\n\n\n<p>Sie ist nicht nur eine gute Webschrift, sondern auch die perfekte Schrift f\u00fcr mobile Anwendungen und Websites. Erstellt auf der Grundlage umfangreicher Forschung. <\/p>\n\n\n\n<p>Neogrotesk mit einheitlichen Proportionen, lesbar und makellos. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_10-1.png\" alt=\"\" class=\"wp-image-10000048438\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_10-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_10-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_10-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_10-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_10-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_10-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_10-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-norms-pro\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-norms-pro\/\">TT&nbsp;Norms<sup class=\"reg\">\u00ae<\/sup> Pro<\/a><\/h4>\n\n\n\n<p>Es&nbsp;ist schwierig, die Anzahl der mit TT&nbsp;Norms<sup class=\"reg\">\u00ae<\/sup> Pro gestalteten Websites zu&nbsp;z\u00e4hlen&nbsp;\u2014 es&nbsp;gibt mehr als tausend davon. Unter ihnen sind die Marken Cartoon Network, CSN, Pinarello und andere. <\/p>\n\n\n\n<p>Eine geometrische serifenlose Schrift, deren neutraler Charakter und Vielseitigkeit vielen Designern vertraut ist. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_11-1.png\" alt=\"\" class=\"wp-image-10000048439\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_11-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_11-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_11-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_11-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_11-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_11-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_11-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-hoves\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-hoves\/\">TT&nbsp;Hoves Pro<\/a><\/h4>\n\n\n\n<p>Die Schrift wird f\u00fcr die Websites von Telefonica, True Digital, Studio Lenzing und anderen Unternehmen verwendet. Eine universelle serifenlose Schrift mit einem erkennbaren, aber strengen Charakter. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_12-1.png\" alt=\"\" class=\"wp-image-10000048440\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_12-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_12-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_12-1-1200x352.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_12-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_12-1-1536x450.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_12-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_12-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-livret\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-livret\/\">TT&nbsp;Livret Text<\/a><\/h4>\n\n\n\n<p>Moderne, vielseitige und \u00e4sthetische Textserife. Die beliebteste Serifenschrift des Studios. \u00dcberschriften auf Websites werden oft in&nbsp;ausdrucksstarken Schriftarten gesetzt. Hier stellen wir die besten Display-Webschriften vor. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_13-1.png\" alt=\"\" class=\"wp-image-10000048441\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_13-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_13-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_13-1-1200x352.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_13-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_13-1-1536x450.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_13-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_13-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-lakes-neue\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-lakes-neue\/\">TT&nbsp;Lakes Neue<\/a><\/h4>\n\n\n\n<p>Eine gro\u00dfe Familie geometrischer <a href=\"https:\/\/typetype.org\/de\/fonts\/serif\/\">serifenloser<\/a> Schriften, in&nbsp;der Sie stilvolle technische Sets finden k\u00f6nnen. Die Beschaffenheit der Schrift kann durch verschiedene Gewichte und stilistische Alternativen gesteuert werden. Kann sowohl f\u00fcr \u00dcberschriften als auch f\u00fcr Text verwendet werden. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_14-1.png\" alt=\"\" class=\"wp-image-10000048442\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_14-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_14-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_14-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_14-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_14-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_14-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_14-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-espina\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-espina\/\">TT&nbsp;Espina<\/a><\/h4>\n\n\n\n<p>Eine elegante Serifenschrift mit schmalen Proportionen und scharfen Serifen. Ideal f\u00fcr das Luxussegment. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_15-1.png\" alt=\"\" class=\"wp-image-10000048443\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_15-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_15-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_15-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_15-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_15-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_15-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_15-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-autonomous\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-autonomous\/\">TT&nbsp;Autonomous<\/a><\/h4>\n\n\n\n<p>Schrift mit breiten Proportionen, geeignet f\u00fcr technische Projekte. Stilvolle serifenlose Schrift f\u00fcr eine Vielzahl von Aufgaben. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_16-1.png\" alt=\"\" class=\"wp-image-10000048444\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_16-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_16-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_16-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_16-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_16-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_16-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_16-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-trailers\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-trailers\/\">TT&nbsp;Trailers<\/a><\/h4>\n\n\n\n<p>Die TT&nbsp;Trailers wurde als Schrift f\u00fcr die Filmindustrie konzipiert, hat sich aber dar\u00fcber hinaus entwickelt und ist zu&nbsp;einem Favoriten vieler gro\u00dfer Marken geworden. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_17-1.png\" alt=\"\" class=\"wp-image-10000048445\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_17-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_17-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_17-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_17-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_17-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_17-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_17-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-tsars\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-tsars\/\">TT&nbsp;Tsars<\/a><\/h4>\n\n\n\n<p>Serifenschrift mit raffiniertem Charakter. Die elegante Form der Serifen macht \u00dcberschriften ausdrucksstark und einpr\u00e4gsam. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/SEO-6_web-fonts_18-1.png\" alt=\"\" class=\"wp-image-10000048446\" srcset=\"https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_18-1.png 2000w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_18-1-1024x300.png 1024w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_18-1-1200x351.png 1200w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_18-1-768x225.png 768w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_18-1-1536x449.png 1536w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_18-1-420x123.png 420w, https:\/\/typetype.org\/de\/wp-content\/uploads\/SEO-6_web-fonts_18-1-600x176.png 600w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/typetype.org\/de\/fonts\/tt-travels-next\/\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/de\/fonts\/tt-travels-next\/\">TT&nbsp;Travels Next<\/a><\/h4>\n\n\n\n<p>Hochmoderne serifenlose Schrift f\u00fcr \u00dcberschriften. <\/p>\n\n\n\n<p>Teilen Sie uns Ihre Lieblings-Webschrift mit und stellen Sie Fragen zum Webdesign in&nbsp;den sozialen Medien. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr einen unerfahrenen Designer k\u00f6nnen Web-Schriftarten kompliziert und sogar einsch\u00fcchternd wirken. Aber es\u00a0gibt keinen Grund zur Verzweiflung, denn mit der Zeit werden Sie durch das Studium der Informationen und durch \u00dcbung zu\u00a0einem Profi.<\/p>\n","protected":false},"author":2,"featured_media":10000037203,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[188,184],"class_list":["post-15168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-work-with-fonts","tag-typetype-fonts"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/15168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/comments?post=15168"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/15168\/revisions"}],"predecessor-version":[{"id":47056,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/15168\/revisions\/47056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/media\/10000037203"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/media?parent=15168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/categories?post=15168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/tags?post=15168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}