Typographie: On Screen
.
Einleitung und Motivation
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
.
Schriften an Bildschirmen
- 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
- 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
- Schrift auch als Grafik gespeichert und aufzurufen
- mit Hintergrund verknüpft
- benötigt mehr Speicherplatz als Systemschrift
.
Systemschrift vs. Schriftgrafik
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
- 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
.
Hinting
- von Hersteller in Typefonts integriert
- gewährleistet ursprüngliche Form einer Schrift bei geringer Auflösung und kleinen Graden
- optimiert bei aufwendig hergestellten Schriften
Beispiel
Hinting
- Verdana
- gutes Hinting
- Helvetica
- schlechtes Hinting in 13pt.
 |
 |
.
Screenfonts und Plattformen
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:
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
.
Cascading Style Sheets
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
.
Entwicklung der Screen-Schriften
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
.
Pixelfonts
- neue Bitmap-Schriften für kleine Schriftgrössen
- besonders für spezifische Grösse gestaltet
- ohne jede Rundungen
- generierte eigenständigen visuellen Stil
.
Lesbarkeit am Bildschirm
- 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)
http://psychology.wichita.edu/sul/usabilitynews/3S/font.htm)Abb.: gemessene Lesezeit (sek)
| |
 |
Abb.: wahrgenommene Lesbarkeit (1 = nicht lesbar, 6 = Perfekt lesbar)
| |
 |
.
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