{"id":253905,"date":"2023-11-22T06:30:00","date_gmt":"2023-11-22T03:30:00","guid":{"rendered":"https:\/\/inform.click\/25-websites-die-typografie-inspirierend-nutzen\/"},"modified":"2023-11-22T06:45:00","modified_gmt":"2023-11-22T03:45:00","slug":"25-websites-die-typografie-inspirierend-nutzen","status":"publish","type":"post","link":"https:\/\/inform.click\/de\/25-websites-die-typografie-inspirierend-nutzen\/","title":{"rendered":"25 Websites, die Typografie inspirierend nutzen"},"content":{"rendered":"

\n Jede Website verwendet Typografie, aber die \u00fcberwiegende Mehrheit von ihnen macht nichts Besonderes damit.\n<\/p>\n

\n Tats\u00e4chlich nutzen viele der Websites, die ich t\u00e4glich besuche, die Typografie (meiner Meinung nach) ziemlich schlecht, weshalb ich immer ein Gef\u00fchl \u00fcberw\u00e4ltigender Freude versp\u00fcre, wenn ich auf eine Website sto\u00dfe, die wirklich das Extra getan hat Meile, was Typografie betrifft.\n<\/p>\n

\n Wenn Sie es also satt haben, \u201eArial“ und \u201eTimes New Roman“ zu sehen (ich wei\u00df, dass ich es bin!), oder wenn Sie typografische Inspiration f\u00fcr ein zuk\u00fcnftiges Projekt ben\u00f6tigen, finden Sie hier einige Websites, die Typografie hervorragend nutzen :\n<\/p>\n

\n 1 V02-Gruppe
\n<\/h4>\n

\n <\/a>\n<\/p>\n

\n Die V02 Group macht auf ihrer Website eine interessante Verwendung von Typografie in dem Sinne, dass einige Teile davon hinter dem Bild des L\u00e4ufers verborgen sind.\n<\/p>\n

\n Dies tr\u00e4gt dazu bei, ein Gef\u00fchl von Tiefe zu erzeugen und ein Bild der in der Luft schwebenden Typografie darzustellen.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Crimson Text, Futura\n<\/p>\n

\n 2 Was ist Ihre Zukunft?
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n \u201eWas ist deine Zukunft?“ ist eine wundersch\u00f6n gestaltete Website, die sparsam mit Typografie umgeht.\n<\/p>\n

\n Das Design insgesamt ist recht minimalistisch und \u201eflach“, was wohl auch der Grund f\u00fcr eine so abenteuerliche Schriftwahl (Baron Neue) f\u00fcr die gro\u00dfe Schrift ist.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Baron Neue, Georgia\n<\/p>\n

\n 3 Jakob Grubbe
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Jacob Grubbe hat hier eine au\u00dfergew\u00f6hnlich einfache Website geschaffen, bei der die Typografie im Mittelpunkt steht \u2013 w\u00e4hrend Sie tippen, offenbart sich die Website.\n<\/p>\n

\n Jacob verwendet in diesem Design nur eine Schriftart (Roboto), aber sie passt perfekt zum minimalistischen Designstil.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Roboto\n<\/p>\n

\n 4 Geheime Resolutionen
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Secret Resolutions ist eine farbenfrohe, etwas aufdringliche Website, die \u00e4hnlich wie Jacobs Website oben nur eine Schriftart verwendet (Brandon Grotesque).\n<\/p>\n

\n Die Typografie ist gro\u00df, mutig, abenteuerlich und macht Spa\u00df \u2013 eine perfekte Wahl, wenn man das Konzept der Website ber\u00fccksichtigt.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Brandon Grotesque\n<\/p>\n

\n 5 Grundlagen09
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Basics09 macht genau das, was es verspricht: Es bietet eine \u201eeinfache“ Website, die wiederum nur eine Schriftart (Benton Sans) verwendet.\n<\/p>\n

\n Benton Sans an sich ist eine ziemlich einfache und schlichte serifenlose Schrift, aber der Designer hat subtiles Styling und Gr\u00f6\u00dfe verwendet, um ein Gef\u00fchl der Hierarchie zu schaffen, selbst mit nur einer Schriftart im Design.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Benton Sans\n<\/p>\n

\n 6 Degordian
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Degordian verwendet gro\u00dfe Gro\u00dfbuchstaben f\u00fcr die Hauptelemente des Designs, erg\u00e4nzt durch kleineren Text in Normalbuchstaben, der in der beliebten Schriftart Merriweather geschrieben ist.\n<\/p>\n

\n Diese Kombination aus gro\u00dfen Hintergrundbildern und gro\u00dfer Gro\u00dfbuchstaben-Typografie entwickelt sich dieses Jahr schnell zu einem Webdesign-Trend.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Futura, Merriweather\n<\/p>\n

\n 7 Brancott-Anwesen
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Brancott Estate hat sich f\u00fcr einen tafel\u00e4hnlichen, handgezeichneten Effekt f\u00fcr seine Website entschieden.\n<\/p>\n

\n Wir sind uns nicht sicher, welche Hauptschrift sie verwendet haben, aber sie wird neben Georgia verwendet. Was es ist, es ist eine epische Kombination.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Unbekannt, Georgia\n<\/p>\n

\n 8 Meilen Calder
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Miles Calder hat hier und wieder eine sehr minimalistische Website erstellt, die Seite verwendet nur eine Schriftart: Founders Grotesk.\n<\/p>\n

\n Er verwendet verschiedene Gr\u00f6\u00dfen, Farben und Stylings, um ein Gef\u00fchl der Hierarchie im Design zu erzeugen.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Founders Grotesk\n<\/p>\n

\n 9 Lauf f\u00fcr AJD
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Obwohl diese Website auf Franz\u00f6sisch und nicht auf Englisch geschrieben ist, sieht sie aufgrund des Stils der verwendeten Schriftart immer noch etwas schwer zu lesen aus.\n<\/p>\n

\n Sie m\u00fcssen jedoch zugeben, dass es stilistisch ziemlich gut aussieht.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Avenir Book\n<\/p>\n

\n 10 SendAMessage.to
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Mit SendAMessage.to k\u00f6nnen Sie im Wesentlichen in nur wenigen Schritten eine personalisierte Nachricht an einen Freund, ein Familienmitglied oder einen Kollegen senden.\n<\/p>\n

\n Als einzige Schriftart hat der Designer Proxima Nova verwendet. eine Schrift, die f\u00fcr ihre Sch\u00f6nheit bei gro\u00dfen Gr\u00f6\u00dfen bekannt ist.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Proxima Nova\n<\/p>\n

\n 11 Amazee-Labore
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Es scheint, dass Amazee Labs eine etwas neue und einzigartige Schriftart f\u00fcr dieses Design geschaffen hat, aber sie wird neben Source Sans Pro und Museo verwendet.\n<\/p>\n

\n Diese beiden Schriftarten funktionieren wunderbar zusammen und besonders gut zusammen mit der hellen, farbenfrohen Typografie, die in den Bildern zu sehen ist.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Source Sans Pro, Museo\n<\/p>\n

\n 12 Oudolf
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Die Oudolf-Website ist sehr einfach und \u00e4hnlich wie die Website von Jacob Grubbe, die zuvor in diesem Beitrag erw\u00e4hnt wurde, ist die Typografie so ziemlich das einzige Element des Designs.\n<\/p>\n

\n Diese Website verwendet jedoch einen coolen Effekt, bei dem der Text effektiv \u00fcber einem Bild maskiert wird, das sich dann beim Rollover zeigt.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Mason Neue Book, Univers Standard\n<\/p>\n

\n 13 Ich bin Baz
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n \u201eI Am Baaz“ verwendet zwei sch\u00f6ne Schriftarten: Verlag Book und Acrom Extra Bold.\n<\/p>\n

\n In Kombination mit dem Videohintergrund der Website ist das Ergebnis umwerfend. Es ist fast wie ein sich bewegendes, interaktives Filmplakat in der Art und Weise, wie es entworfen und gestaltet wurde.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Verlag Book, Acrom Extra Bold\n<\/p>\n

\n 14 FS Millbank
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n FS Millbank ist eine Website, die f\u00fcr die Schriftart FS Millbank wirbt.\n<\/p>\n

\n Sie wird als \u201ewandernde“ Schrift beschrieben, und wenn Sie in letzter Zeit an Flugh\u00e4fen oder Bahnh\u00f6fen waren, haben Sie wahrscheinlich etwas \u00c4hnliches auf den Schildern dort gesehen.\n<\/p>\n

\n Es ist eine sch\u00f6ne Schriftart und funktioniert definitiv gut f\u00fcr den beabsichtigten Zweck.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> FS Millbank\n<\/p>\n

\n 15 Studio Lovelock
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Es scheint, dass Futura PT in diesem Jahr immer beliebter wird und erneut auf der Website von Studio Lovelock aufgetaucht ist.\n<\/p>\n

\n Es ist die einzige Schriftart, die im Design verwendet wird, aber sie wurde in vielen verschiedenen Gr\u00f6\u00dfen, Stilen und Gewichten verwendet, um ein interessantes Design zu schaffen.\n<\/p>\n

\n Es sieht an einigen Stellen nicht einmal wie die gleiche Schriftart aus.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Futura PT\n<\/p>\n

\n 16 Anbetung
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Die Website von Adoratorio ist gr\u00f6\u00dftenteils in Schwarzwei\u00df gehalten, obwohl es vereinzelte Farbelemente gibt, wie der obige Screenshot zeigt.\n<\/p>\n

\n Sowohl Montserrat als auch Courier New sind in diesem Design enthalten, und obwohl dies nicht die interessanteste Schriftauswahl ist, hat das Design geschickt Farb- und Tracking-\/Kerning-\u00c4nderungen verwendet, um ein herausragendes Design zu schaffen.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Montserrat, Courier New\n<\/p>\n

\n 17 Die Musterbibliothek
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Die Musterbibliothek macht sehr wenig Gebrauch von Typografie, da es sich haupts\u00e4chlich um eine bildbasierte Website handelt.\n<\/p>\n

\n Wenn jedoch Typografie verwendet wird, wird sie haupts\u00e4chlich f\u00fcr die Handlungsaufforderungen (dh die Schaltfl\u00e4che \u201eJetzt herunterladen“) verwendet. Die K\u00fchnheit von MostraNuova ist eindeutig die perfekte Wahl f\u00fcr diesen Job.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> MostraNuova\n<\/p>\n

\n 18 Spotify. S\u00fc\u00dfer Fleck
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Spotify verwendet nur eine Schriftart in ihrem \u201eSweet Spot“-Design f\u00fcr den Valentinstag und es funktioniert au\u00dfergew\u00f6hnlich gut, wenn es mit dem kr\u00e4ftigen Farbschema und dem minimalistischen Design der Website kombiniert wird.\n<\/p>\n

\n Verschiedene Gewichte und Gr\u00f6\u00dfen werden verwendet, um eine einfache, aber offensichtliche visuelle Hierarchie zu schaffen.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Circular TT\n<\/p>\n

\n 19 51 Norden
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n 51 North ist eine Designagentur mit Sitz in den Niederlanden. Sie verwenden zwei Schriftarten: Minion W01 und Two Cen W01, die beide relativ sparsam verwendet werden.\n<\/p>\n

\n Eine seltsame Sache, die Ihnen an dieser Website auffallen wird, ist, dass f\u00fcr die Haupt\u00fcberschrift (\u201e666″) eine normale Schriftst\u00e4rke verwendet wird, w\u00e4hrend f\u00fcr die Unter\u00fcberschrift (\u201e6th Anniversary“) eine fette Schriftst\u00e4rke verwendet wird.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Minion W01, Tw Cen W01\n<\/p>\n

\n 20 blaue Relais
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n RelaisBlu ist ein Boutique-Hotel und Restaurant in Italien. Im Gegensatz zu den meisten in diesem Beitrag vorgestellten Websites verwendet die Website tats\u00e4chlich drei v\u00f6llig unterschiedliche Schriftarten.\n<\/p>\n

\n Meistens ist die Verwendung von mehr als ein paar Schriftarten in verschiedenen Gr\u00f6\u00dfen und Gewichten ein gewisses Risiko, aber RelaisBlu schafft es, die Dinge durchzuziehen, um ein visuell beeindruckendes Design zu schaffen.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Geosans, Fanwood, Theano\n<\/p>\n

\n 21 April Studio
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n April Studio verwendet nur eine Schriftart in ihrem Design: Helvetica Neue.\n<\/p>\n

\n Helvetica Neue ist heutzutage eine relativ \u00fcberstrapazierte Schrift (sogar Apple verwendet sie in ihren Betriebssystemen OSX Yosemite und iOS8).\n<\/p>\n

\n Durch die Verwendung verschiedener Gewichte, Gr\u00f6\u00dfen und Farben hat April Studio jedoch ein klares und einfaches Design mit einer klaren visuellen Hierarchie geschaffen.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Helvetica Neue\n<\/p>\n

\n 22 EMythos
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n EMyth ist eine relativ einfache und bodenst\u00e4ndige Website, was zum Teil der Wahl der Typografie zu verdanken ist: Museo Slab und Proxima Nova.\n<\/p>\n

\n Proxima Nova kann manchmal ziemlich k\u00fchn und maskulin erscheinen, aber durch die Verwendung von Museo Slab daneben hat EMyth ein geradliniges Design geschaffen, das sauber und klar ist und beide Geschlechter gleicherma\u00dfen anspricht.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Museo Slab, Proxima Nova\n<\/p>\n

\n 23 Melanie David
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Abgesehen von dem benutzerdefinierten Schriftdesign, das f\u00fcr die gro\u00dfen \u00dcberschriften auf der linken Seite der Website verwendet wird, verwendet Melanie auf ihrer Website nur eine Schriftart: Proxima Nova.\n<\/p>\n

\n Sie h\u00e4lt die Dinge einfach, indem sie eine fette Gewichtung f\u00fcr die Unter\u00fcberschriften und eine normale Gewichtung f\u00fcr den Hauptinhalt verwendet. Dies schafft eine klare visuelle Hierarchie, w\u00e4hrend ihre benutzerdefinierte Schriftart dem Design Pers\u00f6nlichkeit verleiht.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Proxima Nova, Benutzerdefiniert\n<\/p>\n

\n 24 Formeln
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Formlets ist ein Unternehmen, das noch nicht gestartet ist, aber anscheinend bereit ist, ein Produkt auf den Markt zu bringen, das mit einigen ziemlich gro\u00dfen Spielern konkurrieren wird.\n<\/p>\n

\n Formlets hat jedoch Typografie verwendet, um sich von der Masse abzuheben. W\u00e4hrend die meisten Mitbewerber mit einem altbackenen Corporate Design auftrumpfen, hat sich Formlets f\u00fcr ein schlichteres und freundlicheres Design entschieden. Dazu werden DIN Rounded und Roboto verwendet.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> DIN Rounded, Roboto\n<\/p>\n

\n 25 Nikolaus Bussiere
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Nicholas hat ein au\u00dfergew\u00f6hnlich minimalistisches Design geschaffen und verwendet durchgehend nur eine Schriftart: Apercu.\n<\/p>\n

\n Er verwendet zwei Schriftst\u00e4rken (leicht und normal) und \u00fcberraschenderweise verwenden die gro\u00dfen \u00dcberschriften die leichte Schriftst\u00e4rke, w\u00e4hrend der kleinere, weniger wichtige Text eine normale Schriftst\u00e4rke verwendet.\n<\/p>\n

\n Er verwendet Gr\u00f6\u00dfe und Farbe, um sicherzustellen, dass innerhalb des Designs immer noch eine starke visuelle Hierarchie besteht.\n<\/p>\n

\n Verwendete Schriftarten:<\/strong> Apercu\n<\/p>\n<\/p>\n

\n Aufnahmequelle: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Jede Website verwendet Typografie, aber die \u00fcberwiegende Mehrheit von ihnen macht nichts Besonderes damit. Tats\u00e4chlich nutzen viele der Websites, die ich t\u00e4glich besuche, die Typografie (meiner Meinung nach) ziemlich schlecht, weshalb ich immer ein Gef\u00fchl \u00fcberw\u00e4ltigender Freude versp\u00fcre, wenn ich auf eine Website sto\u00dfe, die wirklich das Extra getan hat Meile, was Typografie betrifft. Also, wenn Sie es satt haben, \u201eArial\u201c und \u201eTimes New Roman\u201c zu sehen (ich wei\u00df, dass ich es bin!), oder wenn Sie typografische Inspiration f\u00fcr eine Zukunft brauchen \u2026<\/p>\n","protected":false},"author":1,"featured_media":139118,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[224,250,55,198],"tags":[],"class_list":["post-253905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lehrbuecher","category-schriftarten","category-web-und-wordpress","category-webdesign"],"_links":{"self":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/comments?post=253905"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253905\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media\/139118"}],"wp:attachment":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media?parent=253905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/categories?post=253905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/tags?post=253905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}