--- title: "Inspirationen und Tipps für die Gestaltung typografischer Logos" author: "Ellen Bauer" date: 2010-12-06 lang: de source: https://elmastudio.de/inspirationen-und-tipps-fur-die-gestaltung-typografischer-logos/ --- # Inspirationen und Tipps für die Gestaltung typografischer Logos Weniger ist oftmals mehr. Dieses simple Motto lässt sich auch auf die Gestaltung von Webseiten-Logos übertragen. So kann man z.B. auf Formen, Symbole oder Maskottchen verzichten, und ein Logo auch nur mit Schrift umsetzen. Um zu zeigen, dass typografische Logos auf keinen Fall langweilig sein müssen, sondern oftmals sehr modern aussehen, habe ich kreative Beispiele und jede Menge Tipps für die Gestaltung typografischer Logos zusammen gestellt. ## 1. Logo Inspirationen für Typografie-Fans Es gibt jede Menge kreative Beispiele für eine minimalistische, nur mit Typografie umgesetzte Logo-Gestaltung. Wichtig ist bei der Gestaltung darauf zu achten, dass die Auswahl der Schriftarten passend zum Stil der Webseite gewählt ist. ### [Jon Tan](https://jontangerine.com/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-01.jpg) Mal ganz abgesehen davon, dass John Tan sein Webseiten-Logo wunderschön und mit viel Kreativität gestaltet hat, ist auch die Umsetzung nur mit CSS sehr interessant. Über seine Gedanken und auftretende Probleme bei der Logo-Umsetzung schreibt der Webdesigner in seinem Artikel »Complex Type: CSS Fix, ClearType Miss«. ### [Manchester Craft Mafia](http://www.manchestercraftmafia.co.uk/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-02.jpg) Das Logo von Manchester Craft Mafia ist durch das Zusammenlegen von geometrischen Flächen erstellt. Mich hat diese Vorgehensweise sofort an das chinesische [Tangram-Spiel](https://de.wikipedia.org/wiki/Tangram) erinnert. Durch die frischen, bunten Farben wirkt das Logo freundlich und kreativ. ### [Finch](http://getfinch.com/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-03.jpg) Finch (engl. für Fink) ist die Webseite von Designer Francisco Inchauste. Das Logo ist nicht nur sehr groß, sondern durch die moderne, warme, geschwungene Typografie sehr charaktervoll. Interessant gelöst ist die Verknüpfung der zwei Buchstaben **c** und **h**. ### Image Mechanics ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-04.jpg) Das minimalistische Logo von Image Mechanics ist nur mit den Initialen »im« umgesetzt. Der geschwungene Bogen vom **i-Punkt** zum **m** macht das Logo zu etwas Besonderem. ### [Brand New Conference](https://www.underconsideration.com/brandnewconference/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-05.jpg) Ein kreatives Webseiten-Logo hat auch die von Under Consideration veranstaltete Konferenz »Brand New Conference«. Die Farben sind sehr harmonisch gewählt, und die Schrift ist lediglich mit Formen und schmalen Trennstrichen umgesetzt. ### [Infin Vision](http://www.infinvision.com/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-06.jpg) Das Logo der Webseite Infin Vision wird durch die Mischung unterschiedlicher Schriftarten und Größenverhältnissen interessant. Durch die dezente Verwendung von Farbe wird ein Highlight gesetzt. ### Tokyo Digital ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-07.jpg) Das Logo von Tokyo Digital ist sehr minimalistisch mit einer geometrischen, serifenlosen Schrift gestaltet, und ein schönes Beispiel für eine schlichtes, kreatives Typografie-Logo. ### [WHIT](https://whit-ny.com/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-08.jpg) Was mit Schrift alles möglich ist, zeigt die Umsetzung auf der Webseite der Modedesignerin Whitney Pozgay. Die aktuelle Kollektion der Designerin ist im **i** des Logos WHIT eingebunden, und kann als Slide-Show angeschaut werden. ### [I am Tiago](https://www.i-am-tiago.com/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-09.jpg) Der portugiesische Webdesigner Tiago Sá hat sein Webseiten-Logo »I am Tiago« in einem fetten, charakterstarken Schriftzug umgesetzt. Die Buchstaben berühren sich fast alle, und das **t** läuft sogar in das **i** hinein. ### Airside ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-10.jpg) Für das Logo des Kreativbüros Airside wurde eine serifenlose, geradlinige Schriftart schräg angeschnitten. An den oberen und unteren Enden des Logos sind auch die Buchstaben angeschnitten. Das Logo funktioniert auf hellem und [dunklem Hintergrund](https://www.airside.co.uk/). ### [Grandpeople](http://grandpeople.no/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-11.jpg) Bei Grandpeople werden Buchstaben des Logos übereinander gesetzt, so dass ein interessantes, grafisches Bild aus dem Schriftzug entsteht. Bei Hover ist die Schrift animiert, und wechselt langsam von Schwarz auf Grau. ### [nGen Works](http://www.ngenworks.com/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-12.jpg) Die Kreativagentur nGen Works verwendet eine dominante, schräg gestellte Slabserifen-Schrift als Logo. Auf der roten, ebenfalls schrägen Hintergrund-Fläche kommt das weise Logo gut zur Geltung. Spannendes Details sind die ausgeschnittenen Elemente zwischen **gn** und **rk**. ### [Typejockeys](https://www.typejockeys.com/de) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-13.jpg) Typejockeys verwendet eine geschwungene, an Kalligrafie erinnernde Typografie im Logo. In Kombination mit der recht dezenten Webseiten-Gestaltung wirkt das Logo aber dennoch modern und bildet einen erfrischenden Kontrast. ### DANZK ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-14.jpg) Das Logo der von [chopeh](http://www.chopeh.com) gestalteten Webseite DANZK arbeitet mit fehlenden Buchstaben-Elementen und reduziert die Schrift auf ihr Minimum. Besonders interessant sind das **N** und das **Z** gelöst, da beide Buchstaben das gleiche obere Element nutzen. ### [Zachary Pulman](https://www.zacharypulman.com/) ![Typografie Logos gestalten](https://elmastudio.de/wp-content/uploads/2010/12/typografie-logo-15.jpg) Ein klassisches, aber dennoch modernes Logo sind die Initialen ZP von Zachary Pulman. Die beiden Serifen-Buchstaben laufen ineinander und bilden so eine eigenständige, neue Form. ## 2. Tipps zum kreativen Umgang mit Schriften im Logo Gerade bei der Gestaltung eines Logos, das nur mit Typografie funktionieren soll, ist es oftmals schwer eine kreative Lösung zu finden. Daher habe ich einige hilfreiche Tipps und Anregungen für den Umgang mit Schrift im Logo zusammen gestellt. - **Unterschiedliche Schriftgrößen** Besonders wenn du mehrere Wörter oder einen Logo-Slogan für die Gestaltung zur Verfügung hast, bietet es sich an mit unterschiedlichen Schriftgrößen zu spielen. So kannst du Gewichtung auf ein Wort legen, und gleichzeitig spannende optische Kontraste schaffen. - **Mehrere Zeilen verwenden** Ein weiteres wichtiges Stilmittel ist es, den Logotext in mehrere Zeilen zu unterteilen. So kannst du langen Text besser zusammenfassen und ein spannendes Logo-Bild schaffen. - **Serifen und serifenlose Schrift** Durch die Kombination unterschiedlicher Schrift-Schnitte schaffst du spannende Kontraste für dein Logo. Wählst du beispielsweise eine eher klassische Serifenschrift für dein Logo, kannst du durch einen serifenlosen Logo-Slogan in einer kleinen Schriftgröße eine moderne Komponente schaffen. - **Groß- und Kleinschreibung** Ebenfalls spannende Kontraste kannst du durch die Kombination zwischen Groß- und Kleinschreibung schaffen. Oftmals bietet es sich z.B. an, einen Logo-Slogan zwar in einer kleinen Schriftgröße zu setzen, dafür aber die Schrift in Versalien zu setzen. - **Farbe verwenden** Natürlich muss ein Typografisches Logo nicht Schwarz Weiss sein. Mit der Wahl einer passenden Farbkombination oder Signalfarbe kannst du dein Logo aufpeppen. - **Buchstaben bearbeiten** Wenn man kreativ mit Typografie umgeht, entdeckt man oft neue Formen oder Bilder in einem Schriftzug. Gerade für ein Logo bietet es sich an, einzelne Buchstaben zu bearbeiten, und so z.B. ineinander fließen zu lassen oder eine neue Form aus einem Buchstaben oder einem Wort entstehen zu lassen. Wichtig ist beim Umgang mit Schrift aber meiner Meinung nach immer, dass man es nicht mit der Bearbeitung übertreibt. Der Charakter einer Schrift sollte immer beibehalten werden. Ein dezente Bearbeitung hat meist eine größere Wirkung. ## 3. Verschiedene Methoden, um ein Logo auf deiner Webseite einzubinden Natürlich kannst du für dein Logo nur Websafe-Fonts verwenden. (auf der Webseite [Typetester](https://www.typetester.org/) kannst du verschiedene Websafe-Fonts testen). Doch wenn dir diese begrenzten Optionen für die Umsetzung deines Logos nicht ausreichen, gibt es jede Menge Lösungen, um ein typografisches Logo auf deiner Webseite einzubinden. ### Images verwenden Vor allem wenn du deine Schriften bearbeitest hast, und unterschiedliche Nicht Websafe-Fonts für dein Logo verwendest, ist es wohl immer noch am einfachsten ein Image von deinem Logo zu erstellen und dieses einzubinden. Der Schriftzug ist dann zwar im Quellcode nicht einlesbar, aber du kannst dein Webseiten-Seiten Name immer noch über das title- und alt-Attribut im HTML-Code angeben. ### Google Webfonts Eine noch recht neue Option ist die Verwendung von Schriften aus dem Google Font Directory. Hier hast du derzeit eine Auswahl von fast 30 Schriften, von denen sich einige sehr gut für die Logo-Gestaltung eignen. Im Artikel ["Die kostenlosen Webfonts der Google Font API nutzen"](https://elmastudio.de/die-kostenlosen-webfonts-der-google-font-api-nutzen/) findest du eine praktische Anleitung zur Verwendung der Google-Schriften. ### @font-face Eine weitere Möglichkeit kreative Schriftarten auf deiner Webseite zu verwenden, ist die @font-face Methode. Auf der Webseite Fontsquirrel kannst du dir etliche Free-Fonts bereits fertig vorbereitet für die @font-face Einbindung herunterladen. ### Typekit (kostenpflichtig) Wahre Typografie-Fans können auch in Erwägung ziehen, den kostenpflichtigen Dienst von [Typekit](http://typekit.com/) zu nutzen. Für eine [Gebühr](https://typekit.com/plans) von ca. 25-50$ im Jahr (eine kleine private Version gibt es auch zur kostenlosen Probenutzung) kannst du verschiedene Schriftarten für die Verwendung auf deiner Webseite nutzen. Natürlich lohnt sich dieser Dienst eher, wenn du neben dem Logo auch noch weitere Schriften der Typekit-Library auf deiner Webseite nutzen möchtest. ### Noch ein Tipp: das Lettering jQuery-Plugin Ein spezielles Feature, das eventuell für das ein oder andere Typografie-Logo in Frage kommt, ist das Lettering- jQuery-Plugin, mit dem du einzelne Buchstaben deines Logos animieren kannst. Auf der [Webseite des Plugins](https://letteringjs.com/) kannst du den Effekt ausprobieren, und ein Showcase mit Beispielen anschauen. Auf der Webseite des Entwicklers [Dave Rupert](https://daverupert.com/2010/09/lettering-js/) findest du eine Anleitung zur Nutzung des Plugins. Wie gefallen dir Logos, die nur mit Schrift umgesetzt sind? Kennst du weitere kreative Beispiele oder hast du noch mehr Ratschläge, auf was man bei der typografischen Logo-Gestaltung achten sollte? Über dein Feedback und deine Tipps freue ich mich sehr!