Typografie, Hierarchie und Lesbarkeit in digitalen Medien

Ein großer Teil des Handwerks von Digital Media dreht sich um etwas, das viele nicht bemerken, wenn es gut gemacht ist: die Typografie. Die Schrift trägt die Botschaft, und eine schlechte typografische Entscheidung kann selbst den besten Inhalt schwer lesbar machen. Deshalb ist Typografie eine Disziplin, die du ebenso sicher beherrschen musst wie Farbwahl und Bildbearbeitung.

Schriftarten werden übergeordnet in Familien eingeteilt, die jeweils ihren eigenen Ausdruck haben. Serifenschriften haben kleine Füßchen am Ende der Buchstabenstriche und wirken klassisch und seriös — sie werden oft für lange Texte im Print verwendet. Serifenlosen Schriften fehlen die Füßchen, sie wirken einfacher und moderner und sind deshalb die verbreitetste Schriftart für Bildschirme. Monospace-Schriften haben bei jedem Zeichen dieselbe Breite und werden typischerweise für Code verwendet. Display-Schriften sind dekorativ gestaltet und funktionieren am besten in großen Überschriften, niemals im Fließtext.

• 01Kerning — der Abstand zwischen zwei bestimmten Buchstaben, so angepasst, dass Paare wie 'AV' oder 'To' nicht zu eng oder zu weit auseinander wirken.
• 02Tracking (Laufweite) — der allgemeine Abstand zwischen allen Buchstaben eines Wortes oder eines Textes, bei Versalien oft etwas vergrößert, um das Lesen zu erleichtern.
• 03Zeilenabstand (Leading) — der Abstand zwischen Textzeilen. Ein zu kleiner Zeilenabstand macht einen Text schwer zu verfolgen; ein zu großer Zeilenabstand zerreißt den Absatz visuell.
• 04x-Höhe — die Höhe der Kleinbuchstaben einer Schrift ohne Ober- oder Unterlänge, zum Beispiel eines kleinen 'x'. Eine große x-Höhe macht eine Schrift auf kleinen Bildschirmen besser lesbar.

Eine visuelle Hierarchie sagt dem Leser, was zuerst, als Nächstes und zuletzt gelesen werden soll. Sie wird typischerweise mit Größe, Schriftstärke (dünn, normal, fett) und Farbe aufgebaut: Eine große, fette Überschrift zieht das Auge zuerst an, eine mittelgroße Unterzeile folgt, und der Fließtext kommt zuletzt. Ohne eine deutliche Hierarchie wird auf der Seite alles gleich wichtig — und wenn alles gleich laut ruft, hört man in Wirklichkeit nichts.

Typografie ist nicht nur Ästhetik — sie ist auch eine Anforderung an die Barrierefreiheit. Nach WCAG (Web Content Accessibility Guidelines) muss normaler Text ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben, während großer Text mit mindestens 3:1 auskommt. Geringer Kontrast, zum Beispiel hellgrauer Text auf weißem Hintergrund, kann in einem Moodboard elegant aussehen, macht den Text aber für viele Nutzer faktisch unlesbar — auch für die ohne Sehbehinderung, wenn sie bei starkem Sonnenlicht auf einen Handybildschirm schauen.

• 01Zu kleine Schrift auf dem Handy — teste das Design immer auf einem echten kleinen Bildschirm, nicht nur auf deinem großen Designmonitor.
• 02Zu große Zeilenlänge — zu breite Textspalten machen es dem Auge schwer, den Anfang der nächsten Zeile zu finden.
• 03Zentrierter Fließtext in langen Abschnitten — wirkt in kleinen Mengen schick, ist aber auf Dauer ermüdend zu lesen.
• 04Nichteinhaltung der Schriftlizenz — eine schöne Schriftart ist unbrauchbar, wenn du sie im fertigen Produkt nicht verwenden darfst.

“Gute Typografie ist unsichtbar — sie tritt zurück, und nur die Botschaft bleibt. Schlechte Typografie ist das Einzige, woran sich der Leser erinnert.”

— Fachliche Betrachtung zur Typografie in Digital Media