Computergrafik: Typografie und Layout - ETH Zürich
Computergrafik: Typografie und Layout - ETH Zürich
Computergrafik: Typografie und Layout - ETH Zürich
Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.
YUMPU macht aus Druck-PDFs automatisch weboptimierte ePaper, die Google liebt.
<strong>Computergrafik</strong>:<br />
<strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong><br />
Inhalt:<br />
• Geschichtliche Entwicklung der Schrift<br />
• Typografische Begriffe<br />
• Fontformate<br />
• <strong>Typografie</strong> am Bildschirm<br />
•Satzarten<br />
•<strong>Layout</strong> von Printmedien<br />
• Gestaltung eines Posters<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Der Begriff <strong>Typografie</strong> bzw. Typographie stammt aus dem griechischen typos,<br />
was Schlag, Abdruck oder Figur <strong>und</strong> graphein, was malen, schreiben oder ritzen<br />
bedeutet.<br />
Man unterscheidet zwischen Mikrotypografie <strong>und</strong> Makrotypografie:<br />
Die Mikrotypografie oder Detailtypografie betrifft die Gestaltung des Satzes<br />
zwischen Buchstaben <strong>und</strong> Zeichen, Wörtern <strong>und</strong> Zeilen, d. h. die Schriftgrösse,<br />
die Feinheiten der Zeichen-, Wort- <strong>und</strong> Zeilenabstände, den Buchstabenbildern,<br />
Trennungen <strong>und</strong> der Laufweite.<br />
Die Makrotypografie beschäftigt sich mit der Gesamtkonzeption, dem Format,<br />
dem Aufbau, der Gliederung <strong>und</strong> dem Verhältnis von Schrift zu Bild, der<br />
Schriftwahl <strong>und</strong> den Auszeichnungen (Hervorheben einzelner Wörter oder<br />
Wortfolgen).<br />
1
Geschichte<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Bis zur Entwicklung geeigneter Druckverfahren wurden Texte mühevoll <strong>und</strong><br />
zeitraubend abgeschrieben. Im Früh- <strong>und</strong> Hochmittelalter lag diese Tätigkeit <strong>und</strong><br />
damit der Erhalt <strong>und</strong> die Weitergabe von Wissen in den Händen der Mönche.<br />
Beschränkte sich das Spektrum zunächst auf Messbücher <strong>und</strong> andere religiöse<br />
Texte, so kamen im 12. Jahrh<strong>und</strong>ert zunehmend weltliche Texte aus Philosophie,<br />
Mathematik <strong>und</strong> Astronomie hinzu.<br />
Abb. links: Lateinische Schrifttafel (etwa 60 v. Chr.)<br />
Abb. rechts: Schriftstück aus dem 11. Jahrh<strong>und</strong>ert<br />
2
Bleisatz<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Geschichtliche Entwicklung der Druckschriften:<br />
1440-1450 wurde von Johannes Gutenberg die eigentliche <strong>Typografie</strong> erf<strong>und</strong>en.<br />
Mit Hilfe einer Matrize <strong>und</strong> eines Giessinstrumentes konnte er den gleichen<br />
Buchstaben in Lettermetall mehrmals giessen <strong>und</strong> damit ganze Schriftblöcke<br />
setzen.<br />
Bleisatz: Einzelbuchstaben werden zu einem Druckstock zusammengesetzt.<br />
Nach dem Abdruck kann der Druckstock wieder in seine Einzelteile zerlegt <strong>und</strong><br />
die Lettern neu verwendet werden.<br />
1775 wurde das typografische Punktsystem von F. Didot in Paris entwickelt.<br />
3
Bleisatz<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Handsatz<br />
Bis die manuelle Bleisatztechnik auf der Basis von Gutenbergs Erfindung durch<br />
den maschinellen Satz abgelöst wurde, vergingen über vierh<strong>und</strong>ert Jahre. Die<br />
maschinelle Satzherstellung wiederum hatte, bis auf geringfügige<br />
Modifikationen, über einen Zeitraum von beinahe achtzig Jahren Bestand. Mitte<br />
der 1960er-Jahre begann dann der Wechsel vom heissen zum kalten Satz, d.h. die<br />
Umstellung von Bleisatz auf Fotosatz.<br />
Abb.: Schriftsetzerin im B<strong>und</strong>esamt für Landestopografie, etwa 1950<br />
4
Fotosetzmaschine<br />
„Lumitype“<br />
Fotosatz<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Unter Fotosatz wird die fotografische Übertragung (Belichtung) von<br />
Schriftzeichen auf lichtempfindliches Material verstanden. Man benötigt dazu<br />
eine Lichtquelle, eine negative Darstellung aller Schriftzeichen <strong>und</strong> Fotomaterial<br />
(Film oder Papier). Der Belichtungsvorgang erzeugt ein latentes, das heisst<br />
unsichtbares, seitenverkehrtes Bild. Um dieses Bild sichtbar <strong>und</strong> haltbar zu<br />
machen, muss es entwickelt, anschliessend fixiert <strong>und</strong> gewässert werden.<br />
Die Lasertechnologie hat in den letzten Jahren zu einer grossen Umwälzung im<br />
Satzwesen geführt: Einfache Laserdrucker mit für viele Zwecke ausreichenden<br />
Auflösungen (typischerweise 600 dpi) sind relativ kostengünstig erhältlich <strong>und</strong><br />
versetzen daher auch kleine Betriebe oder sogar Privatpersonen in die Lage, vom<br />
Schreibtisch aus zu publizieren. Bekannt geworden ist diese Entwicklung unter<br />
dem englischen Begriff Desktop-Publishing (DTP).<br />
Ein grosser Vorteil des DTP ist, dass ein- oder mehrfarbige Texte <strong>und</strong> Bilder<br />
gemeinsam in einem Datenbestand verarbeitet werden. Dabei können die<br />
Ergebnisse sofort auf dem Bildschirm überprüft werden, der Schrift <strong>und</strong><br />
Gestaltungselemente so wiedergibt, wie sie nach dem Druck auch tatsächlich<br />
aussehen (WYSIWYG-Prinzip: What you see is what you get). Mit Hilfe eines<br />
Laserbelichters können die Druckvorlagen anschliessend auf Film oder<br />
neuerdings direkt auf die Druckplatte (Computer to Plate) belichtet werden.<br />
5
Typografische Masse<br />
1 Pica = 12 Points = 4,22 mm<br />
1 Point = 0,3528 mm<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Das in der heutigen Computerprogrammen angewendete typografische<br />
Masssystem basiert auf dem 72. Teil eines Inches. Ein DTP-Punkt entspricht<br />
somit aufger<strong>und</strong>et auf vier Stellen 0.3528 Millimeter<br />
6
Serifenschriften („Antiqua“)<br />
„Füsschenschriften“ eignen sich besser für Fliesstext<br />
Serifenlose Schriften („Grotesk“)<br />
eignen sich eher für Titeleien <strong>und</strong> für den Bildschirm<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Serifenschriften: Schriften mit Füsschen.<br />
Die Serifen (Füsschen) sind die feinen Linien, die einen Buchstabenstrich am<br />
Ende, quer zu seiner Gr<strong>und</strong>richtung abschliessen. Es wird allgemein<br />
angenommen, dass Serifen die Lesbarkeit eines gedruckten Textes verbessern,<br />
daher werden längere Texte üblicherweise in einer Serifenschrift gedruckt.<br />
Serifenlose Schriften: Schriften ohne Füsschen.<br />
Serifenlose Schriften werden eher für kurze Texte, Überschriften <strong>und</strong> für den<br />
Bildschirm eingesetzt.<br />
7
Andere Schriftarten<br />
nicht geeignet für (Karten-)beschriftungen<br />
z.B. Gebrochene Schriften:<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Gebrochene Schriften:<br />
Gebrochene Schrift ist eine Sammelbezeichnung für eine Reihe lateinischer<br />
Schriftarten, bei denen die Bögen der Buchstaben ganz oder teilweise gebrochen<br />
sind.<br />
Zum Beispiel die Frakturschrift:<br />
Die Fraktur ist eine gebrochene Schrift, die zur Zeit der Renaissance am Anfang<br />
des 16. Jahrh<strong>und</strong>erts in Deutschland entstanden ist. Die Fraktur löste in der Mitte<br />
des 16. Jahrh<strong>und</strong>erts die „Schwabacher“ als meistbenutzte Druckschrift ab <strong>und</strong><br />
blieb dies bis zu ihrem zeitweisen Verbot durch den geheimen Schrifterlass des<br />
nationalsozialistischen Regimes 1941.<br />
Gebrochene Schriften sind nicht mehr zeitgemäss <strong>und</strong> auch schwer lesbar. Daher<br />
sollten diese bei modernen Druckerzeugnissen nicht mehr verwendet werden.<br />
8
Schriftfamilie<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Schriftfamilie: Gruppe formal zusammengehörender Schriften mit demselben<br />
Namen, die in unterschiedliche Schnitte unterteilt ist. Gewöhnlich von einem<br />
einzigen Entwerfer geschaffen.<br />
Ein Schriftschnitt ist eine Schriftversion einer Schriftfamilie. Schriftfamilien<br />
verfügen teilweise über mehrere Schriftschnitte, z.B.:<br />
light (mager),<br />
demi (viertel- bis halbfett)<br />
bold (dreiviertelfett bis fett)<br />
italic (kursiv)<br />
VERSALIEN (Grossbuchstaben)<br />
Kapitälchen (small caps)<br />
Eine gut ausgebaute Schrift heisst, dass sie viele Schnitte enthält.<br />
Abb.: Schriften rechts in der Grafik besitzen wenige Schnitte (schlecht<br />
ausgebaut). Schriften, die oben in der Grafik aufgeführt sind, werden selten<br />
benutzt.<br />
9
Schriftfamilie<br />
Univers: 21 Schriftschnitte<br />
Thesis: 144 Schriftschnitte<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Abb. links: Die Univers von Adrian Frutiger besitzt 21 verschiedene Schnitte.<br />
Abb. rechts: Die Thesis ist mit 144 Schnitten eine überdurchschnittlich gut<br />
ausgebaute Schrift.<br />
10
Schriftschnitte<br />
Variante einer Schrift<br />
Stärken:<br />
Mager, Normal, Halbfett, Fett<br />
Breiten:<br />
Schmal, Normal, Breit, Extrabreit<br />
Lagen:<br />
Stehend, Kursiv, Rückwärts liegend<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
11
Kursiv (engI. Italic)<br />
Grotesk-Schriften schräggestellte<br />
Varianten der Gr<strong>und</strong>form<br />
Antiqua-Schriften eigenständige<br />
Schriftschnitte<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
12
Schriftdifferenzierung<br />
Schriftart (-form):<br />
Arial, Univers, Garamond,...<br />
Schriftgrad (-höhe):<br />
Kegelhöhe (in Punkten)<br />
Schreibform:<br />
Minuskeln, Versalien, Kapitälchen<br />
Schriftfarbe, Schriftverlauf<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Der Schriftgrad beschreibt die Schriftgrösse nach Punkten, dem heutigen gültigen<br />
typografischen Masssystem.<br />
Achtung: Der Schriftgrad orientiert sich an der Kegelgrösse oder auch<br />
Vertikalhöhe der Bleilettern aus den Zeiten des Bleisatzes. Sie berücksichtigt die<br />
Höhe eines Buchstabens mit Oberlänge sowie den nichtdruckenden Teil<br />
unterhalb der Schriftlinie (siehe Abb. rechts).<br />
13
Geviert<br />
Masseinheit: 1 Geviert entspricht der Höhe eines Schriftkegels.<br />
Laufweite<br />
Abstand zwischen den Buchstaben..<br />
Durchschuss<br />
Freier Zwischenraum zwischen zwei Zeilen.<br />
Randausgleich<br />
Zeilenausgleich<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
14
Versalien<br />
Grossbuchstaben<br />
Versalhöhe<br />
Höhe der Grossbuchstaben,<br />
nicht identisch mit Punktgrösse<br />
Gemeine<br />
Kleinbuchstaben<br />
Punzen<br />
Buchstabeninnenraum<br />
Kapitälchen<br />
Grossbuchstaben in der<br />
Höhe der Mittellänge<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
15
Ligaturen<br />
ohne Ligaturen<br />
mit Ligaturen<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Ligaturen sind Buchstabenverbindungen, die zwei oder drei Zeichen zu einem<br />
einzelnen Zeichen zusammenfassen. Ligaturen dienen zur optischen Korrektur<br />
von Buchstabenpaaren (siehe Abb.).<br />
Die Anzahl der Ligaturen ist bei verschiedenen Schriftarten unterschiedlich. Die<br />
Ligaturen werden üblicherweise typografisch gestaltet <strong>und</strong> bilden nicht nur eine<br />
einfache Verkleinerung der Laufweite (siehe Abb.) sondern vermeiden zudem<br />
optische Lücken, die beim schnellen <strong>und</strong> angenehmen Lesen stören.<br />
In guten Fonts sind spezielle Ligaturen vorhanden. Die anderen Ligaturen werden<br />
durch entsprechende Positionierung der typografischen Zeichen emuliert<br />
(nachgebildet).<br />
Bei Microsoft-Programmen wie Word hingegen müssen Ligaturen noch als<br />
Sonderzeichen eingefügt werden <strong>und</strong> verwirren die Rechtschreibprüfung. Das<br />
Emulieren mancher Ligaturen aus mehreren Einzelzeichen gelingt dann gut,<br />
wenn das Schriftdesign des Fonts darauf bereits angepasst ist.<br />
In gewissen Programmen kann man unter dem Mac-Betriebssystem selbst<br />
bestimmen, ob man Ligaturen verwenden möchte oder nicht (siehe Abb. Pull-<br />
Down-Menü).<br />
16
Mediävalziffern<br />
Nicht geeignet für<br />
Kartenbeschriftung<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Mediävalziffern oder Minuskelziffern haben Ober- <strong>und</strong> Unterlängen wie<br />
Kleinbuchstaben.<br />
17
Schusterjunge<br />
Hurenkind<br />
Alleinstehende Zeile eines Absatzes, die am Anfang / Ende<br />
einer Spalte oder Seite unschön <strong>und</strong> verwirrend wirkt.<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Als Hurenkind, seltener Hurensohn, wird die letzte Zeile eines Absatzes<br />
bezeichnet, wenn sie zugleich die erste einer neuen Spalte oder Seite ist. Das<br />
Gegenstück zum Hurenkind ist der Schusterjunge, die erste Zeile eines Absatzes<br />
als letzte Zeile einer Spalte oder Seite. Hurenkinder gelten in der <strong>Typografie</strong> als<br />
schwerer Fehler, da sie die Konturen des Satzspiegels besonders stark<br />
beeinträchtigen.<br />
18
Kerning (Unterschneidung)<br />
Sperren / Spationieren<br />
Buchstaben- oder Zahlenabstände vergrössern<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Kerning (Unterschneiden) ist das Verringern des vorgegebenen Raumes<br />
zwischen zwei oder mehreren Zeichen; siehe Abb. oben.<br />
Spationieren (auch Sperren) ist das Erweitern der vom Schrifthersteller<br />
vorgegebenen Laufweite.<br />
Web-Literatur:<br />
Typografische Fachbegriffe<br />
http://www.agenturtschi.ch/wissen/fachbegriffe/<br />
19
Anführungszeichen<br />
(1) Gänsefüsschen, ehem. Dt. (2) Guillemets<br />
(2) fr, heute angewandt in CH, F, I, Au<br />
(3) Englisch<br />
(4) Angewandt in Deutschland<br />
Akkolade: Geschweifte Klammer, auch<br />
Nasenklammer { }.<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
20
Fontformate<br />
Bitmap:<br />
Rasterschrift, feste Auflösung, geräteabhängig<br />
PostScript:<br />
Seitenbeschreibungssprache von Adobe,<br />
plattformunabhängig, Raster & Vektor<br />
TrueType:<br />
reines Schriftformat<br />
OpenType:<br />
vereint PostScript <strong>und</strong> TrueType,<br />
plattformunabhängig<br />
Vektor<br />
Bitmap<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Bitmap-Fonts sind Bilder einer Schrift. Sie müssen nicht installiert werden.<br />
Bitmap-Fonts sind Teil des Betriebssystems <strong>und</strong> werden u.a. für die Darstellung<br />
von Text in Dialogfeldern verwendet. Die Bitmap-Fonts haben eine feste<br />
Auflösung <strong>und</strong> sind geräteabhängig. Die Fonts haben die Extension .FON.<br />
Benutzer sollten keinen Zugriff auf diese Fonts haben. Beim Betriebssystem<br />
Windows hat man. Beim Ausgeben solcher Schriften gibt es meist pixlige<br />
Schriften, da sie nicht skalierbar sind.<br />
PostScript ist eine Seitenbeschreibungssprache <strong>und</strong> wurde von Adobe<br />
entwickelt. PostScript kann daher nicht nur Text, sondern auch Grafiken <strong>und</strong><br />
eingescannte Bilder wiedergeben. Die Fonts haben die Extension .PS. PostScript<br />
ist eine OutlineSchrift. Dass der Text auch am Bildschirm skalierbar erscheint,<br />
muss bei älteren Windows-Betriebssystemen der Adobe Type Manager (ATM)<br />
installiert sein.<br />
Das später entwickelte True-Type-Format (.TTF) von Microsoft <strong>und</strong> Apple<br />
vereint die Bildschirm- <strong>und</strong> Druckerfonts in einer Datei. TrueType ist ein reines<br />
Schriftformat. True Type ist wie PostScript eine skalierbare Outline-Schrift,<br />
einziger Unterschied besteht darin, dass TrueType B-Spline verwendet, im<br />
Gegensatz zu Bézierkurven bei PostScript. Beim Ausdruck müssen True Type-<br />
Schriften in ein PostScript umgewandelt werden, TrueType-Fonts sind zwischen<br />
PC <strong>und</strong> Mac nicht kompatibel.<br />
Dies ändert sich nun mit dem neusten von Microsoft <strong>und</strong> Apple entwickelten<br />
Open-Type-Format. Ein Open-Type-Font ist eine einzige Datei <strong>und</strong> kann ohne<br />
Konvertierung auf Windows- <strong>und</strong> Macintosh-Beriebssystemen eingesetzt werden.<br />
21
Hints<br />
Optimierung der Schrift für die Bildschirmdarstellung<br />
<strong>und</strong> niedrig auflösende Ausgabemedien.<br />
ohne<br />
mit<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Hinting ist die Optimierung der Schrift für die Bildschirmdarstellung <strong>und</strong> niedrig<br />
auflösende Ausgabenmedien. Mit dem Hinting soll erreicht werden, dass typische<br />
Charaktere der Schrift am Bildschirm erhalten bleiben.<br />
22
Bildschirm-Standardschriften<br />
MAC Font<br />
Helvetica<br />
Times<br />
Courier<br />
Symbol<br />
Geneva<br />
Chicago<br />
Zapf Dingbats<br />
Palatino<br />
PC Font<br />
Arial<br />
Times New Roman<br />
Courier New<br />
Symbol<br />
MS Sans Serif<br />
kein Äquivalent<br />
Wing Dings<br />
Book Antiqua<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Bildschirm-Standardschriften<br />
Gut geeignete Schriften für den Bildschirm sind die Standards. Unter Windows<br />
sind es für die Browser geeigneten Schriften Arial <strong>und</strong> Times, die heute von der<br />
Verdana <strong>und</strong> Georgia abgelöst werden.<br />
Beim Mac sind es Chicago, Geneva, Monaco, New York <strong>und</strong> neu Lucida Grande.<br />
Die Schriftwahl am Bildschirm wird eingeschränkt, durch den Umstand, dass die<br />
entsprechende Schrift auch beim Benutzer installiert sein muss.<br />
OpenType (Adobe) <strong>und</strong> TrueDoc-Schriften (Bitstream) sind fähig, die Fonts<br />
mitzugeben, im HTML einzubetten <strong>und</strong> vom Browser erkannt zu werden.<br />
Mac-Schriften tragen oft Städtenamen. Dazu gibt es in der PC-Welt vielfach ein<br />
Äquivalent (siehe Abb.)<br />
Quelle:<br />
http://weblab.uni-lueneburg.de/weblab/seminare/webdesign/index.php<br />
23
Schriftgrösse am Bildschirm<br />
MAC (1 Inch = 72 Pixel, 72 dpi)<br />
PC (WYSIWYG, 1 Inch = 1 Inch, 96 dpi)<br />
Beispiel (abhängig von der Auflösung des Monitors):<br />
Mac<br />
1pt = 1 px<br />
Windows 1pt = 1.3 px<br />
Mac<br />
10pt = 10 px<br />
Windows 10pt = 13 px<br />
Vektorschriften am Mac kleiner<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Punkte (Points) sind am Bildschirm bedeutungslos. Punkte sind eine Einheit für<br />
den Druck, nicht für den Bildschirm. Um Punkte auf dem Bildschirm darstellen<br />
zu können, müssen sie in Pixel umgerechnet werden. Dies geschieht anhand der<br />
ppi Zahl (Pixel Pro Zoll*). Diese Zahl kann sehr unterschiedlich sein. Der<br />
Unterschied ist grösser, je geringer die Auflösung des Monitors ist.<br />
Der PC arbeitet mit dem WYSIWYG-Prinzip**, d.h. ein Inch soll auf dem<br />
Bildschirm tatsächlich als Inch dargestellt werden. Bei der üblichen Verwendung<br />
von 800 x 600 Pixeln auf einem 15"-Monitor folgt, dass Windows ein Inch als 96<br />
Pixel darstellt.<br />
Mac-Rechner dagegen versuchen eine direkte Korrelation zwischen Pixelhöhe<br />
<strong>und</strong> Punktgrösse der Schrift herzustellen. Daher hat ein Inch auf dem Mac nur 72<br />
Pixel.<br />
Der Effekt ist, dass eine Schrift auf einem Windows-System noch lesbar, auf dem<br />
Macintosh jedoch nicht mehr entzifferbar ist.<br />
* 1 Zoll = 1 Inch (engl.) = 25.4 mm<br />
** WYSIWYG steht für What You See Is What You Get<br />
Quellen:<br />
S. 128 PDF-Bibel, S. 12 TypeDesign, S. 312 Lexikon der Kartografie <strong>und</strong><br />
Geomatik, S. 15 Satztechnik <strong>und</strong> <strong>Typografie</strong><br />
24
Text am Bildschirm<br />
• grössere Schriftgrade <strong>und</strong> Zeilenabstände verwenden.<br />
• nicht mehr als 10 bis 25 Zeilen / Textblock.<br />
• Je kleiner der Schriftgrad, umso kürzer sollten Textblöcke sein<br />
• Zeilenlänge 60 bis 80 Zeichen<br />
• Linksbündiger Flattersatz verwenden<br />
Schriften am Bildschirm<br />
• Serifenschriften meiden, falls doch, dann nicht kleiner als 16p<br />
• Längere Textpassagen mit Kursiv-Schriften (italic) meiden<br />
• Längere Textpassagen mit Fett-Schriften (bold) meiden<br />
• Magere (light), englaufende (condensed) Schriften meiden<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Zur Lesbarkeit von Schriften am Bildschirm<br />
Am Bildschirm sind lange Texte in aller Regel nahezu unlesbar. Dies liegt vor<br />
allem an der geringen Auflösung des Monitors im Vergleich zu einem gedruckten<br />
Dokument <strong>und</strong> an der mangelnden Qualität der Bildschirme. Daher ist man<br />
häufig dazu übergegangen, lange Texte als PDF-Dokument zur Verfügung zu<br />
stellen, so dass Benutzer sich die Texte unkompliziert ausdrucken können. So<br />
kann man sich auf die Erkenntnisse der Textgestaltung für gedruckte Texte<br />
berufen. Wie aber kann man die Lesbarkeit von Texten, die auf dem Bildschirm<br />
gelesen werden sollen, optimieren?<br />
Unter Lesbarkeit versteht man die Geschwindigkeit, mit der sich das genaue<br />
Aufnehmen des Inhaltes ohne besonderes Ermüden vollzieht. Die wichtigsten<br />
Parameter sind hierbei:<br />
• Schriftgrösse<br />
• Zeilenlänge (60 bis 80 Zeichen)<br />
• Zeilenabstand (in Relation zum Schriftgrad 1 - 1.5)<br />
• Linksbündiger Flattersatz<br />
• Verwendung von speziellen Bildschirmschriftarten wie Verdana oder<br />
Georgia, die auf die Verwendung in einem Pixelraster hin optimiert wurden<br />
• Serifenschriften unter 16 Punkten sollten am Bildschirm vermieden werden<br />
• kursive Schriften werden durch das Verlassen des Pixelrasters zackig <strong>und</strong><br />
pixelig dargestellt, was die Lesbarkeit von längeren Textpassagen erschwert.<br />
25
Negativschriften<br />
Zu dünn, Buchstaben<br />
zu nahe beieinander<br />
Erweiterter<br />
Buchstabenabstand, 15%<br />
Schwarzanteil als<br />
Blendhemmer<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Negativschriften sind wesentlich schwerer lesbar <strong>und</strong> sollten daher immer ca. 10<br />
- 20% grösser sein wie bei einer Positivschrift.<br />
Bildschirmtexte mit Negativschriften eignen sich in der Regel nicht für den<br />
Ausdruck. Sie sind gr<strong>und</strong>sätzlich schwerer lesbar als Positivschrift <strong>und</strong> führen zu<br />
einem hohen Verbrauch an Tinte <strong>und</strong> Toner.<br />
26
Antialiasing von Schriften<br />
14 Punkt<br />
60 Punkt<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Unter Antialiasing versteht man das Beseitigen des so genannten Treppeneffekts<br />
der bei der Rasterung einer Form (Linie, Kreis, Schrift u. ä.) entsteht.<br />
Durch Antialiasing wird die scheinbare Punktgrösse des Bildschirms reduziert<br />
<strong>und</strong> damit ein optisch ansprechenderes Bild erzielt. Antialiasing hat u.a. positive<br />
Auswirkungen auf die Lesbarkeit der Schrift.<br />
Das Antialiasing wirkt sich vor allem bei grösseren Bildschirmschriften positiv<br />
aus (ab 16 bis 20 Punkt je nach Schrift). Bei kleinen Punktgrössen kann das<br />
Schriftbild bei einer Glättung verschwommen wirken (siehe 14 Punkt-Abbildung<br />
oben). Bei der geglätteten 60 Punkt Schrift wird diese nicht mehr als<br />
verschwommen wahrgenommen.<br />
In vielen DTP-Programmen kann ein Antialiasing vorgenommen werden (siehe<br />
Abb. unten).<br />
27
ohne Antialiasing<br />
mit Antialising<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Abb. unten links: Webkarte MapQuest, 2002, Schrift nicht geglättet.<br />
Abb. unten rechts: Institut für Kartografie, <strong>ETH</strong> Zürich, Schrift geglättet.<br />
28
Wirkung der Schriften<br />
Garamond 3 Italic<br />
Frutiger Italic<br />
Auszeichnen<br />
Wörter im Text hervorheben<br />
Frutiger roman<br />
Poetic Chancery III<br />
Futura<br />
Helvetica Inserat<br />
Neue Helvetica 55<br />
Goudy Italic<br />
Caecilia Roman<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
29
Schriftgestalter<br />
Adrian Frutiger<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Mit Schweizer <strong>Typografie</strong> bezeichnet man die auf der neuen <strong>Typografie</strong><br />
aufbauende Gestaltungsrichtung seit etwa 1955.<br />
Kennzeichnend sind asymmetrische, sachliche Darstellung, serifenlose Schriften<br />
(Grotesk-Schriften) in wenigen Schriftgraden, extreme Weissräume <strong>und</strong> der<br />
Verzicht auf Schmuckelemente.<br />
Bekannte Typografen die den Schweizer Stil geprägt haben: Max Bill, Adrian<br />
Frutiger, Anton Stankowski, Bruno Pfäffli, Emil Ruder, Armin Hofmann, Josef<br />
Müller-Brockmann.<br />
Adrian Frutigers (siehe Abb.) zwei bekanntesten Schriften sind die serifenlose<br />
Univers <strong>und</strong> die für den Pariser Flughafen Charles de Gaulles entworfene<br />
Frutiger. Daneben gestaltete Frutiger zahlreiche weitere Schriften, wie die<br />
Avenir, Centennial, Iridium, Meridien <strong>und</strong> Serifa.<br />
30
Software<br />
Fontographer<br />
Schriftanbieter<br />
Adobe<br />
Linotype<br />
Agfa<br />
Monotype<br />
URW<br />
Fontek<br />
Emigre<br />
...<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Die grössten kommerziellen Schriftanbieter sind oben aufgelistet.<br />
Mit den Programmen Fontlab oder Fontographer können neue Schriften erstellt<br />
oder bestehende Schriften verändert werden.<br />
31
Darstellung von Signaturen<br />
<strong>und</strong> Flächenmuster mittels Schriften<br />
Hecke<br />
Böschungsschraffen<br />
Signaturen<br />
Verwendung von komplexen Einzelsignaturen oder regelmässigen<br />
Flächenstrukturen als Schrift verkleinert die Dateigrösse<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Signaturen können auch als Font abgelegt werden. Siehe Abbildungen oben.<br />
32
Zeilenabstand<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Schmaler Punzen: Kleiner Buchstabeninnenraum<br />
Breiter Punzen: Grosser Buchstabeninnenraum<br />
Breite Schriften verlangen wegen des breiteren Punzen grössere Zeilenabstände,<br />
aber auch grössere Wortabstände.<br />
Der Zeilenabstand wird von Schriftlinie zu Schriftlinie gemessen <strong>und</strong> sollte wie<br />
auch die anderen freien Räume eines Textblockes optimal zur Schriftart <strong>und</strong><br />
deren Grösse gehalten werden. Bei Punktgrössen von 9 bis 12 gilt dabei die grobe<br />
Regel von 120 Prozent der Schriftgrösse. Grosse Schriften vertragen hingegen<br />
mitunter sogar einen negativen Zeilenabstand. Der Zeilenabstand muss<br />
mindestens so gross sein, dass der Leser bequem den Anfang der nächsten Zeile<br />
findet <strong>und</strong> nicht versehentlich wieder in die eben schon gelesene Zeile gerät.<br />
Breitere Zeilen erfordern mehr, kürzere weniger Abstand.<br />
33
Satzarten ( )<br />
Flattersatz<br />
Werksatz: Alle in Buchform<br />
erscheinenden Drucksachen<br />
Blocksatz<br />
Spaltensatz<br />
Akzidenzsatz: Gelegenheitsdrucksachen<br />
wie Briefbogen,<br />
Rechnung, Visitenkarte, usw.<br />
Mittelachsensatz<br />
Tabellensatz: Satz mit<br />
Linien, Text <strong>und</strong> Ziffern<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Blocksatz wirkt neutral <strong>und</strong> ruhig; die Zeilenlänge sollte aber mindestens<br />
8 Wörter pro Zeile haben, um die Variationsbreite der Wortzwischenräume<br />
erträglich zu halten. Die ideale Zeilenlänge beträgt 60 bis 80 Zeichen. Es sollten<br />
nie weniger als 40 Zeichen (inkl. Leerzeichen) pro Zeile verwendet werden. Im<br />
Webdesign ist Blocksatz ungebräuchlich.<br />
Linksbündiger Flattersatz ist von gleich guter Lesbarkeit wie Blocksatz, wirkt<br />
oft moderner <strong>und</strong> hilft ausserdem, unnötige Trennungen zu vermeiden. Allerdings<br />
ergibt ein automatisch generierter Flattersatz (Rauhsatz) ohne Verwendung eines<br />
Ästhetikprogramms oder Nachbearbeitung von Hand einen unbefriedigenden<br />
Zeilenfall.<br />
Auf Mittelachse zentrierte grössere Textmengen sind schwer lesbar, da die<br />
Blickbewegungen zum nächsten Zeilenanfang ständig variieren. Das Gleiche gilt<br />
für rechtsbündigen Flattersatz.<br />
Spaltensatz: Spalten sollten durch einen deutlichen Zwischenraum voneinander<br />
getrennt sein, der mindestens so gross wie der Schriftkegel ist. Bei geringerem<br />
Zwischenraum ist eine Trennlinie zu verwenden.<br />
34
Satzspiegel<br />
Der Satzspiegel ist die Breite<br />
<strong>und</strong> Höhe einer bedruckten<br />
Fläche oder eines Falzteils.<br />
Optische Mitte<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Satzspiegel: Die mit druckenden Elementen bedeckte Fläche einer Seite mit<br />
Ausnahme der Seitenzahl.<br />
Papierformat <strong>und</strong> Satzspiegel müssen in einem optisch ansprechenden Verhältnis<br />
zueinanderstehen. Zur Festlegung des Satzspiegels gibt es verschiedene Wege.<br />
Die zuverlässigste Methode ist dabei das geschulte Auge. Zwei<br />
gegenüberliegende Seiten sollen optisch als ganzes wirken, d.h. der B<strong>und</strong> soll<br />
kleiner sein als die beiden äussern Papierränder. Das Ganze soll in die optische<br />
Mitte der Papierhöhe gestellt werden.<br />
35
Titelei (Buchform)<br />
Vorsatz: Doppelseite am Anfang<br />
<strong>und</strong> am Schluss eines Buches<br />
Vakat: Leere Seite, gelegentlich<br />
mit Illustration oder Bildnis<br />
des Verfassers (Frontispiz).<br />
Schmutztitel: Titelschutz,<br />
Autor <strong>und</strong> Inhaltsangabe<br />
Impressum: Copyright, Druckvermerke,<br />
Jahrgang, Verlag, usw.<br />
Widmung (Dedikation): Hier kann<br />
auch das Vorwort stehen<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Titelei (Titelbogen) richtet sich nach dem Umfang des Buches <strong>und</strong> beträgt<br />
maximal 16 Seiten. Die Reihenfolge ist heute nicht mehr streng festgelegt. Sie<br />
richtet sich vielmehr nach dem Buchinhalt.<br />
Der Vorsatz ist eine Doppelseite am Anfang <strong>und</strong> am Schluss eines Buches. Je<br />
eine Seite wird auf den Buchdeckel gezogen (geklebt) <strong>und</strong> bildet so eine<br />
Verbindung zwischen Buchdeckel <strong>und</strong> Buchblock. Besonders bei Bildbänden<br />
wird das Vorsatzpapier vielfach bedruckt mit einer Illustration oder mit einer<br />
Karte oder Kartenskizze.<br />
36
<strong>Layout</strong>: Poster<br />
Demo im Vektor-Grafikprogramm Illustrator<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
Mit dem Vektor-Grafikprogramm Illustrator wird gezeigt, wie das Poster<br />
gestaltet werden kann: Die Dateien sind zu finden auf dem Unterrichtsserver:<br />
Aktuelle_Lehrveranstaltungen\Geometrie_<strong>Computergrafik</strong>\Unterlagen_IKA\Unte<br />
rlagen_Vorlesungsunterlagen\4_<strong>Typografie</strong>_<strong>Layout</strong>_Raeber\poster)<br />
Es werden <strong>Layout</strong>s von Printmedien gezeigt <strong>und</strong> besprochen:<br />
Facts, Tages-Anzeiger, Neue Zürcher Zeitung, usw.<br />
Dabei wird u.a. auf die Anzahl Spalten, Spaltenbreite, Zeilenabstände,<br />
Schriftarten <strong>und</strong> Schriftgrössen hingewiesen. Die Anordnung von Bildern samt<br />
Bildlegenden wird ebenfalls besprochen.<br />
37
„Schildbürger“<br />
Schrift elektronisch schräg verzogen<br />
falsch: Oe richtig: Ö<br />
Wieso ist bei 1,85 das<br />
„m“ hochgestellt?<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
38
Flickwerk<br />
Max darf nur 2 Std.<br />
parken...<br />
Was meint man mit dem Wort<br />
„auch“? H<strong>und</strong>e oder Autos?<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
39
Vielen Dank<br />
für die Aufmerksamkeit<br />
Institut für Kartografie – «Geometrie <strong>und</strong> <strong>Computergrafik</strong>» SS 2007<br />
Teil 2: <strong>Typografie</strong> <strong>und</strong> <strong>Layout</strong> (Stefan Räber)<br />
40