Typografie am Bildschirm

Transkript

1 Typografie am Bildschirm..--/ / / ; : /: \ ####### , (c \ _ _ _ _

2 Grundlegendes Die Fokussierungszone beeinflusst die Lesbarkeit auf dem Bildschirm - Das Sehen ist ein physikalischer, physiologischer und psychologischer Prozess. - Fokussierungszone Beim Lesen von Schrift wird jeweils nur ein Ausschnitt der Wortes als scharf wahrgenommen. - Buchstabenkombinationen können in der Monitordarstellung verwechselt werden (Bsp. rn und m ). - Schrift auf dem Bildschirm entspricht nicht Schrift in Printmedien (Auflösung!)

3 Grundlegendes - Die Technischen Voraussetzungen setzen Grenzen für die Gestaltung - Es gelten auch auf dem Screen die Regeln der klassischen Typografie

4 Technische Voraussetzungen Vergleich Bildschirm- und Printdarstellung einer Bodoni 9 Pt. Bildschirmauflösung - Die niedrige Bildschirmauflösung (72 96 dpi) wirkt sich direkt auf die Darstellung von Schrift aus. (vgl. Print: dpi). 1.4 mm 1.4 mm

5 Zeichen/Buchstabe Bitmap-Modus Darstellung in Volltonwerten Geglättet-Modus (Konturen in Tonwerten) Pixel - Kleinstes darstellbares Bildelement am Bildschirm - Darstellung im Bitmap- oder Geglättet-Modus (sog. Antialiasing) Punkte / Linien - Bei runden Formen Treppeneffekt, Geglättet-Modus sinnvoller - Bei Linien abhängig von Linienstärke und Linienwinkel (unter 1 px Linienstärke Bitmap-Modus)

6 Zeichen/Buchstabe Schriftzeichen im Bitmap- oder Geglättet-Modus Schriftzeichen Modus hängt von der Schriftgrösse und vom Schriftcharakter ab. Beim Geglättet- Modus werden die Pixel entlang der runden Outline in Grauwerte umgewandelt. Antialiasing (Glätten-Modus)* Technik, die Treppeneffekt ausgleicht, indem Grauwerte (oder farbige Zwischenwerte) zwischen das Bitmap und den Hintergrund berechnet werden. (Für Schriftgrössen ab 9 px Höhe empfohlen) * Antialiasing sieht in Flash, Photoshop oder Dreamweaver (HTML) unterschiedlich aus

7 Zeichen/Buchstabe Bsp. Photoshop In Photoshop gibt es die Möglichkeit, das Antialiasing der Schrift für die Bildschirmdarstellung in verschiedenen Stufen einzustellen. Die Einstellung ist abhängig von - Schriftart - Schriftschnitt - Schriftgrösse - Position - Wirkung/Funktion Die Schrift wird anschliessend als Bild eingebettet. Schrift-Glättung in Photoshop, Verdana Regular 12 pt

8 Zeichen/Buchstabe Merkmale für Bildschirmschriften: - Kein zu differenzierter Duktus (vereinfachte Formen) - Offene Punzen - Normale Schriftstärke und Schriftlage (keine Kursven) - Schriftgrad über 9 pt Schriftwahl (mit oder ohne Serifen?) HTML Systemschriften: Arial, Courier, Verdana, Geneva, Helvetica, Times, Georgia, Tahoma, Trebuchet (je nach Betriebssystem, Mac oder PC) Serifenlose Schriften eignen sich besser als Serifenschriften (Treppeneffekt bei detaillierten Formen) Flash oder Schrift als Grafik Auswahl an möglichen Schriften ist hier viel grösser (Achtung, auch hier gelten die nebenstehenden Merkmale) Google fonts: Typekit: Typekit, Google fonts Neuere (gebührenpflichtige) Tools ermöglichen den Einsatz einer grösseren Palette auch für HTML-basierte Websites

