Die Anforderungen an ein gutes Text-Layout sind überall gleich und stellen in den digitalen Medien doch eine ganz eigene Herausforderung für Designer dar. Im Zentrum stehen erst einmal die Lesbarkeit und der Gesamteindruck. Während das im Printsektor optimal geplant, abgestimmt und genau so umgesetzt werden kann, muss Text im digitalen Bereich zusätzlich auf diversen Devices, in verschiedensten Auflösungen und Kontexten gut aussehen. Dazu braucht es eine ganz neue Herangehensweise an die Typografie.

So manche allgemein anerkannte Regel der Typografie hat sich natürlich auch im Internet durchsetzen können. So sollten Überschriften auch hier hierarchisch in verschiedenen Größenordnungen dargestellt werden, sodass klar ist, in welcher Reihenfolge sie gelesen werden müssen. Und dass nicht zu viele Schriftarten miteinander gemischt werden sollten, ergibt sich wohl ebenfalls von selbst. Dabei ist es dann doch egal, um welches Medium es geht.

Die Theorie der Web-Typografie…

Bei der Frage nach der Textausrichtung wird es jedoch bereits komplizierter. Während im Print ein händisches Einrücken für die optimale Zeilenbreite eine gute Idee ist, schaden solche selbst gesetzten Zeilenumbrüche oder Laufweiten im digitalen Raum eher als dass sie nutzen. Hier ist es wichtiger, dass der Text auf allen Devices auf den Bildschirm passt, als dass die Abstände zwischen den Worten immer gestaltet sind.

Doch nicht nur in dieser Hinsicht stellt der Schriftsatz im digitalen Raum eine Herausforderung dar. So muss der Kontrast zwischen Hintergrund- und Schriftfarbe groß genug sein; auch eine Mindestgröße von 16 CSS-Pixeln für den Textkörper ist empfehlenswert. Der Abstand zwischen zwei Zeilen sollte bei mindesten 1,2 em liegen. Aber natürlich sind das alles nur Richtwerte. Eine gute Lesbarkeit ist immer auch vom jeweiligen Projekt abhängig und am Besten überprüfbar, indem sie tatsächlich ausprobiert wird.

…und ihre Bedeutung

Eine Studie am MIT hat aber gezeigt, dass das Textlayout die Bewertung des Inhalts durch den Leser beeinflusst. Ist eine Seite schlecht lesbar, ruft dies wohl negative Emotionen hervor, sodass der Nutzer weniger geneigt ist, weiterhin mit der Seite zu interagieren. Leicht lesbare Texte sind also ein Must Have im Webdesign.

Auch die Schrift an sich, also der verwendete Font, kann dabei in verschiedener Hinsicht zum Stolperstein werden. Die Wahl der richtigen Schriftart ist nämlich durchaus eine Wissenschaft für sich. Das Prinzip dahinter kennt wohl jeder aus dem Alltag: Wer schon einmal ein wichtiges Memo in Comic Sans bekommen hat, weiß, wie schwer es sein kann, den Inhalt dennoch ernst zu nehmen. Auch das kann im Webdesign also zu Problemen führen.

Eine neue Typografie fürs Web

Der passende Font muss dann aber auch noch geladen werden. Und hier kommen nun wirklich die größten Unterschiede zwischen Web- und Printdesign zu Tage: Im Web kann sich kein Designer darauf verlassen, dass ein Font jenseits der Systemsschriften korrekt angezeigt wird. Und selbst wenn der Browser die gewählte Schriftart unterstützt, brauch es Zeit, bis sie komplett geladen wurde. Aus diesem Grund hat sich Robin Rendle einige Gedanken dazu gemacht, wie Webtechnologien und Typografie sich besser miteinander vereinbaren lassen.

Vorschlag 1: Inhalt über Design

„We must prioritise the text over the font, or semantics over style.“
– Robin Rendle

Sein erster Vorschlag zur Verbesserung der aktuell problematischen Situation ist dabei wohl auch gleich der revolutionärste im Sinne der klassischen Designprinzipien. Rendle schlägt vor, künftig den Text inhaltlich höher zu werten als sein Layout. Während im Printdesign Text und Font nämlich das gleiche bezeichnen, kann diese Annahme für das Web nicht so leicht aufrecht erhalten werden. Die vorgenannten Probleme mit dem Ladeverhalten und der Darstellung führen online zu einer klaren Trennung von Inhalt und Layout.

Um das Problem der Ladezeiten zu lösen, wird Text bislang entweder zuerst in einer Systemschrift angezeigt und neu formatiert, sobald die Schriftart komplett heruntergeladen wurde, oder der Text verborgen, bis die Schriftart verfügbar ist. Keine der beiden Optionen stellt aber eine optimale Lösung dar. Auf dem ersten Weg kann sich der Scroll-Punkt verschieben, an dem sich der Nutzer gerade befindet; bei Option zwei müssen Wartezeiten in Kauf genommen werden. Nutzerfreundlich sind beide Methoden daher nur bedingt.

Neue Wege

Darum regt Rendle an, den Vorschlag von Zach Leatherman einmal genauer zu betrachten. Dieser stellt eine Möglichkeit vor, die benötigte Schriftart mehrstufig laden zu lassen. Dabei soll zuerst nur der Teil der Schriftart geladen werden, der nur aus Groß- und Kleinbuchstaben besteht. Das geht schnell, sodass der Text quasi sofort in der richtigen Schrift angezeigt werden kann. Darauf folgen Interpunktion, Sonderzeichen und Texthervorhebungen. Diese werden zuvor vom Browser erzeugt. Dabei kommt es dann zwar auch zu Umbrüchen in der Darstellung, diese sind jedoch nicht so groß wie bei der bislang verwendeten Methode.

