Typographie: On Screen
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Einleitung und Motivation
Themen dieser Lerneinheit
Diese Lerneinheit beschäftigt sich mit den Besonderheiten, die Typografie bei der Verwendung für den Bildschirm aufweist. Wenn diese Lerneinheit trotz des sonst eingehaltenen Gestaltungsschwerpunktes ein wenig technisch anmutet, so soll dies darauf verweisen, wie unabdingbar eng der Alltag des Multimedia-Designs kreative Entscheidungen und technische Bedingungen bzw. Bedingtheiten verknüpft.
Für die Anwendung und Benutzbarkeit von Schriften am Bildschirm sind gewisse Besonderheiten zu beachten. Dabei geht es zum einen grundsätzlich um die Darstellung (bzw. Speicherung) von Schrift am Bildschirm, zum anderen um die Darstelllung auf unterschiedlichen Plattformen und mittels verschiedener Programme im Web.
Geschichtliches
Die Schriftkünstler des 15. Jahrhunderts empfanden die Einführung des Buchdrucks unter Gutenberg als empfindliche Einschränkung ihrer Qualität und ihrer Entfaltungsmöglichkeit. Wie sich herausstellte, sollten sich durch den Buchdruck völlig neue Möglichkeiten der Gestaltung und Verbreitung entfalten können. Ganz ähnlich hat es heute mit der tendenziellen Ablösung der Schrift von materiellen Träger hin zur virtuellen Darstellung am Bildschirm zeitweilig den Anschein, als würde eine Flut von Schrifttypen in eingeschränkter Qualität Schrift endgültig der Beliebigkeit Preis geben. Doch die Geschichte und das Vertrauen in den Fortschritt lehren uns Zuversicht.
Problematik von Schrift an Bildschirm
Grundlegende Problematik der Darstellung von Schrift an einem Bildschirm ist der Umstand, dass die geringe Bildschirm-Auflösung von 72 dpi (dots per inch) bedeutend schlechtere Qualität zulässt als in der Print-Produktion möglich ist (von 300 bis 2400 dpi). Schriften, die ursprünglich für den Bleisatz und den Druck entworfen wurden, werden den Anforderungen der Lesbarkeit an Bildschrimen nur unzureichend gerecht. Solange sich die technische Qualität hinsichtlich der Auflösung von Displays nicht gravierend verbessern, können sich Designer wie auch Anwender unterschiedlicher Work-Arounds bedienen.
block separator
Beispiel
Abb: Schrift am Screen und im Druck
Abbildung
[s]
block separator
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Schriften an Bildschirmen
Es stellte sich heraus, dass sich viele Entwürfe für Druck-Schriften – besonders Serifen-Schriften, die sich als Leseschrift an Druckwerken herausragend eignen – für die Darstellung an Bildschirmen nur mässig brauchbar sind. Mit ihren oft stark differierenden Linienbreiten neigen sie zum Verlaufen und wirken unregelmässig. Dies zeigte sich besonders bei geringen Schriftgraden.
Computerhersteller haben daher Schriften entwickelt, die sich besonders für die Darstellung an Bildschirmen eignen. Als Systemschriften sind diese in der Regel bereits im Betriebssystem integriert. Sie sind für gewisse Grössen der Bildschirmdarstellung optimiert (9 – 12pt), d.h. Rundungen wurden grossteils vermieden.
Schrift kann auch als Grafik-File gespeichert und aufgerufen werden. Sie wird dann mit dem Hintergrund verknüpft und benötigt daher mehr Speicherplatz als eine Systemschrift.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Systemschrift vs. Schriftgrafik
In der Konzeption von Multimedia-Anwendungen, wird oft die Verwendung von Systemschrift vs. Schriftgrafik erwogen. Beide haben Vor- und Nachteile.
Systemschrift-Integration
  • benötigt weniger Speicherplatz und geringere Ladezeit
  • kann leichter aktualisiert werden
  • kann mittels Volltextsuche durchsucht werden
  • kann im Druck angepasst werden
  • kann aus Datenbanken gespeist werden
  • falls vorgesehene Schrift im System nicht vorhanden, automatisch durch andere ersetzt
  • unterschiedlicher Platzbedarf verschiedener Schriften
  • unterschiedliches Erscheinungsbild und Gesamteindruck
