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.
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.
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.
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:
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:
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:
*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:
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.
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.
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.
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.
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.
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 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.
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.
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.
André Nitz
22. Mai 2009 um 19:47 UhrSehr schöne Artikel und für Menschen die noch nicht so lange im Web arbeiten ein sehr gut zu lesendes Tutorial wie man mit Schriften umgehen sollte – und wie nicht!
Gleich mal Bookmarken für unsere Azubis 😉
Lennart Prange
22. Mai 2009 um 19:48 UhrDanke 😀 Endlich der erste Kommentar zu diesem Beitrag 😀
André Nitz
22. Mai 2009 um 19:53 UhrIch mag auch immer nicht warten…gerade bei follow Blogs müsste man eigentlich denken das man mit Kommentaren zugebombt wird – aber bei guten Artikeln gibts von mir auch gerne ein Feedback!
Grüße aus Leipzig!
🙂
André Nitzs letzter Beitrag..Radfahrer müssen ab heute durch die Leipziger Fußgängerzone schieben
Marvin
22. Mai 2009 um 20:21 Uhrtatsächlich BArock Antiqua (z.B. Georgia) vergessen, ich glaubs nich 🙂
Marvins letzter Beitrag..Schnipsel, spar dir die Arbeit!
Lennart Prange
22. Mai 2009 um 20:27 UhrHmm, die Kategorie könnte man tatsächlich noch mit aufnehmen.
ben brendel
23. Mai 2009 um 02:22 UhrGutes und anschauliches Aufzeigen zur angenehmen Verwendung von Schriften. Leider muss man aber immer aufpassen, ob die Schrift, die man verwenden möchte, auch tatsächlich weit genug verbreitet ist. Ich musste vor Kurzem feststellen, dass manche Linux Benutzer noch nicht mal Verdana auf Ihrem System installiert hatten. Das ist wohl aber eine Minderheit 🙂
Lennart Prange
23. Mai 2009 um 11:50 UhrJa, natürlich muss man auf die sicheren Schriften achten, aber es ist einfach kurzsichtig, sich deswegen nicht mit dem Thema Schrift zu befassen. Es ist von vielen tatsächlich die Ausrede: “Es gibt nur ein paar sichere Schriften. Ich bin eingeschränkt und muss mich daher nicht mit dem Thema befassen.” Man kann diese Einschränkung mit verschiedenen Technologien umgehen und da wird es in Zukunft wohl noch mehr Möglichkeiten geben.
Ohrflieger
23. Mai 2009 um 16:47 UhrDanke für den hilfreichen Beitrag!
Der Artikel konzentriert sich auf die Wirkung und Verwendung von Schriften, aber vielleicht hättest du noch etwas genauer auf die “Techniken, um die Klippen zu umschiffen” eingehen können. Wenn ich mich nicht irre, gibt es die Möglichkeit, TTF-Fonts vom Server einzubinden?
Sonst gut erklärt und schön an Beispielen belegt!
Lennart Prange
23. Mai 2009 um 17:25 UhrDanke. Das Thema hebe ich mir mal für einen weiteren Beitrag auf 😉 Man muss ja nicht immer alles auf einmal machen.
Daniel
24. Mai 2009 um 16:41 UhrWiedermal ein sehr interessanter Artikel. Mir ist erst jetzt aufgefallen, dass ich mir um Schriften noch nie wirklich Gedanken gemacht habe.
Meine Meinung war immer. Es gibt ja eh nur ein paar Schriften für alle Systeme, wieso sollte man sich da Gedanken machen?
Jetzt werde ich mal ein bisschen genauer auf die richtige Schriftwahl schauen.
Daniels letzter Beitrag..Von Stasi 2.0 bis Zensursula
Lennart Prange
24. Mai 2009 um 16:45 UhrDanke 🙂 Viel Spaß damit und auf eine bessere Schriftwahl in deinen kommenden Designs 🙂
Markus
22. Dezember 2011 um 12:18 UhrHallo! Also erst einmal: sehr detailierter und ausführlicher Artikel, sehr löblich und sauber geschrieben! Also das Thema Schriftart ist – zumindest meiner Ansicht nach – gerade bei sehr präzise gestalteten Webseiten ein nicht zu unterschätzender Faktor, denn wenn man die falsche Schrift auswählt, kann das schon tödlich sein für den Gesamteindruck der Website. Ich nehme eigentlich immer einen Arial Fontstack, da kann man nicht viel falsch machen 😀
JPanther
29. Mai 2009 um 22:31 UhrDas ist ein sehr schöner Artikel. Ich hab einiges dazugelernt. =)
Lennart Prange
29. Mai 2009 um 22:37 UhrFreut mich 🙂 Danke.
webangel
20. November 2009 um 15:55 UhrWow, darüber hab ich mir eigentlich noch nie so sonderlich viel Gedanken gemacht. Werde das mal in Zukunft beobachten. Ich bin bis jetzt auch immer nur von den Standartschriften ausgegangen. Besonders gut fand ich die Zusammenstellung von Überschrift und Text.
Vin
5. Februar 2010 um 15:02 UhrHallo, toller Artikel.. jetzt würde ich mir noch einen zweiten wünschen wo du Möglichkeiten oder Lösungsansätze vorstellst, wie man die besagten Klippen (1. Absatz) umschifft. 🙂
michas-world
26. Juli 2010 um 09:41 UhrSehr interessant und hilfreich, der Artikel. Bin eben am Umgestalten meiner website und das Schrift-Thema ist wirklich nicht zu vernachlässigen. Schaue gerne wieder rein. 🙂
Bärbel Loy
18. Oktober 2010 um 19:03 UhrDer richtige Einsatz der Schriften verringert auch die Absprungsrate von Webseiten, weil solche Texte meistens flüssiger und einfacher gelesen werden können.
Die Möglichkeit Webfonts vom Server zu ziehen erweitert auf jeden Fall die Möglichkeiten des Designers.
Ich finde diesen Beitrag sehr überschaulich und auch sehr informativ.