2. Dezember 2014

Text ist und bleibt König – über Typografie im Web

Ganz bewusst schreibe ich meinen ersten Grundlagentext über das Medium Text. Egal wie multimedial man arbeitet, Text wird immer eine tragende und verbindende Rolle einnehmen. Bewusst und geschickt gesetzter Text ist eine Grundbedingung für jede multimediale Geschichte.

Denn: Ohne Text, kein Internet. Text ist von Maschinen interpretierbar. Suchmaschinen funktionieren mittels Text, bereits die URL besteht aus Text, fast jede Navigation funktioniert mit Text.

Im Optimalfall erhält der Text in einer multimedialen Geschichte aber nicht übermässig viel Gewicht, sondern hält lediglich alle multimedialen Inhalte zusammen und verbindet sie geschickt zu einer Geschichte.

Wichtigste Funktion: Übersicht schaffen

Bevor wir über Lesbarkeit reden, zuerst zur wichtigeren Scannbarkeit.

Keine andere Medienform wird so schnell und präzise erfasst, wie Text.

Text muss also möglichst schnell Übersicht schaffen: Welche Inhalte erwarten dich wo?

Hilfreich dafür sind u.a. klare Hierarchien (also klare Unterscheidung zwischen Überschriften und Lauftext), blickfangende Hyperlinks und Listen – oder natürlich die Navigation durch die Seite oder auch durch den Artikel.

Gross liest sich gut

iA schreiben auf ihrem Blog: «Die Schriftgrösse eines Lauftexts ist keine Geschmackssache. Sie hängt von der Lesedistanz ab. Da der Computer normalerweise weiter weg vom Leser ist als ein Buch, muss eine Schrift auf dem Bildschirm grösser als auf einem Printprodukt sein.»

Und: «Wenn dich die neue Grösse, nachdem du den Lauftext vergrössert hast, anfangs irritiert, ist das normal. Aber hast du dich einmal daran gewöhnt, wirst du nie mehr zu den kleinen Standardgrössen zurückkehren wollen.» (kann ich voll zustimmen)

Unterschiedliche Geräte, unterschiedliche Grössen

16px ist dabei das absolute Minimum und auf kleinen Bildschirmen legitim. iA erklären sehr schön: Entscheidend ist die Distanz zwischen dem Betrachter und dem Gerät.

Auf grossen Bildschirmen darf der ganze Platz ausgenutzt werden. Schriftgrössen von über 20px sind absolut ok und zu empfehlen, denn pro Zeile sollte man zwischen 55 und 75 Zeichen haben. Alles darüber und darunter ist anstrengend zu lesen.

Während es beim Printdesign elegant wirkt, kleine Schriftgrössen zu verwenden, gilt für online: Zu gross geht (fast) nicht. Im Web muss man nicht wie bei einer Zeitung Platz sparen. Im Gegenteil:

Grosszügige (Weissraum-)Gestaltung ist Pflicht

«Beinahe jedes nur denkbare Screendesign gewinnt durch vergrößerte Abstände automatisch an Qualität und Übersichtlichkeit.

Zu viel Abstand gibt es eigentlich nicht!

Und es gibt viele verschiedene Abstandstypen, die ich hier unvollständig aufzähle: Spaltenabstand, Zeilenabstand, Randabstand nach oben/unten/ links/rechts, Kastenabstand, Innenabstand, Außenabstand, Absatzabstand.

Durch geschickte Wahl der unterschiedlichen Abstände lassen sich Dinge als eine Einheit kennzeichnen, die auch tatsächlich zusammengehören», schreibt van Aaken im gratis verfügbaren webtypobuch (Gesetz der Nähe).

Das heisst für den Zeilenabstand: Zwischen 1.4 und 1.5, also eineinhalb Mal die Schriftgrösse. (Mehr Zeichen pro Zeile erfordern mehr Zeilenabstand, eine kleine x-Höhe toleriert einen Kleineren). Der Abstand zwischen Absätzen skaliert sinnvollerweise gleichmässig mit der Schrift)

Ein Wort noch zum Seitenabstand: Auf grossen Bildschirmen unbedingt grosszügig frei lassen. Auf kleinen Bildschirmen hingegen macht es Sinn, den wenigen Platz auszunutzen und den Abstand bei den Rändern zu reduzieren. (Skalier dieses Fenster, um zu sehen, was ich meine.)

Weissraum muss dabei nicht reines Weiss sein. Es wird sogar empfohlen, mit ganz dunklem Grau (97%) auf ganz helles Grau (3%) zu schreiben. Der Kontrast ist so weniger hart. Vom Umgekehrten, hell auf dunkel, wird abgeraten. Und schon gar nicht farbige oder wechselnde Hintergründe (für Lauftext).

Who shot the Serif?

Dass serifenlose Schriften auf Bildschirmen besser lesbar sind, stimmt seit den 90ern nicht mehr. Spätestens seit Retina & Co. sind gestalterische Überlegungen für die Schriftwahl viel entscheidender.

serifen

Serifenlose vs. Serifen-Schrift

Um wieder iA zu zitieren: «Die Serifenschrift ist ein Pfarrer, die sans-serif ist ein Hacker. Keiner von beiden ist besser als der andere, aber aus verschiedenen Gründen hat eine Serifenschrift mehr Authorität, während eine sans-serif demokratischer anmutet. Aber nicht vergessen: Das sind fünftausend Jahre typografische Geschichte in zwei lausigen Sätzen zusammengefasst. Nicht zu ernst nehmen bitte.»

Es gibt sehr gut leserliche Schriften mit und ohne Serifen. Und dank @font-face ist die Technik kein Flaschenhals mehr. Ich mag z.B. folgende:

sans-serif serif
Die Klassische Helvetica (hier verwendet) Georgia
Die Neue Proxima Nova Iowan
Die Gratis Source Sans Droid Serif
Die Fancy Gill Sans Caecilia (Slab)

 

PS: Finger weg vom Buchstabenabstand. Die kleinste Einheit 1px ist viel zu grob, um wirklich schöne Resultate zu erhalten (höchstens mal bei grossen Überschriften erlaubt).

PSS: Linksbündig ist in 99% aller Fälle das Richtige. Zentriert darf für kurze Text oder Überschriften auch mal sein.

PSSS: Silbentrennung ist ne elegante Sache. Danke Javascript.

PSSSS: Ergänzungen?