Schriften und Webdesign: Beispiele und Tipps

Bei der Wahl von Schriften machen es sich viele Webdesigner, ich eingeschlossen, sehr leicht. Schließlich kann man nur wenige Schriften verwenden und ist daher sehr eingeschränkt. Verschiedene Techniken bieten mittlerweile aber die Möglichkeit, diese Klippen zu umschiffen.

• von Lennart Prange

Foto von jmv – Einige Rechte vorbehalten

Welche Bedeutung haben Schriften für den Erfolg? Bei der Wahl von Schriften machen es sich viele Webdesigner, ich eingeschlossen, sehr leicht. Schließlich kann man nur wenige Schriften verwenden und ist daher sehr eingeschränkt. Verschiedene Techniken bieten mittlerweile aber die Möglichkeit, diese Klippen zu umschiffen. Deshalb macht es Sinn, sich mit der Wahl der richtigen Schrift auseinanderzusetzen.

Dieser Beitrag soll euch anhand von Beispielen zeigen, warum die Schriftwahl enorm wichtig ist, wie ihr Schriften kombinieren könnt und welche Wirkund die verschiedenen Schriften haben.

Kommentare und Social Bookmarks würden mich sehr freuen. Viel Spaß mit dem Beitrag.

Die Wirkung von Schriften

Wie fast alle Gestaltungselemente haben auch Schriften ihre Wirkung/Ausstrahlung. Viele sagen einfach Schriften mit Serifen wirken alt und Schriften ohne Serifen modern. Ok, das mag teilweise zutreffen, ist aber sehr ungenaue Einteilung. Vor allem Serifenschriften kann man in verschiedene Kategorien einteilen, die sich durch deutliche Merkmale unterscheiden.

Serifen

Bei der ersten Schrift, Garamond, handelt es sich um eine Schrift aus der Kategorie Renaissance-Antiqua. Wie ihr sehen könnt, variiert die Strichdicke innerhalb eines Buchstabens. Das liegt daran, dass diese Schriften an Handschriften angelehnt sind. Auf mich wirkt diese Kategorie schon recht alt, geradezu historisch. Die Schriften können vielleicht auch in einen modernen Kontext gesetzt werden, aber da sind sie sicher nicht zu hause.

Weitere Schriften aus dieser Kategorie sind:

• Palatino
• Times
• Oldstyle

Die nächste Schrift, Bodoni MT, sieht nicht mehr aus, als wäre sie mit der Hand geschrieben. sie kommt aus der Kategorie Klassizistische Antiqua. Auffallend sind die sehr dünnen Serifen. Sie sind auch nicht mehr geschwungen sondern total gerade. Diese Schriften wirken sehr elegant, kultiviert und kalt. Sie werden häufig in der Modeindustrie eingesetzt. Die sehr feinen Serifen sind absolut unbrauchbar für Fließtext. Auf Bildschirmen kann das zu großen Problemen führen. Also nur in Überschriften und großen Textgrößen einsetzen. Da entfalten sie ihre voll Wirkung.

Weitere Schriften aus dieser Kategorie sind:

• Didot
• Bodoni
• Fairfield

Die letzte Kategorie, Linear-Antiqua, hier dargestellt durch Rockwell, sind sehr wuchtig und stammen aus der industriellen Revolution. Es gibt kaum eine Variation in der Strichdicke und die Schriften machen sich sehr gut auf großen Plakaten. Im Internet werden sie häufig bei Seiten verwendet, die ein wenig dreckig aussehen. Grunge halt.

Weiter Schriften aus dieser Kategorie sind:

• Memphis
• Stymie
• ITC Lubalin Graph

*UPDATE* Diese Kategorie ist Dank des Hinweises von Marvin (s. Kommentare) hinzugekommen. Die Schriften aus der Kategorie Barock Antiqua, einigen von euch vielleicht auch als Transitional bekannt, werden hier durch Georgia repräsentiert und sie sind der Übergang zwischen den Renaissance und Klassizistischen Antiqua Schriften. Wie ihr seht, sind die Übergänge der Serifen schön abgerundet. Die Ecken sind aber total, naja, eckig. Diese Schriften sehen um einiges weniger nach Handschrift aus und wirken viel konstruierter als die vorherige Kategorie, Renaissance Antiqua. Dadurch bekommen sie einen weniger altertümlichen Eindruck und wirken etwas mechanischer.

Weitere Schriften aus dieser Kategorie sind:

• Baskerville
• Adobe Caslon
• Cochin

Keine Serifen

