▸ Home / Tipps & Tricks /

Gestaltung mit Typografie

Tagtäglich werden wir mit Typografie im Webdesign und den unterschiedlichsten Webfonts konfrontiert. Doch die meisten Menschen wissen gar nicht, wie sehr uns Typografie beeinflusst und dass Webfonts bestimmte Emotionen hervorrufen können. Hier möchte ich versuchen zu erklären, wie man Webtypografie richtig anwendet.

Typografie ist sowohl die Lehre von Webfonts als auch ein großes Gestaltungselement. Sie hilft dabei, die Kommunikation zu erleichtern und stellt einen Teil der visuellen Kommunikation dar. Typografie unterstreicht zusätzlich das, was die Gestaltung im Web- oder Printbereich über ein bestimmtes Thema aussagt.

Man unterscheidet grob zwischen der Mikro- und Makrotypografie. Mikrotypografie ist die Ästhetik im Detail. Sie wird daher auch Detailtypografie genannt. Dabei geht es um die Feinheiten der Webschriften. Diese Ebene erfasst die Gestaltung des Satzes zwischen Buchstaben, Zeichen, Wörtern, Zeilen und das Verhältnis zwischen den sekundären Elementen der Gestaltung. Webfonts machen den Satz besonders gut lesbar und können zum Beispiel wichtige Textabschnitte hervorheben.

Bei der Makrotypografie handelt es sich um den optischen Gesamtkomplex. Diese Art der Typografie beschäftigt sich mit dem Layout der Website. Die einzelnen Elemente des Layouts sollen sinnvoll aufeinander abgestimmt werden. Darunter fallen das Format, der Satzspiegel, der Aufbau, die Gliederung und auch das Verhältnis von Schrift zu Bild. Die Website darf dabei weder überladen noch zu kahl gestaltet sein, damit eine harmonische Wirkung erzielt wird.

Wie kam es zur Typografie im Webdesign?

Lange Zeit standen Typografie und Webfonts nicht wirklich hoch auf der Prioritätenliste bei den Web-Entwicklern. Dies war schließlich die Aufgabe der Grafikdesigner. Doch mit der Zeit gab es ein immer besseres Angebot an websicheren Schriften, die dieses Problem lösen konnten. Auch Grafikdesigner sahen das Potential darin, sich im Bereich Webdesign besser aufzustellen und die Lücke zu nutzen.

Die Anwendung der Typografie

Im Webdesign ist es wichtig, die Typografie in Hierarchien zu unterteilen. Das bedeutet, Abstände zwischen Überschriften und Textabschnitte einzubringen. Durch die visuelle Einordnung in diese Hierarchien kann der Betrachter den Text leichter scannen und die Informationen leichter aufnehmen. Ebenso kann sich der Benutzer leichter durch die Website navigieren, wenn sich eine konsistente Gestaltung der Typografie durchzieht.

Schriftart für die Website

Um die optimale Schriftart der Webfonts für die Website zu finden, sollte man zunächst nachschauen, ob die Webfont, die man als Standard verwendet, auch für das Web verfügbar ist. Wenn das nicht der Fall ist, sollte man eine auswählen, die gut zum Thema passt.

Schriftgröße und Zeilenabstände

Die Schriftgröße und Zeilenabstände spielen ebenfalls eine wichtige Rolle. Der Fließtext hat in der Regel eine Schriftgröße von 16 Pixeln. Diese Größe entlastet die Augen beim Lesen und hilft bei der Zugänglichkeit. Der Zeilenabstand und die Zeilenlänge der Fonts sind auch wichtig, um alle Informationen aufnehmen zu können. Deshalb sollte eine Zeile nur so viele Wörter beinhalten, dass der Leser seinen Kopf beim Lesen nicht bewegen muss.

Farben

Die Farbe von Text und Hintergrund sollte sich nie ähneln. So verliert der Text schnell an Aufmerksamkeit. Deswegen sollte zwischen Text und Hintergrund ein hoher Kontrast bestehen. Zum Beispiel sollte der Hintergrund Weiß oder sehr hell sein, um einen schwarzen Text gut lesen zu können. Auch die Farbpsychologie steht im engen Verhältnis zu der richtigen Auswahl der passenden Webfont.