22
Mai

Schriften und Webdesign: Beispiele und Tipps

thumb

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

renaissance

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

klassizistisch

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

linear

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,

marken_falsch

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.

marken_richtig

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.

kombi_richtig

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

kombi_richtig2

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.

kombi_richtig3

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.

kombi_falsch

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.

Abstimmen!

Dir gefällt dieser Beitrag?

Wir würden uns sehr über deine Unterstützung freuen!

16 Kommentare

  1. André Nitz sagte am 22. Mai 2009

    Sehr 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 ;-)

  2. Marvin sagte am 22. Mai 2009

    tatsächlich BArock Antiqua (z.B. Georgia) vergessen, ich glaubs nich :)
    Marvins letzter Beitrag..Schnipsel, spar dir die Arbeit!

    • Lennart Prange sagte am 22. Mai 2009

      Hmm, die Kategorie könnte man tatsächlich noch mit aufnehmen.

  3. ben brendel sagte am 23. Mai 2009

    Gutes 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 sagte am 23. Mai 2009

      Ja, 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.

  4. Ohrflieger sagte am 23. Mai 2009

    Danke 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 sagte am 23. Mai 2009

      Danke. Das Thema hebe ich mir mal für einen weiteren Beitrag auf ;) Man muss ja nicht immer alles auf einmal machen.

  5. Daniel sagte am 24. Mai 2009

    Wiedermal 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 sagte am 24. Mai 2009

      Danke :) Viel Spaß damit und auf eine bessere Schriftwahl in deinen kommenden Designs :)

  6. JPanther sagte am 29. Mai 2009

    Das ist ein sehr schöner Artikel. Ich hab einiges dazugelernt. =)

  7. [...] deshalb ist es ganz praktisch, dass ich kürzlich einen Artikel zu dem Thema geschrieben habe. Schriften und Webdesign: Tipps und Beispiele. Dabei geht es zwar um Webdesign, aber die Regeln lassen sich auch auf Visitenkarten [...]

  8. Vin sagte am 5. Februar 2010

    Hallo, 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. :)

Hinterlasse einen Kommentar