9 Exkurs: Flash oder HTML? FLASH Vorteile - Mockup-Tool - Gestaltungsfreiheit, Programmnähe - Systemunabhängige Schriften - Layoutkontrolle - Unabhängig von Browsern Nachteile - Beschränkte Durchsuchbarkeit - Kopieren von Text nicht möglich - z.t. Keine Vor- und Zurückfunktion - Flash-Plugin erforderlich - Flashplayer-Tempo je nach Browser unterschiedlich - Technologie wird für mobile Geräte (iphone/ipad) durch Apple nicht mehr unterstützt (hohe Rechenleistung) HTML Vorteile - Durchsuchbarkeit der Texte - Einfachere Vernetzung/Verlinkung - Text schneller ersetzbar - CMS möglich - HTML ist Standardsprache, kein Plugin - CSS (für die wichtigsten Parameter) Nachteile - Gestaltung nicht intuitiv - beschränkte Auswahl von Schriften und Gestaltungsmöglichkeiten - Layout weniger kontrollierbar, da Erscheinung browserabhängig - Optimierung für versch. Browser nötig

10 Zeichen/Buchstabe Schrift als Bild - Text in Photoshop bearbeiten und als Bild abspeichern - Nicht für längeren Lauftext - Navigationselemente, Logos, Titel, Übertitel, kurze Textmengen - Bildformate: GIF, JPG oder PNG Vorteile - Kontrolle über Typografie - Gesamte Schriftpalette für Gestaltung - Gestaltung frei - Schrift kann pixelgenau platziert werden Nachteile - Textänderungen und Pflege erschwert - Für die barrierefreie Nutzung nicht geeignet - Längere Ladezeiten - Keine Durchsuchbarkeit möglich

11 Zeichen/Buchstabe Bsp. Silkscreen und Mini Spezialfall kleine Schriften (unter 9 pt.) - Spezielle Pixelfonts für Schriften unter 9 Pt. (ca. 5 px Höhe) - Raster von 5 Pixeln Höhe - Können in Flash eingebettet werden - Bei HTML-Websites als Grafik einbetten - Auch für Displays von Handys und Handhelds geeignet (niedrigere Auflösung, bei älteren Modellen). htp://pixelfonts.style-force.net Anwendungsbeispiel:

12 Lesbarkeit/Schrift Mikrotypografie am Bildschirm: Laufweite - Laufweite generell etwas erhöhen - Abhängig von der Punzenweite der Schrift Wortabstand - Richtwert: Punzenbreite des n - Tendenziell Wortabstand erhöhen - Blocksatz ergibt zu grosse WA, da kein Trennprogramm in Browsern vorhanden Inhalt/Form - Auf allzugrosse Textmengen verzichten - Kurze Wörter sinnvoll (kein Trennprogramm in Browsern vorhanden) Laufweite / Wortabstand /Zeilenabstand Um die Lesbarkeit auf dem Bildschirm zu unterstützen ist eine Optimierung der Schrift-Einstellungen nötig! Die Regeln der klassischen Typografie gelten somit auch für den Bildschirm. Zeilenabstand - Etwas grösser als bei Printmedien - Minimum: 1.5 mal die x -Höhe - Abhängig von Schriftart

13 Lesbarkeit/Schrift Satzarten Blocksatz - Nicht zu schmale Spalten wählen - Blocksatz erst ab Zeichen - Keine Trennhilfen (Browser) wird löchrig - Weniger verwendet als im Print - Blocksatz als Grafik einbetten Flattersatz (linksbündig) - Am häufigsten verwendete Satzart - Wortabstände bleiben unverändert - Rhythmus jedoch nur bedingt steuerbar - Darstellung auch browserabhängig - Gute Resultate bei Spaltenbreite Z Andere Satzarten Rechtsbündiger Flattersatz Zentrierter Satz - Nur bei kleinen Textmengen, z.b. bei Titeln oder Legenden

14 Lesbarkeit/Schrift Text-Auszeichnungen - Zur Unterstützung der Aussage oder der Leserführung - z.b. Ankerpunkte, Schlüsselwörter, Unterkapitel, Navigationselemente statischer Text - Sperren - Versalien - Fette Schnitte - Schriftgrössen variieren - Kursive nicht empfohlen (Treppeneffekt) - Einzüge interaktiver Text - Farbe (Rollover, Ankerpunkte) - Unterstreichen nicht empfohlen (für Links reserviert)

