Kleines Einmaleins der Typografie im Web! Oder: Welche Schrift passt zu meiner Website?

Gastartikel von Kirsten Schelper – Wer eine Website oder ein Blog ins Leben ruft, muss sich zwangsläufig auch mit dem Thema Typografie befassen. Irgendwie muss der Text ja formatiert werden. Schriftarten gibt es wie Sand am Meer. Arial und Times sind jedem aus der Textverarbeitung vertraut. Aber wer hat jemals etwas von „Univers Light Condensed“ oder „Metroscript Swash“ gehört?

Manche Schriften haben sehr eigenartige Formen

Bei anderen erkennt man kaum einen Unterschied von der einen zur anderen

Die Entscheidung für eine Schrift und der richtige Umgang mit ihr ist keine einfache Aufgabe. Dieses Thema füllt ganze Bücher. Ich möchte mich hier auf ein paar wenige, praktische Tipps beschränken, die jeder einfach umsetzen kann.

In diesem Artikel geht es um Fragen der Gestaltung. Zu den technischen Aspekten, z.B. wie man Google-Fonts in eine Website einbindet, habe ich hier etwas geschrieben.

1. Welche Schrift passt zur Website?

Es kommt zuallerest darauf an, um welches Thema es auf der Website geht. Was ist der Gegenstand der Seite? Und: Wer sind die Leser? Die Zielgruppe ist für die Entscheidung für oder gegen eine Schrift mindestens genau so wichtig wie das Thema der Seite selbst. Auch die Textmenge spielt eine Rolle. Geht es um lange, leseintensive Texte oder besteht der Inhalt im Wesentlichen aus Bildern mit sehr kurzen Bildunterschriften?
Im ersten Fall muss der Fokus ganz klar auf der Lesbarkeit der Schrift liegen. Im zweiten Fall darf die Typografie auch etwas ausgefallener sein. Aber bitte nicht übertreiben.

Die Schlüsselfrage ist also: Worum geht es auf der Website? Stellt sich ein Bio-Hotel vor oder berichtet ein Computerfan über die neuesten Gadgets? Möchte sich ein Shop für Hundefutter präsentieren oder verteilt ein Steuerberater geldwerte Tipps, um neue Mandanten zu gewinnen?

Schauen wir uns ein paar Beispiel an.

Die Schrifen spiegeln das Thema, um das es geht, durch ihre Formensprache wider. Schrift und Aussage passen gut zusammen.

Ordnet man die Schriften anders zu, so ist das Bild nicht ganz so überzeugend.

Der Zusammenhang formt die Aussage.
Eine serifenlose Schrift kann sachlich-kühl wirken, aber auch emotions- und gesichtlos. Eine Serifenschrift ist je nach Kontext altmodisch-konservativ oder seriös und vertrauensbildend. Eine Schreibschrift hat im einen Beispiel etwas Edles und Wertiges, im anderen wirkt sie verstaubt und antiquiert.

Wer sich nicht sicher ist, welche Wirkung seine Lieblings-Schrift hat, sollte sich gezielt Feedback dazu einholen. Die Fragen könnten lauten „Welchen Eindruck macht die Seite auf Dich?“ oder „Wie gut kannst Du dieses und jenes lesen?“
(Bitte nicht fragen „Und, wie gefällt Dir die Schrift so?“)

2. Schriftarten kombinieren

Jetzt wird es spannend. Natürlich kann man eine Website mit einer einzigen Schriftart bestreiten. Man kann aber auch verschiedene Schriften miteinander kombinieren.
Dabei sollte man zwei Fonts auswählen, die sich nicht zu ähnlich sind, die sich optisch deutlich vorneinander unterscheiden. Eine sichere Bank ist die Kombination von einer serifenlosen Schrift mit einer Serifenschrift. Hier ist der Kontrast schon dadurch gegeben, dass die Buchstaben unterschiedlich gestaltet sind (eben mit und ohne Serifen – das sind die kleinen „Füßchen“ an den vertikalen Strichen).

Faustregel: Nach Möglichkeit nicht mehr als zwei Schriftarten zusammenspannen. Werden es mehr, steigt das Risiko, ein gestalterisches Chaos anzurichten. Weniger ist mehr.

3. Kontraste

Schriftgrößen sollten deutlich abgestuft sein. Bei einem Wort, das nur ein oder zwei Pixel größer ist als sein Nachbar, ist der Größenunterschied nicht klar wahrnehmbar. Es sieht allenfalls seltsam aus. Auch der Abstand zwischen normal und fett sollte deutlich sein. Ist die eine Schrift nur ein kleines bisschen fetter als die andere, wirkt auch das irritierend.

4. Hervorhebungen

Was tun mit Wörten oder Sätzen, die besonders betont werden sollen? Das Stilmittel aus der Schreibmaschinenzeit, die Unterstreichung, ist out. Es gibt typografische Mittel, die wesentlich besser geeignet sind, einen Text „auszuzeichnen“, wie es im Typografenlatein heisst.
a. kursiv oder fett
b. Farbe
c. Attribut „blockquote“
d. Akzentuierung durch ein Symbol (background-image)

