Typografie

Rahmen

Was Typografie kann

Vier Arbeiten aus hundert Jahren

Typografie als Handwerk William Morris, Edward Burne-Jones: The Works of Geoffrey Chaucer, Kelmscott Press, 1896. Wikimedia Commons, gemeinfrei — Typografie als Handwerk
William Morris, Edward Burne-Jones: The Works of Geoffrey Chaucer, Kelmscott Press, 1896. Wikimedia Commons, gemeinfrei

Typografie macht Lärm Filippo Tommaso Marinetti: Zang Tumb Tuuum, 1914. Wikimedia Commons, gemeinfrei — Typografie macht Lärm
Filippo Tommaso Marinetti: Zang Tumb Tuuum, 1914. Wikimedia Commons, gemeinfrei

Der Text wird zum Bild Guillaume Apollinaire: Il pleut, aus Calligrammes, 1918. Wikimedia Commons, gemeinfrei — Der Text wird zum Bild
Guillaume Apollinaire: Il pleut, aus Calligrammes, 1918. Wikimedia Commons, gemeinfrei

Gebaut aus Setzkastenmaterial, mit Daumenregister El Lissitzky: Für die Stimme, Gedichte von Wladimir Majakowski, 1923. Wikimedia Commons, gemeinfrei — Gebaut aus Setzkastenmaterial, mit Daumenregister
El Lissitzky: Für die Stimme, Gedichte von Wladimir Majakowski, 1923. Wikimedia Commons, gemeinfrei

Einstieg (ca. 3 Minuten). Vier Arbeiten, kaum kommentiert, einfach wirken lassen. Danach die geschützten Arbeiten im Raum zeigen (nächste Folie), dann das Zitat.

William Morris, »The Works of Geoffrey Chaucer«, Kelmscott Press 1896: Als Antwort auf die billigen Massendrucke der Industrialisierung druckt Morris Bücher wie im Mittelalter, mit eigenen Schriften, Ornamenten und Holzschnitten von Edward Burne-Jones. Typografie als Handwerk und Haltung, Beginn der Arts-and-Crafts-Bewegung im Buch.

Filippo Tommaso Marinetti, »Zang Tumb Tuuum«, 1914: Futurismus. Marinetti beschreibt die Belagerung von Adrianopel als Lautgedicht. Die Buchstaben werden groß, schräg, laut. Typografie macht Geräusche.

Guillaume Apollinaire, »Il pleut«, aus »Calligrammes«, 1918: Die Zeilen laufen wie Regen über die Seite. Der Text wird zum Bild.

El Lissitzky, »Für die Stimme«, Gedichte von Wladimir Majakowski, 1923: Konstruktivismus. Lissitzky baut die Seiten aus Setzkastenmaterial, Balken und Buchstaben. Am Rand ein Daumenregister: Man findet jedes Gedicht, ohne zu blättern. Konsultierendes Lesen, vor hundert Jahren.

Alle vier Werke sind gemeinfrei, die Scans stammen von Wikimedia Commons.

Weitere Arbeiten zeigen wir im Raum.

Josef Müller-Brockmann, Otl Aicher, Wim Crouwel, Kurt Weidemann: Ihre Werke sind noch urheberrechtlich geschützt und stehen deshalb nicht in den öffentlichen Folien. Zum Nachschauen: die Sammlung des Museums für Gestaltung Zürich.

Typografie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift.

Kurt Weidemann

Woher kommt unsere Schrift?

Warum gibt es zwei Sorten Buchstaben?

Erst Bilder: Ein Zeichen zeigt eine Sache Ägyptische Hieroglyphen, ab ca. 3200 v. Chr. — Erst Bilder: Ein Zeichen zeigt eine Sache
Ägyptische Hieroglyphen, ab ca. 3200 v. Chr.

Dann Laute: Ein Zeichen steht für einen Laut Griechisches Alphabet, ab ca. 800 v. Chr. — Dann Laute: Ein Zeichen steht für einen Laut
Griechisches Alphabet, ab ca. 800 v. Chr.

