Einleitung und Motivation

1

Thema dieser Lerneinheit

• Besonderheiten der Gestaltung von Typografie für die Verwendung am Bildschirm in der
• Darstellung (bzw. Speicherung) von Schrift für Bildschirm
• Darstelllung auf unterschiedlichen Plattformen (Web)
• Darstelllung mittels verschiedener Programme (Web)

Geschichtliches

• 15. Jahrhundert
  • Einführung des Buchdrucks erst als Einschränkung empfunden
  • schliesslich neue Möglichkeiten der Gestaltung und Verbreitung entfaltet
• Heute
  • Ablösung der Schrift von materiellen Träger hin zu virtueller Darstellung
  • übermässige Vielfalt von Schrifttypen
  • Schriften in eingeschränkter Qualität
  • Gefahr der Beliebigkeit?

Problematik von Schrift an Bildschirm

• geringe Bildschirm-Auflösung von 72 dpi (dots per inch)
• schlechtere Qualität als in der Print-Produktion möglich (300-2400 dpi)
• Schriften ursprünglich für Bleisatz und Druck entworfen
• Anforderungen der Lesbarkeit an Bildschirmen ungenügend erfüllt
• Solange Qualität der Displays nicht besser: unterschiedliche Work-Arounds

Abb: Schrift am Screen und im Druck PC webm2004

Abb: Schrift am Screen und im Druck PDA_Phone webm2004

2

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.

Abb: Schrift am Screen und im Druck PC webm2004

Abb: Schrift am Screen und im Druck PDA_Phone webm2004

Schriften an Bildschirmen

1

auto

• viele Druck-Schriften für Bildschirm nur mässig geeignet
• stark differierende Linienbreiten verlaufen und wirken unregelmässig
• Serifen-Schriften und geringe Schriftgrade besonders ungeeignet

auto

• besondere Schriften für die Darstellung an Bildschirmen entwickelt
• als Systemschriften im Betriebssystem integriert
• für gewisse Grössen der Bildschirmdarstellung optimiert (9–12pt)
• zur Optimierung Rundungen vermieden

auto

• Schrift auch als Grafik gespeichert und aufzurufen
• mit Hintergrund verknüpft
• benötigt mehr Speicherplatz als Systemschrift

2

auto

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.

auto

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.

auto

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.

Systemschrift vs. Schriftgrafik

1

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

2

auto

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

Anti-Aliasing

1

auto

• Problem der Übersetzung von Kurven in rechtwinkelige Pixel (Schriftgrafik)
• Anti-aliasing ist Abstufung einzelner Pixel zur Hintergrundfarbe
• Überlistung des Auges
• Schrift „geglättet“ und besser lesbar
• Nachteile Anti-aliasing
  • behandelte Schrift wirkt unscharf
  • funktioniert nur für grössere Schriftgrade

Abb: Antialiasing PC webm2004

Abb: Antialiasing PDA_Phone webm2004

Abb: Antialiasing bei kleinem Schriftgrad PC webm2004

Abb: Antialiasing bei kleinem Schriftgrad PDA_Phone webm2004

2

auto

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

Abb: Antialiasing PC webm2004

Q:http://webmonkey.wired.com/webmonkey/01/45/index4a_page2.html?tw=design

Abb: Antialiasing PDA_Phone webm2004

Q:http://webmonkey.wired.com/webmonkey/01/45/index4a_page2.html?tw=design

Abb: Antialiasing bei kleinem Schriftgrad PC

Abb: Antialiasing bei kleinem Schriftgrad PDA_Phone

Hinting

1

auto

• von Hersteller in Typefonts integriert
• gewährleistet ursprüngliche Form einer Schrift bei geringer Auflösung und kleinen Graden
• optimiert bei aufwendig hergestellten Schriften

Hinting all

• Verdana
  • gutes Hinting
• Helvetica
  • schlechtes Hinting in 13pt.

2

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.

Hinting all

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

Screenfonts und Plattformen

1

Screenfonts