Schriftgrafik
  • erscheint an jedem Bildschirm wie vorgesehen
  • ist unabhängig von am Endgerät installierten Schriften
  • bietet umfangreiche typografische Gestaltungsmöglichkeiten
  • mutet qualitativ höherwertiger an
  • ökonomische vs. ästhetische Aspekte abzuwägen
  • Aufgabe Multimedia-Design ist guten Kompromiss zu erzielen
  • Kombination aus Systemschrift und Schriftgrafik oft zielführend
  • Herabsetzung Schriftgrad (Systemschriften): schlechte Darstellung
  • nur mangelhaft mögliche Anpassung der Schrift an Monitor-Pixelraster
  • gewisse Grössen besser zur Darstellung geeignet
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Anti-Aliasing
Im Zuge der Integration von Schrift als Grafik kann dem Problem der Übersetzung von Kurven in rechtwinkelige Pixel beigekommen werden: durch sogenanntes Anti-aliasing. Durch die Abstufung einzelner Pixel zur Hintergrundfarbe wird das Auge überlistet, die Schrift wird „geglättet“ und besser lesbar. Allerdings birgt Anti-aliasing auch Nachteile: .1 die behandelte Schrift wirkt etwas unscharf und .2 Anti-aliasing funktioniert nur für grössere Schriftgrade
block separator
Beispiel
Abb: Antialiasing
Abbildung
[s]
block separator
Abb: Antialiasing bei kleinem Schriftgrad
Abbildung
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Hinting
block separator
Definition
Hinting
Hinting nennt sich eine Anpassung, die vom Hersteller in Typefonts integriert wird. Sie bewirkt, dass die ursprüngliche Form einer Schrift bei geringer Auflösung besonders auch bei kleinen Graden gewährleistet ist.

block separator
block separator
Beispiel
Hinting
Nur aufwendig hergestellte Schriften sind optimal gehintet. Zum Vergleich unten die beiden Schriften .1 Verdana (gutes Hinting) und .2 Helvetica (schlechtes Hinting) in 13pt.
Abbildung