Capitalis Monumentalis: in Stein, nur Großbuchstaben Trajanssäule, Rom, 113 n. Chr. Foto: MumblerJamie, Wikimedia Commons, CC BY-SA 2.0 — Capitalis Monumentalis: in Stein, nur Großbuchstaben
Trajanssäule, Rom, 113 n. Chr. Foto: MumblerJamie, Wikimedia Commons, CC BY-SA 2.0

Capitalis Monumentalis: Hier kommen unsere Großbuchstaben her Heutige Rekonstruktion — Capitalis Monumentalis: Hier kommen unsere Großbuchstaben her
Heutige Rekonstruktion

Mit der Feder: Capitalis Quadrata und Capitalis Rustica Ab ca. 100 n. Chr. — Mit der Feder: Capitalis Quadrata und Capitalis Rustica
Ab ca. 100 n. Chr.

Wer schnell schreibt, rundet: Aus A wird a, es entstehen Ober- und Unterlängen

Karolingische Minuskel: Hier kommen unsere Kleinbuchstaben her Um 800 n. Chr. — Karolingische Minuskel: Hier kommen unsere Kleinbuchstaben her
Um 800 n. Chr.

Gutenberg druckt mit beweglichen Lettern, in gotischer Textura Gutenberg-Bibel, um 1454 — Gutenberg druckt mit beweglichen Lettern, in gotischer Textura
Gutenberg-Bibel, um 1454

Die Renaissance fügt beides zusammen: römische Großbuchstaben, karolingische Kleinbuchstaben Renaissance-Antiqua, ab ca. 1470 — Die Renaissance fügt beides zusammen: römische Großbuchstaben, karolingische Kleinbuchstaben
Renaissance-Antiqua, ab ca. 1470

Ein Buchstabe, 5000 Jahre: vom Rinderkopf zum a

Unsere Schrift sind zwei Schriften.

Die Großbuchstaben kommen aus Rom, die Kleinbuchstaben vom Hof Karls des Großen. Die Renaissance hat sie zusammengebracht.

Die kurze Geschichte (ca. 5 Minuten). Es geht nicht um Jahreszahlen, sondern um eine Frage: Warum haben wir zwei Sorten Buchstaben? Und woher kommen Ober- und Unterlängen?

Hieroglyphen: Schrift beginnt mit Bildern. Ein Zeichen zeigt eine Sache. Die ägyptischen Hieroglyphen kennen auch Lautzeichen, aber man braucht Hunderte Zeichen. Schreiben ist ein Beruf.

Griechen: Die Phönizier reduzieren um 1000 v. Chr. auf gut 20 Zeichen für Konsonanten. Die Griechen ergänzen um 800 v. Chr. die Vokale. Seitdem steht ein Zeichen für einen Laut. Das ist eine enorme Vereinfachung: Lesen und Schreiben lassen sich viel schneller lernen. Über die Etrusker kommt das Alphabet nach Rom.

Capitalis Monumentalis: die römische Inschriftenschrift. Das berühmteste Beispiel steht am Sockel der Trajanssäule in Rom, 113 n. Chr. Nur Großbuchstaben. Die Proportionen gelten bis heute als Maßstab, und die Großbuchstaben, die wir heute benutzen, gehen direkt darauf zurück. Die Folie danach zeigt das Alphabet in einer heutigen Rekonstruktion: Die Römer kannten J, U und W noch nicht.

Capitalis Quadrata und Rustica: Dieselben Buchstaben, aber mit der Feder geschrieben. Die Quadrata ist aufwendig und teuer, die Rustica schmaler und schneller. Beide bleiben zwischen zwei Linien.

Aus A wird a: Wer schnell schreibt, setzt die Feder seltener ab. Die Formen werden rund, Striche verbinden sich, einzelne Striche ragen nach oben oder unten heraus. So entstehen über Jahrhunderte Ober- und Unterlängen und aus der Großschrift eine Kleinschrift.