• Schrift Verdana eine der meistverwendeten Screen-Schriften (Web
• Design von Matthew Carter (auch Georgia)
• Systemschriften besonders für die Verwendung On Screen angepasst

Unterschiedliche Plattformen

Unterschiedliche Plattformen führen verschiedene Schriften:

Abb: Schriften-Umfang Windows und Mac PC webs2004

siehe auch http://www.webstyleguide.com/type/cross.html

Abb: Schriften-Umfang Windows und Mac PDA_Phone webs2004

Schwierigkeiten

• Schriften in Windows-Webbrowsern um 2-3pt grösser als am Mac
• Laufweite, Zeilenumbruch und Absatzlänge variieren
• Automatischer Ersatz bei fehlender Schrift durch vorhandene
• Design sollte Ersatzschrift vorsehen

Abb: Schrift-Grössen unter Windows und Mac webs2004 PC

Abb: Schrift-Grössen unter Windows und Mac webs2004 PC

Abb: Seiten-Darstellung unter Mac und Windows webs2004 PC

Abb: Seiten-Darstellung unter Mac und Windows webs2004 PDA_Phone

2

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 webs2004 PC

Abb: Schriften-Umfang Windows und Mac webs2004 PDA_Phone

auto

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 webs2004 PC

Abb: Schrift-Grössen unter Windows und Mac webs2004 PC

Abb: Seiten-Darstellung unter Mac und Windows webs2004 PC

Abb: Seiten-Darstellung unter Mac und Windows webs2004 PDA_Phone

Cascading Style Sheets

1

Probleme der grafischen Gestaltung (Web)

• Unterschiedliche Plattformen und Browser auf User-Seite
• letztendliche Gestalt eines Layouts unsicher

Abhilfe durch Cascading Style Sheets (CSS)

• Ausgleich der in HTML existierenden Schwächen hinsichtlich Layout und Formatierung
• Formatvorlagen, die Seitenelementen oder Seiten zugewiesen
• Festlegung typografischer Eigenschaften von Text, Überschriften, Zeilenabstände, usw.
• "interne Stylesheets“ formatieren einzelne Seiten
• „externe Stylesheets“ formatieren alle Seiten einer Website konsistent

2

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.

Entwicklung der Screen-Schriften

1

Einleitung

• Junge Geschichte der Screenschriften

Verschiedene Arten von Screen-Schriften

Bitmap-Schriften

• entwickelt von Apple
• für jede Schriftgrösse gesonderter Font notwendig
• inkorrekte Darstellung falls nicht

PostScript-Schriften (oder Type1-)

• entwickelt von Adobe
• Seitenbeschreibungssprache PostScript
• ermöglicht vektorielle Beschreibung von Schrift
• für Druck gesonderter Drucker-Font nötig
• mit Hilfe Schriftverwaltungsprogrammes (AdobeTypeManager) bliebig grosse Bildschirmdarstellung der Schrift möglich

True-Type-Schriften

• skalierbare Vektorschriften
• Drucker- und Bildschirmfont in einer Datei
• können verlustfrei skaliert und verändert werden
• gut für Arbeit am Screen

Multiple-Master-Technologie

• entwickelt von Adobe
• Speicherung von bis zu 16 Stilattributen in einem Font
• unabhängige Bearbeitung von Laufweite, Grösse, Serifen, Achsen, Neigung

Abb: Multiple Masters Technologie PC adob2004

bb: Multiple Masters Technologie PDA_Phone adob2004

2

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.

Abb: Multiple Masters Technologie PC adob2004

Q: http://www.adobe.de/type/topics/magicmm.html

Abb: Multiple Masters Technologie PDA_Phone adob2004

Pixelfonts

1

auto

• neue Bitmap-Schriften für kleine Schriftgrössen
• besonders für spezifische Grösse gestaltet
• ohne jede Rundungen
• generierte eigenständigen visuellen Stil

Abb: Pixelfont Mini PC mini2004

Q: http://www.minifonts.com/mini7.html

Abb: Pixelfont Mini PDA_Phone mini2004

2

auto

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

Abb: Pixelfont Mini PC mini2004

Abb: Pixelfont Mini PDA_Phone mini2004

Lesbarkeit am Bildschirm

1

auto

• Lesebereitschaft für Texte On Screen nicht besonders hoch
• Auflösung am Monitor im Vgl. zu Print geringer
• unterschiedliche Ideallänge von Textzeilen auf Monitor
• max. 40 Zeichen pro Zeile

Bildschirmdarstellung und Screen-Optimierung

• Schriften mit erhöhten Mittellängen besonders geeignet
• Mittellängen für Erkennbarkeit von Kleinbuchstaben entscheidend

• Buchstabenabstände vergrössert - Zusammenfliessen verhindert
• feingliedrige Schriften, Handschriften und Serifenschriften für OnScreen kaum geeignet
• normale oder halbfette Schriftschnitte gut lesbar
• schmale oder fette Schriften verringert lesbar
• Anpassung von Schriftgrössen an persönlichen Erfordernisse – Lesbarkeit auch für Sehschwache

Studie - Software Usability Research Laboratory (Wichita State University)

Untersuchung von Bildschirmschriften auf Lesbarkeit und Eindruck

5 Grotesk-, 5 Serif- und 2 Schreibschriften

Lesegeschwindigkeit fällt von ihrer konstatierten Lesbarkeit ab

verweist auf Massgeblichkeit der Sympathie für Form und Wirkung (siehe http://psychology.wichita.edu/sul/usabilitynews/3S/font.htm)

Abb.: gemessene Lesezeit (sek) PC

Abb.: gemessene Lesezeit (sek) PDA_Phone

Abb.: wahrgenommene Lesbarkeit (1 = nicht lesbar, 6 = Perfekt lesbar) PC

Abb.: wahrgenommene Lesbarkeit (1 = nicht lesbar, 6 = Perfekt lesbar) PDA_Phone

2

auto

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 http://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) PC

Abb.: gemessene Lesezeit (sek) PDA_Phone

Abb.: wahrgenommene Lesbarkeit (1 = nicht lesbar, 6 = Perfekt lesbar) PC

Abb.: wahrgenommene Lesbarkeit (1 = nicht lesbar, 6 = Perfekt lesbar) PDA_Phone

Quellen

1

auto

webs2004 boeh2003 komm2002 froe1997

2

auto

webs2004 boeh2003 komm2002 froe1997