Schriften ohne Serifen sind relativ jung. Früher fand man sie einfach hässlich. Irgendwann habe ich mal gelesen, dass daher auch der Name der Kateogrie, Grotesk, kommt. Es ist ein riesiger Fehler, bei serifenlosen Schriften nur an Arial und Helvetica oder Verdana zu denken. Es gibt unglaublich viele verschiedene Varianten, die alle etwas eigenes haben. Man könnte die Grotesk Schriften in weitere Unterkategorien einteilen. Das ist aber für uns nicht nötig.
Diese Schriften werden meistens für Fließtexte eingesetzt. In kleineren Größen hat man auch kaum eine Alternative. Einige ältere Monitore können die vielen Details der Serifenschriften einfach nicht Darstellen.

Denken wir uns ein paar Marken aus!

Ich brauche ein paar Marken, um euch die Wichtigkeit der Schriftwahl zu zeigen. Das ist der einfachste Weg.

Nehmen wir: Good Old Tageblatt, Fritz Bestattungen, Tanjas Trödelladen,

Wie ihr seht, habe ich die Gestaltung total verhauen. Ok, das Bestattungsunternehmen könnte man so durchgehen lassen. Vielleicht. Die Zeitung ist aber eine Katastrophe. Absolut lächerlich und daher zum Untergang bestimmt. Für den Trödelladen gilt das Gleiche. Wenn ein Trödelladen so altbacken und seriös auftritt, kann er Kunden vergessen. Niemand der Anzeigen überfliegt und nach einem Trödelladen such wird bei dieser Schrift innehalten.

Bam. So sollte das aussehen. Die Schriftzüge sind nun glaubwürdiger. Die Zeitung braucht sich nicht mehr zu verstecken. Fritz Bestattungen kommt seriös daher und Tanjas Trödelladen könnte nicht trödeliger sein.

Schriften Kombinieren

Die Kombination von Schriften kann ein Komposition deutlich interessanter machen. Allerdings gibt es hier einige Regeln zu beachten, die ich euch wieder an ein paar Beispielen verdeutlichen will.

Ok, das ist keine Kombination. Trotzdem will ich kurz erwähnen, dass man nichts falsch machen kann, wenn man immer die gleiche Schrift verwendet.

In vielen Büchern wird die Regel genannt: Verwende niemals zwei verschiedene Serifenschriften oder zwei verschiedene serifenlose Schriften. Die Regel wird meistens formuliert, wenn der Autor nicht viel Platz für das Kapitel über Typographie eingeplant hat. Grundsätzlich ist sie auch nicht falsch und man kann sich danach richten.

Trotzdem ist es auch möglich, zwei Serifenschriften zu kombinieren. Dabei sollte man allerdings eines beachten: Kombiniert niemals zwei Schriften aus der gleichen Kategorie.

Die Kategorien habe ich oben ja bereits vorgestellt. Dann passiert nämlich sowas. Die beiden Schriften gehören der gleichen Kategorie an. Sie sind sich sehr ähnlich aber nicht gleich.

Finaler Tipp

Ihr gestaltet für das Internet und es ist absolut wichtig, dass ihr auf jeder Unterseite immer die gleichen Schriften für den gleichen Zweck benutzt. Der Nutzer gewöhnt sich an die Hirachie und weiß immer, dass er sich auf der gleichen Website befindet.

Beispiele im Web

Thinkdesignblog

Thinkdesign verwendet für den Fließtext und auch für die Überschrift eine Serifenschrift. Das ist hier auch angebracht. Es passt sehr zur restlichen Optik der Seite: Altes, zerknittertes, abgerissenes Papier.

Smashing Magazine

Das Smashing Magazine setzt auf ein sehr klares Auftreten und deswegen passt hier die serifenlose Schrift auch perfekt und man kann sich gar nichts anderes vorstellen

Designreviver

Designreviver setzt auf einen munteren Mix von serifenlosen und Serifenschriften. Ich könnte mir sogar im Fließtext auch eine Serifenschrift vorstellen, aber wahrscheinlich hat der Designer sich aus den bereits genannten Gründen für eine serifenlose Schrift entschieden.

The Netsetter

Hier der Beweis dafür, dass Serifenschriften nicht alt wirken müssen. Die Seite wirkt meiner Meinung nach sehr modern und aufgeräumt. Von Grunge ist nichts zu sehen. Die große Schriftgröße dürfte die Darstellung der Schrift auch auf schlechteren Monitoren problemlos möglich machen. Interessant ist die Umkehrung der häufig gesehenen Anwendung: Serifenlose Schrift für die Überschrift und Serifenschrift für den Fließtext.

Fazit

Zum Thema Typographie könnt ihr hier noch einige Beiträge erwarten. Das Thema ist sehr komplex. Ihr solltet jetzt Schriften richtig kombinieren können und die verschiedenen Schriftkategorien und ihre Wirkung kennen gelernt haben.

20 Kommentare