Karolingische Minuskel: Um 800 lässt Karl der Große die Schrift im ganzen Reich vereinheitlichen, ein Teil seiner Bildungsreform. Der Gelehrte Alkuin von York gilt als treibende Kraft. Eine klare, runde, gut lesbare Kleinschrift, das erste Schriftsystem, das in ganz Europa verstanden wird.

Gutenberg: Um 1450 entwickelt Johannes Gutenberg in Mainz den Druck mit beweglichen Lettern, die Bibel erscheint um 1454. Seine Schrift ist die Textura, eine gotische Schrift. Er ahmt die Handschrift der Zeit nach.

Renaissance: Um 1400 suchen italienische Humanisten die Antike und finden karolingische Handschriften, die sie irrtümlich für antik halten. Sie schreiben sie nach und kombinieren sie mit den römischen Großbuchstaben. In Venedig gießt Nicolas Jenson um 1470 daraus eine Druckschrift. Das ist bis heute das Grundmuster unserer Schrift: zwei Schriften aus zwei Epochen, die erst nachträglich zusammengefügt wurden.

Hintergrund

Typografie kommt aus dem Griechischen: týpos (Schlag, Gepräge, Form) und gráphein (schreiben, ritzen).

Woher die Serifen kommen, ist umstritten. Edward Catich vertritt in »The Origin of the Serif« (1968) die These, dass die Buchstaben erst mit dem Pinsel auf den Stein vorgeschrieben und dann gemeißelt wurden. Die Schrift »Trajan« von Carol Twombly (Adobe, 1989) greift die Inschrift auf und ist heute auf vielen Filmplakaten zu sehen.

Zum Weiterlesen: Lupton, Thinking with Type (Letter), und Hans Peter Willberg, Wegweiser Schrift.

Bilder aus dem bisherigen Foliensatz Typographie, Foto der Inschrift: MumblerJamie, Wikimedia Commons, CC BY-SA 2.0.

Versalien: der große, oft farbige Anfangsbuchstabe eines Verses Buchseite, 16. Jahrhundert — Versalien: der große, oft farbige Anfangsbuchstabe eines Verses
Buchseite, 16. Jahrhundert

Drei Wörter für dasselbe

	Großbuchstaben	Kleinbuchstaben
In der Typografie	Versalien	Gemeine
In der Schriftgeschichte	Majuskeln	Minuskeln
Aus dem Setzkasten, bis ins CSS	upper case	lower case

Wie heißt das?

Wer über Schrift reden will, braucht die Wörter

Großbuchstaben: alles zwischen zwei Linien, wie in Rom

Kleinbuchstaben: vier Linien

Die Grundlinie: Darauf stehen die Buchstaben

Die x-Höhe: so hoch wie das x, ohne Ober- und Unterlängen

Die Oberlänge: was über die x-Höhe hinausragt

Die Unterlänge: was unter die Grundlinie reicht

Die Versalhöhe: oft etwas niedriger als die Oberlänge

Serifen: die kleinen Abschlussstriche

Punzen: die Innenräume

Jetzt die Wörter, die Sie brauchen, um über Schrift zu sprechen. Sie stecken in der Geschichte von eben.

Großbuchstaben stehen zwischen zwei Linien, wie in Rom (Zweilinienschrift). Kleinbuchstaben brauchen vier (Vierlinienschrift). Das ist auch der Grund, warum Text in Kleinbuchstaben lebendige Wortbilder hat und Text in Versalien nicht.

