Text, Text, Text … aber keine Textwüste
Wenn wir über Kommunikation im Webdesign-Kontext sprechen, meinen wir normalerweise Text. Typografie spielt in diesem Prozess eine entscheidende Rolle, denn über 95 % der Informationen im Web werden in schriftlicher Form vermittelt. Eine gute Typografie macht das Lesen leicht, während schlechte Typografie die Benutzer irritiert, verwirrt und im schlechtesten Fall von Ihrer Webseite vertreibt. Die Wirkung des Textkörpers soll den Benutzern dienen und nicht der Selbstverwirklichung des Webdesigners oder des Programmierers. Eine optimierte Typografie erleichtert die Lesbarkeit, die Zugänglichkeit und auch die Benutzerfreundlichkeit einer Webseite. Ebenso wird die grafische Ausgewogenheit des Layouts erhöht. Mit anderen Worten: Durch die Optimierung Ihrer Typografie wird auch Ihre Benutzeroberfläche optimiert; sie motiviert den Betrachter zu einer höheren Verweildauer auf Ihrer Seite. Im Folgenden wollen wir Ihnen einige Tipps geben, mit denen Sie die Lesbarkeit und damit Erfassbarkeit Ihrer Textinhalte verbessern können.
Begrenzen Sie die Anzahl der verwendeten Schriftarten auf ein Minimum
Sie brauchen nicht den Umfang Ihrer Schriftensammlung zu präsentieren. Durch die Verwendung von mehr als 3 verschiedenen Schriftarten wirkt eine Website unstrukturiert und unprofessionell. Zu viele Schriftgrößen und -stile gleichzeitig können jedes Layout ruinieren. Weniger ist hier mehr. Um ein Schriftenchaos zu vermeiden, beschränken Sie die Anzahl der Schriftfamilien auf ein Minimum. Zwei reichen völlig aus, oftmals tut es auch eine Schriftfamilie. Halten Sie dies auf der gesamten Website konsistent. Wenn Sie mehr als eine Schriftart verwenden, stellen Sie sicher, dass sich die Schriftfamilien basierend auf ihrer Zeichenbreite ergänzen. Nehmen Sie zum Beispiel für eine Schriftkombination die Familien Georgia und Verdana, die ähnliche Laufweiten aufweisen, was eine harmonische Paarung ergibt. Vergleichen Sie dies zum Beispiel mit der Paarung von Baskerville und Impact, bei der das hohe Gewicht von Impact die Serife von Baskerville deutlich aus dem Gleichgewicht bringt. Stellen Sie sicher, dass die Schriftfamilien aufgrund ihrer Zeichenbreite harmonieren.
Verwenden Sie Standardschriftarten
Die Dienste zum Einbetten von Schriftarten (wie Google Web Fonts oder Typekit) bieten viele interessante Schriftarten, die Ihrem Design etwas Neues, Frisches und Unerwartetes verleihen können. Sie sind auch sehr einfach zu bedienen. Nehmen Sie zum Beispiel Google: Wählen Sie eine Schriftart wie Open Sans. Generieren Sie den Code und fügen Sie ihn in den „Head“ Ihres HTML-Dokuments ein – fertig! Dabei kann so gut wie nichts schiefgehen. Tatsächlich hat dieser Ansatz einen praktischen Hintergrund: Viele Benutzer sind mit Standardschriftarten besser vertraut und können sie daher schneller lesen! Sofern Ihre Website keine zwingenden Anforderungen an eine benutzerdefinierte Schriftart stellt, zum Beispiel für Branding-Zwecke oder zum Einhalten einer bestimmten Corporate Identity, ist es in der Regel am besten, die Systemschriftarten beizubehalten. Der sicherste Weg ist es, Systemschriften wie Arial, Calibri, Trebuchet oder ähnliche zu verwenden. Denken Sie daran, dass eine gute Typografie den Leser auf den Inhalt und nicht auf den Schrifttyp selbst aufmerksam machen soll.
Begrenzen Sie die Zeilenlänge
Die richtige Anzahl von Zeichen in jeder Zeile des Textkörpers ist der Schlüssel zur Lesbarkeit Ihres Textes. Es sollte nicht Ihr Design oder der Satz des Mediengestalters sein, was die Breite Ihres Textes vorgibt, sondern es sollte auch eine Frage der Lesbarkeit sein. Beachten Sie die folgende Faustregel zur Lesbarkeit und Zeilenlänge: Ungefähr 60 Zeichen pro Zeile sind optimal, wenn Sie ein gutes Leseerlebnis erreichen wollen. Wenn eine Zeile zu kurz ist, muss das Auge zu oft „springen“, um zum nächsten Wort zu wechseln, wodurch der Rhythmus des Lesers gestört und das Auge ermüdet wird. Wenn eine Textzeile dagegen zu lang ist, fällt es dem Leser schwer, den Text zu verarbeiten und im Kontext zu bleiben. Bei Mobilgeräten sollten Sie 30 bis 40 Zeichen pro Zeile einhalten. Deshalb: Beim Druck und der Darstellung auf dem Desktop-Monitor verwenden Sie 50 bis 75 Zeichen pro Zeile, während Sie bei Programmierungen für die Darstellung auf Mobilgeräten 30 bis 40 Zeichen verwenden. Im Webdesign können Sie eine optimale Anzahl von Zeichen pro Zeile einhalten, indem Sie die Breite Ihrer Textblöcke durch die Pixelanzahl begrenzen.
Wählen Sie Fonts, die in verschiedenen Größen gut dargestellt werden
Benutzer greifen von Geräten mit unterschiedlichen Bildschirmgrößen und Auflösungen auf Ihre Website zu. Die meisten Benutzeroberflächen erfordern Textelemente in verschiedenen Größen (Schaltflächen, Feldbezeichnungen, Abschnittsüberschriften und so weiter). Es ist wichtig, eine Schriftart zu wählen, die in mehreren Größen und Stärken gut darstellbar ist, um die Lesbarkeit und Benutzerfreundlichkeit in jeder Größe zu gewährleisten. Stellen Sie sicher, dass die ausgewählte Schrift auch auf kleineren Smartphone-Displays lesbar ist. Vermeiden Sie Zeichensätze mit Kursivschriften wie Vivaldi. Obwohl sie schön anzuschauen sind, sind sie schwer zu lesen. Die Vivaldi-Schrift ist auf einem kleinen Display kaum lesbar!
Verwenden Sie Schriftarten mit unterscheidbaren Buchstaben
Bei vielen Schriftarten ist es leider einfach, ähnliche Buchstabenformen zu verwechseln, insbesondere mit „i“ und „L“ und mit schlechtem Buchstabenabstand, zum Beispiel, wenn ein „r“ und „n“ wie ein „m“ aussieht. Die Schrift muss über saubere Ligaturen verfügen. Stellen Sie daher bei der Auswahl Ihrer Schriftart sicher, dass Sie in verschiedenen Kontexten überprüfen, ob sie für Ihre Benutzer kein Problem darstellen könnte.
Vermeiden Sie Versalien
Alle Versalien (Großbuchstaben) sind in Kontexten in Ordnung, in denen kein wirkliches Lesen erforderlich ist (z. B. Akronyme oder Logos). Wenn Ihr Text jedoch ein Lesen erfordert, zwingen Sie Ihre Benutzer nicht, alles in Großbuchstaben lesen zu müssen. Die Lesegeschwindigkeit im Vergleich zu Text in Kleinbuchstaben sinkt erheblich, was zur verminderten Aufnahmefähigkeit und auch zur Ermüdung des Betrachters führt.
Geizen Sie nicht mit dem Zeilenabstand – gute Abstände erleichtern die Lesbarkeit
In der Textgestaltung gibt es einen speziellen Begriff für den Abstand zwischen zwei Textzeilen –führende Höhe oder Zeilenhöhe. Durch Erhöhen des Abstands der Zeilen vergrößern Sie den vertikalen Leerraum zwischen den Textzeilen und verbessern im Allgemeinen die Lesbarkeit des Textkörpers. In der Regel sollte der Zeilenabstand für eine gute Lesbarkeit etwa 30 % über der Zeichenhöhe liegen. Auch die richtige Verwendung von Leerzeichen zwischen Absätzen erhöht das Textverständnis um bis zu 20 %. Durch richtig gesetzte Leerzeichen stellen Sie Ihren Benutzern eine verdauliche Menge an Inhalten zur Verfügung und erhöhen wieder die Lesbarkeit von Texten.
Richtige Farbkontraste erleichtern das Lesen
Das Auge muss Text klar vom Hintergrund trennen können, um ihn problemlos lesen zu können. Verwenden Sie nicht die gleichen oder ähnliche Farben für Text und Hintergrund. Je klarer sich der Text vom Hintergrund trennt, desto schneller können Benutzer ihn lesen. Als Faustregel gilt: Kleiner Text sollte ein Kontrastverhältnis von mindestens 4,5 : 1 zum Hintergrund haben. Großer Text (ab 14 pt. Fettdruck/18 pt. Normaldruck) sollte vor dem Hintergrund ein Kontrastverhältnis von mindestens 3 : 1 aufweisen. Sobald Sie Ihre Farbauswahl getroffen haben, sollten Sie sie auf den verschiedenen Geräten unbedingt mit echten Benutzern testen. Wenn einer der Tester Probleme beim Lesen Ihres Textes hat, können Sie sicher sein, dass andere Benutzer genau das gleiche Problem haben werden.
Rot und/oder Grün – keine gute Idee!
Die Rot-Grün-Sehschwäche ist eine häufige Erkrankung, die insbesondere Männer betrifft (8 % der Männer sind farbenblind). Verwenden Sie zur Unterscheidung wichtiger Informationen neben der Farbe auch andere Hinweise. Rote und grüne Textelemente sind nicht nur wegen der möglicherweise eingeschränkten Wahrnehmung ungünstig, sie verleihen Ihrem Webdesign in den meisten Fällen auch einen „billigen“ Charakter.
Blinkender Text – bitte nur in Polizeifahrzeugen
Die Zeit der fliegenden Herzchen und blinkenden Laufschriften sind schon lange vorbei. Textinhalte, die blinken, flackern, laufen oder sich anderweitig über den Bildschirm bewegen, vermitteln keine Botschaft, sondern lenken nur ab und können auch zur Verwirrung führen. Auch hier ist weniger mehr. Mit solchen technischen Spielereien können gute Webseiten ruiniert werden, im schlimmsten Fall sind die Benutzer genervt. Nebenher kann das auch die Ladezeit und damit die Performance einer Webseite negativ beeinflussen. Noch mal: Vermeiden Sie blinkenden Text! Vermeiden Sie fliegende Buchstaben! Vermeiden Sie bewegte Inhalte!
Fazit
Typografische Gestaltung ist eine großartige Sache. Durch die Auswahl der richtigen Textgestaltung wird Ihre Website gut lesbar, attraktiv und für die Benutzer gut erfassbar. Andererseits lenken schlechte Typografie-Entscheidungen ab und können zur Verwirrung beitragen. Auch das Erscheinungsbild der gesamten Webseite kann unter einer schlechten Typografie-Gestaltung leiden. Bleiben Sie im Textkörper konsistent und wechseln Sie nicht in den Schriftstilen hin und her, legen Sie grundlegend fest, welches Format Überschriften, Fließtext und Bildunterschriften Ihrer Seite haben sollen. Die Typografie muss unbedingt lesbar und leicht erfassbar für die Benutzer sein. Denken Sie daran, dass Sie Informationen transportieren wollen und Ihre Seitenbesucher nicht Ihre Schriftensammlung begutachten möchten. Lassen Sie Ihre Typografie-Entscheidungen von verschiedenen Benutzern auf verschiedenen Geräten testen. Sorgen Sie dafür, dass die Performance Ihrer Seite nicht durch überflüssige Spielereien leidet.
