Know-how: Onlinetexten, Typografie

WWW.-Typografie

Aufgabe der Typografie ist es, Textmaterial so zu gestalten, dass der Textinhalt möglichst leicht und schnell erfasst werden kann. Dies gilt insbesondere für Text, der auf dem Bildschirm dargestellt werden muss. Die Funktionalität hat gegenüber der Ästhetik Vorrang.

von Hansjörg Bolliger

Der Typografie kommt auf Web-Seiten sowohl inhaltliche als auch funktionale Bedeutung zu:

• Informationsvermittlung (Text)
  
• Navigation (Buttons)
  
  

Der Typografie für Web-Seiten sind durch die technischen Vorgaben der Bildschirmdarstellung enge Grenzen gesetzt. Für die schlechtere Lesbarkeit von Texten auf dem Bildschirm verantwortlich sind :

• die niedrige Auflösung (Mac 72 dpi, PC 96 dpi)
  
• der leuchtende Bildschirm
  

Dies bedeutet, dass nicht-optimierte Schriften mit "Treppenstufen" dargestellt werden und feine Linien durch den leuchtenden Bildschirm überstrahlt werden. Diese Nachteile können weitgehend durch die Wahl geeigneter Schriften oder den Einsatz von Schrift-Grafiken vermieden werden.

nach oben

Schriften

Grundsätzlich lassen sich zwei Schriftfamilien unterscheiden: Systemschriften (True Type Fonts) und Satzschriften (Post Script Fonts)

Systemschriften

Systemschriften sind bereits im Lieferumfang der Computer-Betriebssysteme enthalten. Sie wurden in ihrem Design für die Bildschirmdarstellung optimiert und enthalten nur wenig Schrägen und Rundungen. Beispiele sind Arial und Times für Windows und Helvetica und Times New Roman für Mac. Systemschriften eignen sich vor allem für den Content.

Vorteile:

• geringe Ladezeiten
  
• Datenbankeinbindung möglich
  
• Textänderungen sind einfach
  
• Scrolltext möglich
  
  

Nachteile:

• Schriftauswahl klein
  
• Schrifteffekte nicht möglich
  
• wenig gestalterische Kontrolle
  
• "ästhetisch arm"
  
  

Satzschriften (Nicht-Systemschriften)

Satzschriften wurden für den Print-Bereich entwickelt. Sie sind nicht im Betriebssystem enthalten und müssen zusätzlich gekauft und installiert werden. Satzschriften müssen zudem für die Bildschirmdarstellung optimiert (Anti-Aliasing) werden. Satzschriften eignen sich vor allem als Schmuckelemente (Navigation , Corporate Identity, Überschriften).

Vorteile:

• gestalterische Kontrolle
  
• grosse Schriftauswahl
  
• Schrifteffekte möglich
  
• wirkt "professioneller"
  
  

Nachteile:

• grössere Ladezeiten
  
• aufwendig beim Aktualisieren
  
• schlechte Ausdrucke
  
• keine Datenbankeinbindung
  
  

Anti-Aliasing oder Glätten

"Anti-Aliasing" bezeichnet das Glätten der durch die geringe Bildschirmauflösung entstandenen "Treppenstufen". Dabei werden die Stufen durch farblich zum Hintergrund abgestufte Pixel aufgefüllt und dadurch verwischt. Anti-Aliasing sollte jedoch nur bei grösseren Schriftgraden angewendet werden, da es bei kleineren Schriften zu einem Verwischungseffekt kommt.

Nachteil:

Durch die Verknüpfung mit dem Hintergrund wird die Schrift zur Grafik. Dadurch werden die Web-Seiten langsamer geladen und sind schwieriger zu aktualisieren.

Screenfonts

Screenfonts sind Satzschriften die speziell für den Bildschirmeinsatz entwickelt wurden. Sie müssen nicht geglättet werden und sind auch in kleinen Grössen noch gut lesbar. Auch Screenfonts müssen als Grafiken in die Webseite eingebunden werden, durch den Wegfall des Anti-Aliasing ist ihr Speicherbedarf aber wesentlich kleiner.

nach oben
 

Schriftarten

Schriften lassen sich in zwei Kategorien einteilen:

• Anitqua-Schriften mit Serifen (z.B. Times)
  
• Grotesk-Schriften ohne Serifen (z.B. Arial)
  

Für die Bildschirmdarstellung geeigneter sind Schriften ohne Serifen, da feine Linien durch den Bildschirm überstrahlt werden. (Serifen sind die kleinen Endstriche an den Grundstrichen der Buchstaben.)

nach oben

Schriftgrösse

Für Fliesstext eigenen sich Schriftgrössen zwischen 12p und 16p. Der Zeilenabstand sollte ca. 120% der Schriftgrösse betragen.

nach oben

Schrift und Farbe

Am lesbarsten ist dunkle Schrift auf hellem Hintergrund. Bei farbiger Schrift auf farbigem oder grauem Hintergrund muss darauf geachtet werden, dass der Kontrastabstand nicht zu klein wird. Keine Komplementär-Farben verwenden (Flimmerkontrast!). Besonders problematisch ist rote Schrift auf blauem Hintergrund. Für Fliesstext ungeeignet ist ein Hintergrund mit Farbverlauf.

nach oben

Typografisches Konzept

Der bewusste Einsatz von typografischen Gestaltungselementen gliedert die Textinformation und steigert die Übersichtlichkeit von Webseiten.

Regeln:

• max. 2-3 verschiedene Schrifttypen oder
  
• 1 Schrifttyp und unterschiedliche Schriftschnitte (fett, schmal, breit etc.)
  
• konsistente Anwendung der Schrifttypen und -schnitte
  
  

Die typografischen Konstanten sollten nach der Entwurfsphase und vor der Realisierungsphase unbedingt dokumentiert werden.

nach oben