Maria Weinhofer

Obmann Stv.
T: 0650-9023299
E: atelier@grafikmanufaktur.at
www.grafikmanufaktur.at

Professionelle Typografie im Web

Wie Text auf einer Website dargestellt wird, hängt von vielen Faktoren ab, die Sie nicht steuern können: vom Ausgabegerät (Bildschirmgröße und -auflösung), von Betriebssystem und Browser, von den individuellen Einstellungen des Nutzers … Erfahren Sie Tipps aus Sicht des Grafikdesigns, wie Sie mit der Typo mehr aus Ihren Websites herausholen können.

Im Wesentlichen können Sie sich an den gleichen Typografieregeln orientieren, die auch im Printbereich gelten – mit Ausnahmen, die dem etwas anderen Leseverhalten am Bildschirm geschuldet sind.

Schriftart bzw. -familie
Wie im Print gilt: Kombinieren Sie nicht mehr als zwei, höchstens drei verschiedene Schriftarten miteinander und achten Sie darauf, dass diese gut miteinander harmonieren bzw. ausreichend kontrastieren. Legen Sie Augenmerk etwa auf Laufweite, Stilepoche, x-Höhe. Hier können Sie verschiedenste Kombinationen testen: http://fontjoy.com (oder tippen Sie „font pairing‟ in Ihre Suchmaschine). Verwenden Sie für Fließtexte Schriftarten mit klar erkennbaren und gut unterscheidbaren Formen, ausreichender Strichstärke und geringen Strichstärkenunterschieden. Denn: Je detailreicher eine Schrift, desto größer muss sie gesetzt werden. Serifenschriften sind wegen ihrer feinen Details im Fließtext noch die Ausnahme. Dank immer feinerer Bildschirmauflösung ist es nur eine Frage der Zeit, bis Serifenschriften auch im Web Verbreitung finden.

Schriftgröße
Eine gewisse Gelassenheit sollten Sie hinsichtlich der Schriftgröße an den Tag legen. Die Nutzer können die Größendarstellung von Schrift im Browser an ihre Bedürfnisse anpassen. Die Wiedergabe hängt auch noch von der Bildschirmauflösung des jeweiligen Ausgabegeräts und einigen anderen Faktoren ab. Genau genommen können Sie als Webdesigner nur angeben, in welchem Größenverhältnis die Texte zueinander stehen. Behalten Sie also im Blick, dass Ihr Design Größenänderungen im Text in einem gewissen Rahmen verträgt.

Zeilenlänge und Zeilenhöhe
Wenn ein Text gelesen werden soll, wovon wir bei den meisten Texten ausgehen dürfen, gilt im Print wie im Web: Niemals darf der Zeilenabstand den Wortzwischenraum unterschreiten! Zu geringer Zeilenabstand macht es schwierig, beim Lesen die Zeile zu halten. Bei besonders kleinem Zeilenabstand drohen außerdem Fußküsse (wenn sich Unterlänge und Oberlänge zweier Buchstaben in aufeinanderfolgenden Zeilen berühren). Weniger gravierend sind die Auswirkungen von zu großem Zeilenabstand: Der Lesefluss kann ins Stocken geraten. Für ein luftiges Schriftbild verwenden Sie bei Schriften mit großer x-Höhe (wie sie im Webdesign häufig vorkommen) einen vergleichsweise großen Zeilenabstand. Je kürzer die Zeile, desto kleiner darf die Zeilenhöhe sein. Ebenso brauchen Überschriften und andere sehr kurze Texte weniger Zeilenabstand als ein langer, sich über viele Zeilen erstreckender Text.

Textausrichtung
Eine gerade linke Kante hilft beim Zeilenwechsel. Flattersatz garantiert außerdem ausgeglichene Wortabstände. Insofern ist der Lesekomfort bei linksbündigem Satz am höchsten. Sinnvollerweise ist die Linksbündigkeit standardmäßig eingestellt. Zentrierter Text eignet sich wie in gedruckten Texten nur für Überschriften oder kurze Teaser, da das Fehlen jeglicher Kante die Orientierung erschwert. Rechtsbündiger Text sorgt leicht für Verwirrung und sollte bei responsive Webdesign sehr vorsichtig gewählt werden. Für Überschriften und Fließtext ist Rechtsbündigkeit im Webdesign prinzipiell nicht zu empfehlen. Für Blocksatz gilt: Hände weg! Gut lesbarer Blocksatz fordert schon im Print eine Beschäftigung mit jeder einzelnen Zeile, um ein ausgewogenes Verhältnis von Worttrennungen, Buchstaben- und Wortabständen zu bewirken. Im Webdesign, wo sich die Zeilenlänge je nach Nutzereinstellung bzw. Viewport-Breite ändert, ist guter Blocksatz schlicht unmöglich.

