Bei der Darstellung und Gestaltung von Texten auf HTML-basierten Websites gelten andere Regeln als bei Printproduktionen. So ist das Angebot klein und auf wenige verwendbare Schriftarten limitiert. Stefan Haas zeigt auf, worauf ihr bei der Auswahl und Verwendung einer Schrift achten solltet und gibt hilfreiche Entscheidungs-Tipps für euer Web-Projekt.
Schriftart finden & auswählen
Bevor ihr euch auf die Suche nach der richtigen Schriftart begebt, solltet ihr euch grundlegende Gedanken zu den drei “W”-Fragen machen:
- Was soll gelesen werden?
- Wer soll das lesen?
- Wie soll gelesen werden?
Werdet euch darüber klar, welche Zielgruppen ihr ansprechen möchtet und geht auf deren Bedürfnisse und Anforderungen (z.B. Usability) ein. So sollte nicht nur die Schriftart, sondern auch die Schriftgröße, der Schnitt und der Kontrast zum Hintergrund eine maßgebliche Rolle bei der Entscheidung spielen. Online-Hilfen wie www.linotype.com können effektive Hilfestellung geben und bieten hervorragende Muster, sowie Simulationsmöglichkeiten verschiedenster Schriftarten an.
Tipp: Wer eine Schriftart aufspüren möchte, findet garantiert bei www.MyFonts.com Hilfe.
Schriftartverbreitung & Kompatibilität
Über 100.000 vorwiegend deutschsprachige Webseiten wurden auf Schriftarten getestet und deren Verbreitung auf den Betriebssystemen ermittelt. Den wichtigsten Teil der daraus resultierenden Statistik seht ihr in folgender Abbildung.
Ein Web-Browser kann nur solche Schriftarten umsetzen und darstellen, die auf dem System des Betrachters installiert sind. Bei der Vielzahl verschiedenster Betriebssysteme wie Windows, MacOS, Linux … aber auch immer wichtiger werdenden mobilen Systemen (Symbian, Android, Windows mobile, iPhone …) sollte dringend auf Kompatibilität geachtet werden.
Tipp: Verwendet plattformübergreifende und kompatible Schriftarten.
Sollten Schriftarten außerhalb des Standards verwendet werden, besteht die Gefahr, dass Besucher eurer Webseite eine alternative Schriftart vom Browser umgesetzt bekommen. Dies kann zur Folge haben, dass euer Layout unter Umständen fehlerhaft oder falsch dargestellt wird. Von der Möglichkeit, Texte als Grafik darzustellen, wird dringend abgeraten, da Suchmaschinen (Positionierung in den SERPs) und Screenreader nur geschriebenen Text auslesen und bewerten können.
Typografische Grundlagen
Von ganz entscheidender Bedeutung ist die Definition von Headlines (Überschriften) und Fließtext. Das Gesamtbild sollte eine klare und übersichtliche Struktur ergeben und in kleinere Absätze mit Zwischenüberschriften untergliedert werden.
Auf folgende Punkte sollte eure Aufmerksamkeit ebenfalls gerichtet sein:
- Serifenlose Schriftarten für eine bessere Lesbarkeit verwenden.
- Nicht mehr als zwei verschiedene Schriftarten einsetzen. Die Kombination ähnlicher oder mehrerer Schriftarten auf einer Seite (z.B. Arial und Helvetica) erzeugt Disharmonie und können den Betrachter leicht verwirren.
Besser: Verwendung verschiedener Schriftschnitte wie z.B. kursiv oder bold. - Texthervorhebungen nicht unterstreichen, da dies von den meisten Browsern aber auch Usern als Verlinkung wahrgenommen wird. Missverständnisse können zu einer geminderten Betrachtungsweise führen.
Tipp: Texthervorhebungen können alternativ mit einem anderen Schriftschnitt oder anderer Farbe darstellt werden.
Schriftgröße
Die richtige Schriftgröße gibt es im Prinzip nicht, da die eingestellte Monitor-Auflösung, der Schriftschnitt und das Sehvermögen des Betrachters zu große und nicht beeinflussbare Variablen für den Webdesigner darstellen. Um dennoch eine gute Lesbarkeit zu gewährleisten, empfiehlt es sich, Schriftgrößen dynamisch zu gestalten (em oder %).
Schriftfarbe & Kontrast
Farbkontraste wie hell-/dunkel-, bunt-/unbunt- und der Komplementär-Kontrast bieten ebenso wie das additive Farbsystem am Monitor mehr als genügend Gesprächsstoff und Input, der in diesem Rahmen kaum abzuhandeln wäre. Essentiell sollte darauf geachtet werden, dass der Kontrast von Text zu Hintergrund so groß wie möglich gewählt wird. Zudem solltet ihr mit Textpassagen auf Hintergrundgrafiken äußerst vorsichtig sein, da diese sehr schnell unleserlich und unruhig wirken und evtl. sogar im Gesamtbild untergehen können.
Hinweise zur Darstellung
Unter zahlreichen Möglichkeiten zur Auswahl von Schriftfamilien haben sich folgende Zusammenstellungen als geeignet erwiesen und sich im Markt durchgesetzt:
Serifenlose Schriften:
Arial, Helvetica, sans-serif
Verdana, Arial, Helvetica, sans-serif
Trebuchet MS, Helvetica, sans-serif
Lucida Sans Unicode, Lucida Grande, sans-serif
Serifenbetonte Schriften:
Times New Roman, Times, serif
Georgia, Times New Roman, Times, serif
Schriften mit fester Zeichenbreite:
Courier New, Courier, monospace
Generische Schrift-Typen kurz erläutert :
“Serif” Merkmale:
- typografscher Terminus für Endstriche, An- und Abstriche eines lateinischen Buchstabens
- Proportionalschriften (d.h. ein “I” nimmt weniger Platz als ein “W” ein
- zulaufende oder glockenförmige Enden
“sans-serif” Merkmale:
- Strichenden ohne Verzierung (Querstriche)
- Proportionalschriften
“cursive” Merkmale:
- schräg gestellt
- Zeichen sind teilweise oder ganz miteinander verbunden
- handschriftliche Darstellung
Anmerkungen
Abschließend alle prägnanten Punkte zusammengefasst:
- Zielgruppe analysieren
- W-Fragen (WER, WIE, WAS) beantworten und definieren
- Schriftart, -Schnitt, -Größe und -Farbe für Headlines und Fließtext bestimmen
- Text-Hintergrund mit ausreichend Kontrast zur Schrift auswählen
Abschließend erfolgt die Weiterverarbeitung in HTML- und CSS-Dateien. Natürlich führen viele Wege nach Rom und es gibt sicherlich weitere Möglichkeiten und Richtlinien zur Schriftartsuche. Dieser Artikel beschränkt sich lediglich auf die wesentlichen Punkte und soll als kleiner Leitfaden verstanden werden.