block separator
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Screenfonts und Plattformen
Screenfonts
Die Schrift Verdana zählt zu den zur Zeit – im Webbereich – meistverwendeten Screen-Schriften. (Das Design stammt von Matthew Carter, der auch die mittlerweile vielverwendete Georgia entworfen hat.) Auch die von den grossen Computererzeugern gelieferten Systemschriften sind erfreulicherweise besonders für die Verwendung On Screen angepasst.
Unterschiedliche Plattformen
Bedauernswerterweise jedoch unterscheidet sich der Lieferumfang der Schriften an den verschiedenen Plattformen:
Abb: Schriften-Umfang Windows und Mac
Abbildung
[s]
Zu beachten gilt es für den Designer weiters, dass die Darstellung von Schriften in Windows-Webbrowsern um 2-3pt grösser aussehen, als am Macintosh. Dies macht natürlich eine Gestaltung schwieriger, da die Laufweite der Schrift, der Umbruch der Zeilen und damit auch die Länge von Absätzen variiert. Jedenfalls muss ein Design immer auch für eine Ersatzschrift ausgelegt sein, die bei Ausfall der Primärschrift definiert sein sollte.
Abb: Schrift-Grössen unter Windows und Mac
Abbildung
[s]
Abb: Seiten-Darstellung unter Mac und Windows
Abbildung
[s]
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Cascading Style Sheets
Probleme der grafischen Gestaltung (Web)
Die Probleme der grafischen Gestaltung für das Web ergeben sich oft dadurch, dass dem Designer auf Grund unterschiedlicher Plattformen und Browsern auf Seiten des Users nur beschränkt möglich ist, die letztendliche Gestalt eines Layouts vollkommen zu sichern.
Abhilfe durch Cascading Style Sheets (CSS)
Besserung für dieses Dilemma schaffen Cascading Style Sheets (CSS). CSS wurden entwickelt, um die in der Auszeichnungssprache HTML existierenden Schwächen hinsichtlich Layout und Formatierung auszugleichen. Es handelt sich um Formatvorlagen, die Seitenelementen oder Seiten zugewiesen werden. Darin werden typografische Eigenschaften von Text, Überschriften, Zeilenabstände, usw. festgelegt. „Interne Stylesheets“ wirken dabei auf die einzelne Seite, über „externe Stylesheets“ können etwa alle Seiten eine Website konsistent formatiert werden.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Entwicklung der Screen-Schriften
Einleitung
Die Geschichte der Schriften für den Screen ist jung.
Verschiedene Arten von Screen-Schriften
Bitmap-Schriften
Mit den Bitmap-Schriften entwickelte Apple die ersten Zeichensätze, die es allerdings notwendig machten, dass für jede Schriftgrösse ein gesonderter Font vorhanden war. War dies nicht der Fall, konnte die Schrift nicht korrekt dargestellt werden.
PostScript-Schriften (oder Type1-)
Die von Adobe entwickelte Seitenbeschreibungssprache PostScript ermöglichte auch eine vektorielle Beschreibung von Schrift. Für den Druck dieser PostScript-Schriften (oder Type1-) wird zwar ein Drucker-Font benötigt, jedoch kann mit Hilfe eines Schriftverwaltungsprogrammes (z.B. ATM - AdobeTypeManager) eine bliebig grosse Bildschirmdarstellung der Schrift (an Hand des vektoriellen Outline-Fonts) errechnet werden.
True-Type-Schriften
Auch True-Type-Schriften sind skalierbare Vektorschriften, jedoch schliessen sie Drucker- und Bildschirmfont in einer Datei ein. Diese Schriften können verlustfrei skaliert und verändert werden und eignen sich gut für die Arbeit am Screen.
Multiple-Master-Technologie
Mittels der Multiple-Master-Technologie von Adobe wird es zukünftig möglich sein, in einem einzigen Font bis zu 16 (!) unterschiedliche Stilattribute zu speichern und so etwa Laufweite, Grösse, Serifen, Achsen, Neigung unabhängig voneinander zu bearbeiten.
block separator
Beispiel
Abb: Multiple Masters Technologie
Abbildung
[s]
block separator
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Pixelfonts
Für kleine Schriftgrössen wurde in jüngerer Vergangenheit wieder verstärkt auf neu entworfene Bitmap-Schriften zurückgegriffen. Die sogenannten Pixelfonts wurden besonders für ihre spezifische Grösse gestaltet und kommen ohne jede Rundungen aus. Ihre breite Verwendung hat regelrecht einen eigenständigen visuellen Stil nach sich gezogen: Form follows function
block separator
Beispiel
Abb: Pixelfont Mini
Abbildung
[s]
block separator
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Lesbarkeit am Bildschirm
Untersuchungen zu Folge liegt die Lesebereitschaft für Texte On Screen bei Benutzern von multimedialen Anwendungen nicht besonders hoch. Auf Grund der im Vergleich zu Printprodukten geringeren Auflösung gilt für die ideale Länge von Textzeilen auf Monitorer ein unterschiedlicher Richtwert. Es sollten daher also maximal 40 Zeichen pro Zeile gesetzt werden.
Bildschirmdarstellung und Screen-Optimierung
Für die Bildschirmdarstellung eignen sich besonders Schriften mit erhöhten Mittellängen gut. Nachdem besonders für kleine Schriftgrade nur wenige Pixel zur Verfügung stehen, sind Mittellängen für die Erkennbarkeit von Kleinbuchstaben entscheidend. Auch die Buchstabenabstände sind bei Screen-optimierten Schriften leicht vergrössert, sodass ein Zusammenfliessen verhindert wird. Feingliedrige Schriften, Handschriften sowie Serifenschriften eignen sich nicht für Texte On Screen. Auch sollten im wesentlichen normale oder halbfette Schriftschnitte verwendet werden. Schmale oder fette Schriften verringern die Lesbarkeit. Die Möglichkeit zur Anpassung von Schriftgrössen an ihre persönlichen Erfordernisse ermöglicht auch Menschen, die unter Sehschwäche leiden, Text-Inhalte multimedialer Systeme gut aufnehmen.
tudie - Software Usability Research Laboratory (Wichita State University)
Eine Studie des Software Usability Research Laboratory (SURL) an der Wichita State University untersuchte populäre Schriften für den Bildschirm auf Lesbarkeit und auf ihren allgemeinen Eindruck hin. Getestet wurden 5 Grotesk-Schriften (Agency, Arial, Comic, Tahoma und Verdana ), 5 Serif-Schriften (Courier New, Georgia, Goudy Old Style, Century Schoolbook und Times New Roman) und 2 Schreibschriften (Bradley und Corsiva). Interessant an dem erzielten Ergebnis ist, dass die tatsächliche Lesegeschwindigkeit mancher Schriften von ihrer konstatierten Lesbarkeit deutlich abfällt. Dies weist deutlich auf die Massgeblichkeit der Sympathie für die Form und Wirkung einer Schrift hin. Weitere Details finden sich unter Begriffhttp://psychology.wichita.edu/sul/usabilitynews/3S/font.htm
Abbildungen
Die erste Abb. zeigt die gemessene Lesezeit in Sekunden, die zweite Abb. die wahrgenommene Lesbarkeit einer Schrift auf einer Skala von 1 – 6 (1 = nicht lesbar, 6 = Perfekt lesbar). Schriftmuster finden sich unter: http://psychology.wichita.edu/surl/usabilitynews/3S/compare.htm
Abb.: gemessene Lesezeit (sek)
Abbildung
Abb.: wahrgenommene Lesbarkeit (1 = nicht lesbar, 6 = Perfekt lesbar)
Abbildung
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Quellen
(empty): Web Style Guide ()
Joachim Böhringer: Kompendium der Mediengestaltung für Digital- und Printmedien; Springer, 2003
Isolde Kommer: Typografie und Layout für digitale Medien; Hanser, 2002
Dieter K. Fröbisch: MultiMediaDesign; Laterna Magica, 1997

PU separator
Dr. Stefan Müller (sm@automat.at)
Automat, http://www.automat.at/