Eine weitere Alternative wurde außerdem von Andrew Johnson vorgelegt. Seinem Vorschlag folgend, sollen Schriftarten künftig im Browser modifiziert werden. Das würde auch der Responsiveness von Schriftarten entgegenkommen. Statt nämlich jede Schriftgröße als einzelnen Fontsatz zu laden, würde so die benötigte Größe einfach durch den Browser selbst erzeugt werden.

Vorschlag 2: Tools für Best Pracatices

 „We ought to use and/or make tools that reveal the consequences of typographic decisions.“
– Robin Rendle

Ein guter Schriftsatz im Web kann über den Erfolg und Misserfolg eines Angebots entscheiden; entsprechend wichtig ist es, über die Darstellung einer typografischen Entscheidung im Bilde zu sein. Dafür können natürlich klassische Tools wie Photoshop oder InDesign zum Einsatz kommen, die virtuelle Realität kann hier jedoch nur bedingt abgebildet werden. Stattdessen schlägt Rendle vor, moderne Tools zu entwickeln und zu verwenden, die über deutlich vielfältigere Möglichkeiten verfügen, um verschiedene Schriftarten und Effekte zu testen.

Dazu stehen auch bereits jede Menge Optionen zur Verfügung. So erlaubt das Tool Typecast es nicht nur, verschiedene Schriften in diversen Größen und Zeilenabständen darzustellen, hier können darüber hinaus auch Breakpoints gesetzt, sowie Hintergründe und Paddings getestet werden. Angemeldete Nutzer können sogar ganze Styleguides erstellen und exportieren, bis hin zu einem Markup des gewählten Styles. Über CSSTypeset stehen weniger Optionen zur Verfügung, dafür kann hier aber bereits ohne Login ein CSS-Code für die gewählte Text-Konfiguration exportiert werden.

Vorschlag 3: Schwachstellen identifizieren

„We should acknowledge that web typography is only as strong as its weakest point.“
– Robin Rendle

Ein einzelner zu spezifischer Selektor kann ein ganzes CSS-Design zerstören. Einmal gesetzt, kann die Spezifikation nicht so einfach überschrieben werden, sobald er aus den Augen verloren wurde, kann es schwer fallen, das Problem überhaupt noch wiederzufinden. Solche strukturellen Schwächen im Code einer Website können allerdings weitreichende Folgen haben und zu großen Problemen mit der Darstellung eines Designs führen, wie Rendle feststellt.

In anderen Fällen ist es außerdem notwendig, einen Weg um bestimmte Limitationen des klassischen CSS-Layouts herum zu finden. Denn auch dadurch werden die Möglichkeiten eines verlässlichen und ansprechenden Webdesigns eingeschränkt. Rendle benennt hier die schon unter Vorschlag 1 angeführte Manipulation des Fonts durch den Browser als Lösungsweg, um dem Dilemma der fehlenden CSS-Optionen zu entgehen. So könnte die Lösung in einem neuen Font-Format bestehen, dass ausdrücklich auf variable Darstellungen im Kontext des Responsive Designs ausgelegt ist. Ein Buchstabensatz, der im Browser umgeformt werden kann,  könnte so die Performance von Websites deutlich erhöhen.

Die Trends der Web-Typografie

Aber wie sieht denn nun die beste Typografie für Web-Projekte aus? Allgemeingültige Regeln dafür, wie ein guter Schriftsatz auszusehen hat, existieren nicht. Alle Vorschläge und Vorstellungen, die im Web an der einen oder anderen Stelle präsentiert werden, treffen auf bestimmte Kontexte zu, auf andere jedoch nicht. Während Rendle sich dem technischen Aspekt der Umsetzbarkeit einer guten Typografie widmet, gibt es aber natürlich auch noch eine andere Seite des Themas: Trends und Strömungen in der Designszene.

Das Flat Design sorgt gegenwärtig beispielsweise dafür, dass immer auffälligere typografische Experimente ins Web gestellt werden – wo die Verwendung von Grafiken nämlich auf ein Minimum beschränkt wird, bleibt Raum für anderes. Extrem große Schriftblöcke können hier als Eyecatcher verwendet werden, auch besonders künstlerische Schriftarten bekommen ihren Platz. Werden einfache Schriftarten verwendet, kann damit kreativ umgegangen werden, indem Bilder in den Schriftzug integriert werden. Jerry Cao hat eine Auswahl von Beispielen für ein solches Design zusammengestellt.

Bunt, Groß und Retro soll es sein

Auf Design Shack werden außerdem drei Trends benannt, die Webdesigner in Sachen Typografie für das Jahr 2016 kennen sollten. Auch hier zeigt sich die Entwicklung hin zu auffälligen Schriften: Wasserfarb-Effekte, der Retro-Look und Schriftarten, die nur aus Großbuchstaben bestehen, sollen in diesem Jahr im Web besonders gut ankommen.

Die Typografie ist also auf allen Ebenen ein spannendes Thema im Webdesign.Einerseits gibt es hier klassische Richtlinien und einige technische Aspekte zu beachten, die nicht in Vergessenheit geraten dürfen. Andererseits handelt es sich gerade bei der Typografie um ein Designfeld, das quasi endlose Gestaltungsmöglichkeiten bietet. Für ein typografisch gutes Layout müssen Webdesigner also einiges beachten, können aber auch auf viele Optionen zurückgreifen.

 

Aufmacherbild: Old typography. Old Metallic Letters and cases. via Shutterstock / Urheberrecht: Kostas Kalomiris