Laufweite
Je kleiner die Schriftgröße, desto größer müssen Buchstabenabstand und Wortzwischenraum sein, um eine gute Lesbarkeit zu gewährleisten. Ebenso braucht invers gesetzter Text (helle Schrift vor dunklem Grund) mehr Buchstabenabstand als dunkler Text vor hellem Grund. Denn die hellen Buchstaben überstrahlen den dunklen Grund. Zu enger Buchstabenabstand erzeugt dann ein verwaschenes Schriftbild. Tipp: Digitale Schriften sind in der Regel für eine Größe zwischen 10 und 16 pt zugerichtet – kontrollieren Sie bei anderen Größen die Laufweite und korrigieren Sie gegebenenfalls.

Checkliste Webfont

So erkennen Sie gute Webfonts

 Unerlässlich ist eine sorgfältige Auswahl der eingesetzten Webfonts – wer im Vorfeld die Qualität der gewünschten Schrift überprüft, vermeidet böse Überraschungen. Überprüfen Sie vor dem Einsatz eines Webfonts, ob er für den Webeinsatz im Allgemeinen optimiert und für Ihr spezielles Webprojekt geeignet ist:

  • Ist die Schriftfamilie in ausreichend vielen Schriftschnitten vorhanden (zumindest Regular, Bold, Italic, Bold Italic)?
  • Ist der Font in allen Sprachen verfügbar, die Sie auf der Website verwenden?
  • Zeichenausstattung: Sind alle nötigen Sonderzeichen (€, ©, @, & etc.), Akzentbuchstaben, Umlaute (Besonderheiten der deutschen Sprache wie ä, ö, ü, ß), korrekte Anführungszeichen und Apostrophe vorhanden?
  • Ist der Font für die gängigsten Browser optimiert, wird die Schrift korrekt wiedergegeben?
  • Ist das Kerning der Schrift ausgereift? Wirken die Buchstabenabstände harmonisch? Knackpunkte sind zum Beispiel die Buchstabenfolgen Av, KA, LA, Ly, To, VA. Zu eng oder zu weit gesetzt können diese den Lesefluss gehörig stören.
  • Sind die Strichstärken ausgewogen?
  • Wurde bei der Optimierung der Schrift Augenmerk auf gutes Hinting, Antialiasing, Subpixel-Rendering gelegt? Oder wirkt die Schrift in kleinen Schriftgraden fleckig, verschwommen oder pixelig? Sind die Übergänge von Rundungen zu geraden Linien harmonisch?
  • Sind die Ziffern auch in kleinen Größen einfach zu unterscheiden?
  • Entspricht die Schriftlizenz Ihren Anforderungen? Manche Lizenzen werden nach der Anzahl der Pageviews verrechnet, andere pauschal. Auch hinsichtlich der Anzahl an Arbeitsplätzen, an denen der Font genutzt werden darf, gibt es Unterschiede.
  • Was passiert, wenn der Lizenzanbieter den Betrieb einstellt? Bleibt der Webfont dann verfügbar?

Link-Tipps!
- Das typografische Erscheinungsbild einer Website zu beeinflussen, gelingt am einfachsten mit CSS. So gut wie alles, was es dazu zu wissen gibt, können Sie bei SelfHTML nachlesen: wiki.selfhtml.org
- Unter www.page-online.de > Downloads finden Sie verschiedene (großteils kostenlose) E-Dossiers, unter anderem zum Thema Typografie für Screens und fürs Internet der Dinge.
- Der Schriftenanbieter Linotype bietet vielerlei Tutorials zum Thema Webtypografie und Webfonts: www.linotype.com > Gewusst wie > Font-Technologie > Webfonts-Tutorial

Foto: Marek Uliasz © 123RF.com

Als zweitgrößte Fachgruppe österreichweit im Bereich Werbung werden rund 3.400 Mitglieder mit ca. 4.200 Gewerbeberechtigungen betreut. Hier finden Sie umfangreiche Informationen sowie unterschiedliche Serviceleistungen für Ihre tägliche Praxis.

Kontakt

WKNÖ Fachgruppe Werbung und Marktkommunikation
Wirtschaftskammer-Platz 1, 3100 St. Pölten
Tel.: 02742 851 - 19712
Fax: 02742 851 - 19719
  werbung@wknoe.at