5. Lesbarkeit

Über die Lesbarkeit eines Textes entscheiden eine ganze Reihe von Kriterien.

• Der Zeilenabstand
  Der Abstand zwischen den Zeilen muss ausreichend groß sein.
  In einem ausgedruckten Text auf Papier reicht das 1,2-fache der Schriftgröße aus, im Web sollt es das 1,3 bis 1,4-fache sein.
• Die Schriftgrößen
  Der Fließtext sollte nicht zu klein sein. Eher ein bisschen größer planen, dann muss sich der Leser nicht anstrengen. Mac-Besitzer sehen Schriften tendenziell etwas kleiner als PC-Nutzer.
• Die Zeilenbreite
  Die Breite der Zeilen sollte bei ca. 80 Zeichen liegen. Bei längeren Zeilen hat das Auge Probleme, die Zeile zu verfolgen. Das macht das Lesen anstrengend.
• Nieder mit dem Blocksatz!
  Beim Blocksatz werden alle Zeilen auf die gleiche Breite ausgetrieben.
  Im Satzspiegel einer Tageszeitung mit sehr schmalen Spalten ist Blocksatz sinnvoll und sieht auch gut aus. In allen anderen Fällen ist er eine typografische Katastrophe.
  Gerade Webbrowser, die keine Silbentrennung haben, können Blocksatz praktisch nicht darstellen. Es entstehen hässliche Löcher im Text. Blocksatz in Kombination mit langen Zeilen ist zudem schwer lesbar. Ganz abgesehen vom verheerenden optischen Eindruck.
  
• Die Schriftart
  Die Form der Schrift ist natürlich ein ganz wichtiger Faktor bei der Lesbarkeit. Eine sehr verschnörkelte Schrift ist schwerer zu entziffern als die gute, alte Arial.

Auch wenn die Besucher den Effekt nicht bewußt wahrnehmen, die Form der Schrift hat einen großen Einfluss auf die Reaktion und das Empfinden der Leser. Ist ein Text in einer schwer lesbaren Schrift gesetzt, so nehmen die Leser automatisch an, dass die Information dahinter anspruchsvoll oder schwierig ist. Die Reaktion: Sie lesen nicht weiter. Geht es um eine konkrete Entscheidung (Call-To-Action-Button) zögern sie und verschieben ihre Entscheidung.
In einer Studie haben Wissenschaftler diese Abläufe untersucht.
Für die Typografie im Web bedeutet das, dass man auf jeden Fall auf der lesbaren Seite bleiben sollte. Leser, die ungeduldig werden, sind in Nullkommanichts weg. Was ich auf der Speisekarte im teuren Restaurant geduldig entziffere, vertreibt mich auf einer Website innerhalb weniger Sekunden.

5. Schrift und Farbe

Mit wenigen Klicks kann man Text und Hintergrund farbig machen. Farben sollten aber niemals nur Dekoration sein, sondern immer einem Zweck dienen, also zur Nutzerführung eingesetzt werden.
So sollten beispielsweise alle Links auf der Seite eine einheitliche Farbe haben. Dann weiß der Nutzer intuitiv, dass er ein Element vor sich hat, das er anklicken kann.
Das bedeutet aber auch, dass Farbe sparsam eingesetzt werden muss. Ist alles bunt, fällt auch die knalligste Linkfarbe nicht mehr auf.
Auch bei der Kombination von Hintergrundfarbe und Schriftfarbe sollte immer die Lesbarkeit im Vordergrund stehen. Ein frisches Apfelgrün kann sich auf einem anderen Rechner unter einem anderen Betriebssystem schnell in ein Giftgrün verwandeln. Und die die blaue Schrift auf dunklem Grund ist vielleicht auf einem anderen Monitor gar nicht mehr erkennbar.

Auch die Darstellung der Fonts, das so genannte Rendering, differiert von Browser zu Browser. Gerade Webfonts, die man über @font-face einbindet, werden sehr unterschiedlich dargestellt. Auch hier muss man geduldig und ausführlich testen.

Zusammenfassung

• Die Schrift muss zum Thema passen: Auf den Charakter der Schrift schauen, Feedback einholen
• Maximal zwei Schriftarten (z.B. Georgia und Arial) miteinander kombinieren
• Auf ausreichend große Kontraste achten (groß/klein, fett/mager)
• Hervorhebungen in kursiver oder fetter Schrift (keine Unterstreichungen)
• Zeilenlänge: Maximal 80 Zeichen
• Zeilenabstand: Das 1,3 bis 1,4-fache der Schriftgröße
• Vergesst Blocksatz!
• Sparsam mit Farbe umgehen und bewußt Akzente setzen
• Schriften auf verschiedenen Rechnern und in verschiedenen Browsern testen

Über den Autor

Kirsten Schelper ist Kommunikations-Designerin aus München. Sie entwickelt Logos genauso gern wie WordPress-Themes und schreibt zusammen mit Kollegen im Blog Die Netzialisten.

Alle wichtigen Links:

Netzialisten: Blog – RSS
Kisten Schelper: Website –  Twitter