Typografie und Layout optimalen Lesbarkeit im Einklang mit ästhetischer Schönheit didaktisch-informationelle Absicht künstlerisch-gestalterisches Anliegen Je größer die Textmenge, desto höher die Anforderungen an den Lesekomfort. 1
Typografie und Layout "typos" (Abdruck, Abbild, Form) "graphein" (schreiben, einritzen) die Lehre von der Form und Gestaltung der Schriftzeichen im weiteren Sinne auch der Gestaltung von ganzen Texten (und Abbildungen) dadurch eine Überschneidung mit den Aufgaben des Layouts 2
Typografie Typografie im engeren Sinne die Lehre von den einzelnen Buchstaben Zusammenfügung von Buchstaben zu Wörtern und von gliedernden Elementen wie Zeilen, Absätzen, Textblöcken, Spalten beschäftigt sich mit den Grundelementen der Textgestaltung mit den Mikroelementen 3
Layout "to lay" (Entwurf, Planung) die Anordnung aller Seitenelemente wie, Texte, Bilder, Fotos, Illustrationen, Logos, Symbole die Makroelemente der Textgestaltung Desktop Publishing DTP der Oberbegriff für das Verfahren, mit Hilfe eines Personal Computers ein Layout herzustellen und für eine Vervielfältigung vorzubereiten 4
Schriftformen die Wahl der richtigen Schriftform schnell erfassbare Wortbilder das Auge in der Zeile halten Die Schrift, die für den überwiegenden Teil eines Textes gewählt wird bezeichnet man als Brotschrift oder Fliesstext. 5
Schriftformen Antiquaschriften Serifenbetonte Schriften mit starken Unterscheidungen der Strichstärken Groteskschriften Serifenlose Schriften ohne, oder mit nur geringen Strichstärkenunterscheidungen Zur Hervorhebung von Textteilen kann zwischen verschiedenen Schriftformen und -größen gewechselt werden mit der Wahl der Schriftart kann man einen gewollten Ausdruck verstärken 6
Schriftformen 7
Großbuchstaben/ Kapitälchen Versalien (Großbuchstaben) Die Kapitälchen sind etwas kleiner als die Großbuchstaben haben dieselbe Strichstärke dadurch wirkt ein durch Kapitälchen hervorgehobenes Wort im Verhältnis zu seiner Umgebung nicht zu groß Prinzipiell sollten alle Auszeichnungen innerhalb eines Fließtextes sparsam erfolgen, um das harmonische Schriftbild nicht zu stören. 8
Zeilenabstand Durchschuss wichtig für die Lesbarkeit des Textes Bei langen Zeilen ist ein größerer Zeilenabstand zu wählen, damit das Auge besser zur nächsten Zeile springen kann. Der Zeilenabstand wird von der Schriftgrundlinie bis zur Mittellinie der nächsten Zeile gemessen 9
10
Sperren/Unterschneiden Sperren weiter gesetzter Buchstabenabstand Unterschneiden enger gesetzter Buchstabenabstand das Kerning dient zur Harmonisierung des Schriftbildes. Der nachfolgende, meist kleinere Buchstabe wird nach links an den anderen Buchstaben herangerückt, um entstandene Lücken zuschließen. Nötig oft bei den Buchstabenkombinationen: Te, Wu, iv, Pa oy. 11
Sperren/Unterschneiden 12
Laufweite Die Lesbarkeit wird negativ beeinflusst, wenn der Wort- und Buchstabenabstand zu groß oder zu klein ist. Ist der Buchstabenabstand so, dass zwei Buchstaben zu weit voneinander entfernt sind, muss die Leserin entscheiden, ob es sich hier um ein Wort handelt oder um zwei. Stehen die Buchstaben zu eng beieinander, so können sie miteinander verschmelzen - "r" und "n" erscheinen als "m". Kleinere Schriften benötigen einen größeren Buchstabenabstand als große Schriften. 13
Wortabstand zu groß: das Auge will unwillkürlich in die nächste Zeile abrutschen, muss vom Gehirn zurückgehalten werden Verstärkte Konzentration auf das das Satzbild lenkt vom eigentlichen Inhalt des Textes ab Schmale und fette Schriften können wegen ihrer kleineren Buchstabeninnenräume (Punzen) mit kleineren Buchstabenund Wortabständen gesetzt werden. Breite und magere Schriften sollten wegen ihrer großen Buchstabeninnenräume mit größeren Buchstaben- und Wortabständen gesetzt werden. 14
Bildschirmtypografie vorhandene typografische Regeln lassen sich für Schrift auf dem Bildschirm nicht direkt übertragen Typografische Regeln bilden aber die Grundlage für Bildschirmtypografie Sie müssen teilweise verändert oder ergänzt werden. 15
Lesevorgang Das lesen von Text am Monitor ist mühsamer als das Lesen von gedrucktem Text. die Lesegeschwindigkeit am Bildschirm ist 25-30% langsamer unkonzentrierter und liest ungenauer 16
Lesevorgang Beim visuellen Aufnehmen von Text werden nicht einzelne Buchstaben und Wörter gelesen, sondern ganze Wortbilder. Das menschliche Auge tastet in vielen kleinen Sprüngen, Saccaden, mit schnellen Bewegungen den Text ab. Das Wortbild wird nur an einigen Stellen fokussiert, der Rest bleibt unscharf. ankommende Wortbilder werden im Gehirn mit bereits gespeicherten verglichen und bei Übereinstimmung findet die entsprechende Assoziation statt 17
Lesevorgang 18
Lesevorgang Beim Lesen von Printmedien springt das Auge mit 5,7 bis 9,2 Saccaden in der Sekunde über den Text. Die Augenaktivität ist bei der Betrachtung von Bildschirmen viel geringer. Beim Lesen am Bildschirm nur noch eine Saccade pro Sekunde Der Grund hierfür liegt darin, dass das Auge bei dem zeilenweisen Neuaufbau der Monitorbilder keine ausreichend festen Anhaltspunkte findet. Beim Scrollen wird dieser Effekt der fehlenden Anhaltspunkte noch verstärkt. 19
Lesevorgang Jakob Nielsen beschreibt die Wahrnehmung von am Monitor dargestellten Texten mit dem Begriff überfliegen (engl. Scannen). Die Nutzer versuchen sich lediglich einen Überblick über die Inhalte zu verschaffen und die Relevanz des Textes für sich zu ermitteln. der Text am Monitor sollte im Inverted Pyramid Style dargestellt werden beginnt mit einer Zusammenfassung dessen, was folgt, wie bei Zeitungstexten: Überschrift, Zusammenfassung, Details 20
Auszeichnungsarten Aufgrund der limitierten Bildschirmgröße und der groben Auflösung Fliesstext kurz halten Um den Leseanreiz zu erhöhen, kann man auf dem Bildschirm eher großzügig setzen, da es hier keine ökonomischen Zwänge wie bei den Printmedien gibt. Allerdings ist auch ein häufiges Scrollen nicht angenehm,- Mittelmaß! lange Textpassagen beispielsweise als separate Datei zum download und zum Ausdrucken bereitstellen 21
Antialiasing Der Monitor stellt alle Inhalte in Form von kleinen quadratischen Feldern (Pixel) dar. Schriften bestehen aber aus vielen Rundungen und feinen Linien. Durch die Pixel ensteht ein "Treppeneffekt", der bei kleinen Schriftgrössen unschön aussieht. Durch Antialiasing werden die Übergänge zum Hintergrund unscharf dargestellt und eine Ausgewogenheit der Schrift simuliert. 22
Einbinden von Text als Grafik Um Schriften im Web darzustellen, hat man zwei Möglichkeiten: Systemfonts zu nutzen oder einen Font als Grafik anzulegen Buchstabenabstände können vor dem Abspeichern und Einbetten als Grafik in den HTML-Code, im Grafikprogramm noch angepasst werden. Achtung Ladezeit! 23
Schriftgröße der Benutzer bestimmt mit seiner Bildschirmauflösung die dargestellte Größe der Schrift bei höheren Auflösungen kann man einige Websites nur mit der Lupe lesen! Für einen Bildschirmtext sollten die Schriftgrade zwischen 10 und 14 Punkt liegen 24
Schriftschnitte Überstrahlungseffekt des Hintergrundes: die Strichstärken der Schrift etwas dicker wählen oder den Hintergrund abdunkeln Magere Schriftschnitte nur bedingt, wenn, dann in sehr großen Schriftgraden. Bei geringen Schriftgraden neigen schmale Schnitte zum Verklumpen. Dadurch wird nicht nur die Lesbarkeit eingeschränkt, auch das Schriftbild wirkt unharmonisch 25
Schriftschnitte kursive Darstellung bei längeren Text nicht Kurven oder schräge Linien schwer auf dem Bildschirm darstellbar Problematischer sind auch hier geringe Auflösungen Auf dem Bildschirm sollten Kursive sparsam und beschränkt auf einzelne Wörter eingesetzt werden. 26
Zeilenabstand sollte großzügiger angelegt werden als auf Papier Auch auf dem Bildschirm gilt, je länger die Zeile, um so größer sollte der Zeilenabstand sein. Breite oder magere Schriftschnitte benötigen einen größeren Zeilenabstand, schmale und fette Schriften können enger gesetzt werden. 27
HTML HTML ist eine Auszeichnungssprache. Aufgabe: logische Bestandteile eines Dokuments beschreiben Als Auszeichnungssprache enthält HTML daher Befehle zum Markieren typischer Elemente eines Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen. In den Anfängen wurde noch kein Augenmerk auf typografische Regeln und Gestaltungsaspekte gelegt!!! 28
Zeilenabstand In HTML kann der Zeilenabstand durch einfügen unsichtbarer Grafiken verändert werden. Bis HTML 3.2 war es nicht möglich, einen Zeilenabstand für Text anzugeben. Erst mit der Einführung von Stylesheets ab HTML 4.0 war dieses Problem anders zu lösen Große Zeilenabstände sollte man benutzen, wenn die Zeilenlänge sehr groß ist 29
Laufweite Typografische Besonderheiten (wie z.b. das Ausrichten der Buchstabenabstände) sind auch mit Stylesheets nicht lösbar. 30