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

Typografie Logos gestalten
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

Typografie Logos gestalten
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 erinnert. Durch die frischen, bunten Farben wirkt das Logo freundlich und kreativ.

Finch

Typografie Logos gestalten
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
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

Typografie Logos gestalten
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

Typografie Logos gestalten
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
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

Typografie Logos gestalten
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

Typografie Logos gestalten
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
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.

Grandpeople

Typografie Logos gestalten
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

Typografie Logos gestalten
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

Typografie Logos gestalten
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
Das Logo der von chopeh 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

Typografie Logos gestalten
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 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” 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 zu nutzen. Für eine Gebühr 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 kannst du den Effekt ausprobieren, und ein Showcase mit Beispielen anschauen. Auf der Webseite des Entwicklers Dave Rupert 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!