15

16 Schrift und Farbe/ Hintergrund - Farbe hat wichtige Funktion - Betrachter durch Farbreize animiert - Farbe verursacht keine Mehrkosten - Bewusster Einsatz von Farbe Farbe als Auszeichnung - Textstellen hervorheben - Inhalte strukturieren (Navigation) - Schmuckelement Farbe und Hintergrund - Bildschirmhintergrund sollte getönt sein - Gute Kontraste für gute Lesbarkeit Farbnuancen - Helle, feine Farbnuancen eignen sich nicht

17 InfoScreen Typografie am Bildschirm Flavia Mosele Schrift und Farbe/Hintergrund Vom Bild zum Farbklima Farbstimmungen - Farben für speziellen Charakter oder Stimmung - Bestehende Farbigkeit (in Bildern z.b.) unterstützen - Farbklima ausgehend von Bildmaterial entwickeln (siehe links) - Tools, für die Entwicklung von Farbkonzepten

18 InfoScreen Typografie am Bildschirm Flavia Mosele Schrift und Farbe/Hintergrund Farbtool Bsp. kuler von Adobe für die Entwicklung von Farbkonzepten

19 Schrift und Farbe/Hintergrund Farbe und Gestaltungsanwendungen Positiv/Negativ-Text Negativtext - Monitor überstrahlt das weisse Schriftild - Weisser Text auf Schwarz wirkt fetter Positivtext - Weisser Hintergrund wird überstrahlt - Schwarze Schrift auf weissem Hintergrund wirkt feiner - Fette Schriften werden überstrahlt, und Punzen wirken kleiner - Die Geglättet Darstellung verbessert bei fetten Schriften die Lesbarkeit - Feine Schriften wirken bei Glättung grauer

20 Schrift und Farbe/Hintergrund Hintergrund/Kontrast - Kontrastreicher Hintergrund stört Lesbarkeit - Deutliche Farb- und Tonwerttrennung Struktur - Harte, stark strukturierte Hintergründe erschweren Lesbarkeit - Weichzeichnung Schattierung Schrift vor Hintergrund ev. Schattieren Farbe /Kontrast - Komplementärkontraste vermeiden - Scharz-Weiss-Kontraste vermeiden - Auf üppige Farbanwendung verzichten - Der Farbe Funktion zuordnen

21 Schrift und Farbe/Hintergrund Farbe und Navigation - Farbe ist Struktur- und Navigationshilfe (z. B. Farben für Menüpunkte) - Unterstützt Leserführung - Setzt visuelle Akzente Kontrastbeispiele - Schwarze Schrift auf weissem Hintergrund abtönen (z.b % Schwarz) - Hellgrauer statt weisser Hintergrund (10 20 % Schwarz) kombiniert mit schwarzer Schrift - Keine Komplementärkontraste - Helle nicht allzu leuchtende Buntfarben kombiniert mit schwarzem Hintergrund - Stark gesättigte Farben als Hintergrund vermeiden Farbbeispiele aus: comedia, Satztechnik Typografie, Bd. 5 Typografie am Bildschirm

22 Schrift und Farbe/Hintergrund Exkurs: Pixelwelten oder Vektoren vs Pixel - Strömung oder schon beinahe eine Gestaltungshaltung auf dem Web - Pixel wird zum Gestaltungsinstrument - Charakteristische Pixel-Ästhetik, Farbigkeit, Komplexität, Vielfalt

23 Auftrag Typografische Gestaltung auf dem Web Wähle drei Kategorien aus der untenstehenden Liste aus. Suche dazu je ein Beispiele einer Website, welche zeigt, wie diese Merkmale in Bezug auf die Gestaltung und Lesbarkeit gelöst sind (gut oder schlecht). 1. Lauftext / Mengensatz / Satzarten 2. Textauszeichnungen 3. Experimentelle Typo / Typo als Bild /Flash 4. Einsatz der Farbe für Text / Hintergrund 5. Farbe als Navigationshilfe 6. HTML, Typekit, Google fonts