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

thumb

Foto von jmvEinige 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.

20 Kommentare

  1. André Nitz
    22. Mai 2009 um 19:47 Uhr

    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
    22. Mai 2009 um 20:21 Uhr

    tatsä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 Uhr

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

  3. ben brendel
    23. Mai 2009 um 02:22 Uhr

    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
      23. Mai 2009 um 11:50 Uhr

      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
    23. Mai 2009 um 16:47 Uhr

    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
      23. Mai 2009 um 17:25 Uhr

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

  5. Daniel
    24. Mai 2009 um 16:41 Uhr

    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
      24. Mai 2009 um 16:45 Uhr

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

    • Markus
      22. Dezember 2011 um 12:18 Uhr

      Hallo! 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 😀

  6. JPanther
    29. Mai 2009 um 22:31 Uhr

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

  7. webangel
    20. November 2009 um 15:55 Uhr

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

  8. Vin
    5. Februar 2010 um 15:02 Uhr

    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. 🙂

  9. michas-world
    26. Juli 2010 um 09:41 Uhr

    Sehr 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. 🙂

  10. Bärbel Loy
    18. Oktober 2010 um 19:03 Uhr

    Der 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.

Trackbacks/Pingbacks