Grundlinie: Darauf stehen die Buchstaben. Rundungen ragen minimal darunter (optische Korrektur).
x-Höhe, auch Mittellänge: die Höhe der Kleinbuchstaben ohne Ober- und Unterlängen. Sie bestimmt am stärksten, wie groß eine Schrift wirkt.
Oberlänge: was über die x-Höhe hinausragt: b, d, f, h, k, l, t.
Unterlänge: was unter die Grundlinie reicht: g, j, p, q, y.
Versalhöhe: die Höhe der Großbuchstaben. Oft etwas niedriger als die Oberlänge, damit Versalien im Text nicht zu laut werden. Das sieht man hier am f und am T.
Serife: die kleinen Abschlussstriche an den Enden. Schriften ohne heißen serifenlos oder Grotesk.
Punze: der Innenraum eines Buchstabens, geschlossen wie beim o oder offen wie beim n. Der Name kommt vom Stempel, mit dem der Innenraum in die Bleiletter geschlagen wurde. Zu kleine Punzen laufen bei kleiner Schrift zu.

Die Beschriftung in der Grafik ist hier eine bewusste Ausnahme: Die Wörter sind der Inhalt der Folie. Schrift: PT Serif, als Umrisse.

Hintergrund

Mehr zur Anatomie: Lupton, Thinking with Type (Letter). Die Einteilung von Schriften steht in den Bausteinen Schriftauswahl (fünf Gruppen für den Alltag) und Schriftklassifikation (DIN 16518 und Matrix Beinert).

Ein Buchstabe aus Blei: Der Klotz heißt Kegel

Schriftgrad: die Höhe des Kegels, nicht die des Buchstabens

Durchschuss: im Bleisatz ein Metallstreifen zwischen den Zeilen

Zeilenabstand: von Grundlinie zu Grundlinie

Zeilenabstand = Schriftgrad + Durchschuss

font-size: 16 px, line-height: 1.5. Das ergibt 24 px Zeilenabstand, also 8 px Durchschuss.

Gleicher Schriftgrad, andere x-Höhe: Die rechte Schrift wirkt größer

Dieselben Wörter im Werkzeug

Begriff	CSS	Figma
Schriftgrad	font-size	Size
Zeilenabstand	line-height	Line height
Versalien	text-transform: uppercase	Case: Uppercase
Grundlinie	align-items: baseline	Auto Layout: Text baseline
x-Höhe, Versalhöhe	Einheiten ex und cap

Die letzten drei Wörter kommen direkt aus dem Bleisatz. Jeder Buchstabe war ein Stück Metall, der Klotz darunter heißt Kegel.

Schriftgrad: die Höhe des Kegels, nicht die Höhe des Buchstabens. Deshalb wirken zwei Schriften im selben Schriftgrad unterschiedlich groß. Das ist bis heute so: font-size misst nicht die sichtbaren Buchstaben.
Kompress: Die Kegel liegen direkt aufeinander, kein Metall dazwischen.
Durchschuss: der zusätzliche Raum zwischen den Zeilen. Im Bleisatz wörtlich ein Metallstreifen, den man zwischen die Zeilen schob. Im Englischen heißt das leading, von lead, Blei.
Zeilenabstand: von Grundlinie zu Grundlinie. Also Schriftgrad plus Durchschuss.

Im Browser: font-size 16 px und line-height 1.5 ergeben 24 px Zeilenabstand, also 8 px Durchschuss. CSS verteilt ihn je zur Hälfte über und unter die Zeile. Figma macht das genauso. Wie viel Zeilenabstand Lesetext braucht, steht im Baustein Lesetext.

x-Höhe im Vergleich: Times New Roman und Verdana im selben Schriftgrad. Die Verdana wirkt deutlich größer, weil ihre x-Höhe höher ist. Darum lässt sich die Größe einer Schrift nicht von einer Schrift auf die andere übertragen. Eine Schrift tauschen heißt: Größe und Zeilenabstand neu prüfen. In CSS gibt es dafür die Einheiten ex (x-Höhe) und cap (Versalhöhe) sowie font-size-adjust.

Bleibuchstabe aus dem bisherigen Foliensatz Typographie.

Drei Fragen an jede Schrift

Auswählen: Welche Schrift passt zu Zweck und Wirkung?

Gliedern und Anordnen: Was ist wichtig, was gehört zusammen?

Lesbar machen: Kommt der Text bequem an?

Danke für's Mitmachen

https://christiannoss.de