Kurs:Typografie

Die Seite begleitet den Kurs „Gute Typografie“ an der VHS Frankfurt am Main, 11. und 18. April 2013. Die Seite wird im Laufe des Kurses vervollständigt und steht den Teilnehmerinnen und Teilnehmern sowie anderen Interessierten auch danach weiterhin als Referenz zur Verfügung.

Einführung

Was ist Typografie?

• Herkunft des Begriffs Typografie: Aus dem Griechischen: typos („Figur“) und graphia („schreiben“).
• Das „richtige“ und schöne Setzen (Drucken) von Schrift. ↔ Kalligraphie: Das schöne Schreiben.
• Zweck: Dient dazu, Inhalte leichter lesbar zu machen, damit sie besser aufgenommen werden können.
• Kunst und Handwerk: Eine Kunstform neben Malerei, Skulptur, Architektur . . . , die bestimmten Regeln folgt und die man erlernen kann.

Was ist digitale Typografie?

• Aufbereitung von Texten mithilfe von Software:
  • Texteingabe
  • Textauszeichnung
  • Textsatz, Layout, Grafik
• Werkzeuge: Auszeichnungssprachen,
• Textsatz, Desktop-Publishing, Textverarbeitung.
• Ausgabe in digitale Medien: PS/PDF-Datei, Web → Druck(erei)/Webbrowser/App.

Neben der digitalen Typografie ist auch der Digitaldruck ein wesentlicher Bestandteil. Dabei werden beim Digitaldruck fertigen Druckvorlagen direkt vom Computer in die entsprechende Druckmaschine übertragen.

Zitate

• „Wenn die Typographie eine Kunst ist, dann nur die, sich in den Leser hineinzuversetzen und ihm einen Text so wenig aufdringlich wie möglich, so angenehm wie möglich zu offerieren . . . Das Auge reagiert extrem empfindlich auf das Leseangebot. Nicht wohlwollend angebotene Texte läßt es liegen.“ – Otl Aicher, Schriftgestalter.
• How do we persuade new users that spreading fonts across the page like peanut butter across hot toast is not necessarily the route to typographic excellence? – Peter Flynn.

Beispiele

• 
  Gutenberg-Bibel
• 
  Werbung – Flyer
• 
  Werbung – Beschriftungen
• 
  Werbung – Beschriftungen
• 
  Verkehrsschilder
• 
  Grafische Bedienoberflächen

Grundbedingungen für Typografie

Worauf ist Rücksicht zu nehmen?

• Historische Prägungen: Traditionen, Konventionen, Gewohnheiten.
• Biologische Grundlagen: Augen, Nerven, Gehirn – wie liest man?
• Wahrnehmungspsychologie: Aufnehmen und Verarbeitung des Gesehenen.
• Erwartungen der Leser an das jeweilige Schriftstück.

Technische Grundlagen im Überblick

Heute übliche Software für die Arbeit mit Texten:

• Textsatz: TeX/LaTeX
• Desktop-Publishing/Layout: Adobe InDesign, QuarkXPress, Scribus.
• Textverarbeitung: LibreOffice Writer, Microsoft Word.

Anwendungen zur Grafikbearbeitung: Adobe Photoshop, Gimp.

Vom Text zur Druckvorstufe

• Trennung von Inhalt und Form:
• Inhalt: Die Texterfassung im Editor.
• Form: Der Satz im Layout-Programm.
  • Mikrotypographie: Das Setzen des Texts, der Schrift, mit allen Feinheiten.
  • Makrotypographie: Das Seitenlayout. Das Anordnen von Texten und Bildern auf der Seite.

Druckvorstufe: PS/PDF-Datei → Druck.

Die Arbeitsweise im einzelnen

Textsatz mit LaTeX

• Texteingabe mit Markup in einem beliebigem Editor.
• Format: TEX.
• In der Regel keine Änderungen am Layout.
• Das Layout wird von einer Vorlage bestimmt.
• Kompilieren des LaTeX-Dokuments → PS/PDF.
• Kontrolle im Previewer → Druck.

Desktop-Publishing

• Texteingabe in Editor oder Textverarbeitung.
• Formate: TXT oder ODT/DOC/RTF.
• Im Layout-Programm:
  • Verwenden einer Vorlage; sonst händisch:
  • Festlegen von Seite, Satzspiegel, Schrift, Raster.
  • Textrahmen aufziehen und ggf. verketten.
  • Text in Textrahmen einfügen.
  • Bilder in Bildrahmen einfügen.
  • Position und Größe der Rahmen experimentell bestimmen. Text ggf. passend umformulieren.
• PS/PDF-Export → Druck.

Textverarbeitung

• Texteingabe in die Textverarbeitung: Keine gesonderte Anwendung zur Texterfassung.
• Formate: ODT/DOC/RTF.
• Formatierung des Texts, bei Laien oft schon bei der Eingabe.
• Möglich, aber nicht zwingend: Rahmen, Raster, PS/PDF-Export.
• Drucken oft direkt aus der Textverarbeitung.

Empfehlung

Trennen von Form und Inhalt:

• Inhalt: Erst den Text in einen Editor eingeben.
• Dabei mikrotypographische Feinheiten berücksichtigen.
• Form: Dann den Text setzen (Formatieren mit: LaTeX, DTP, Textverarbeitung).
• Export in PS/PDF als Ausgabeformat für den Druck.
• Drucken: Druckerei oder eigener Drucker.

Regeln

Welche typographischen Regeln gibt es?

• Ausgangspunkt: Klassische Regeln des Buchdrucks.
• Lehren von Schriftgestaltern und Typographen (Tschichold, Forssman, Willberg, Spiekermann… )
• Hausschreibung und -typographie von Verlagen, Zeitungen, Redaktionen, Wikipedia . . .
• Problematisch: Duden und DIN-Normen, insbesondere DIN 5008 – „Typographie“?

Fragen:

• In welchem Verhältnis stehen diese Regeln zueinander?
• Regelwidrige Erwartungen bei Adressaten „bedienen“?

Detailtypografie

Definition

In der Typografie wird zwischen Mikro- und Makrotypografie unterschieden. Makrotypografie umfasst die Fragen des groben Layouts. Angefangen bei den Trägermaterialien über die Druckverfahren bis hin zur Schriftfarbe wird in der Makrotypografie auch über das Gestaltungsraster als wohl wichtigstes Gestaltungselement entschieden. Grundfrage ist die Positionierung von Grafik und Text, wobei bereits Überlegungen zu den einzelnen Schriftarten, genauer, der Auswahl der Schriftfamilien, einfließen.

Die Mikrotypografie befasst sich hingegen nur mit der Schrift selbst. Hierbei werden Schriften im Detail angepasst, um eine optimale Lesbarkeit zu erreichen. Dies umfasst beispielsweise das Sperren oder Kerning von Schriften oder auch die Anpassung der Abstände zwischen Wörtern und Zeilen. Beim Sperren werden Abstände (Spatien) eingefügt, um den Abstand zwischen Buchstaben zu vergrößern. Kerning meint das Gegenteil, also die Verringerung der Weißräume zwischen Buchstaben.

Wortzwischenräume und Abstände

Auf den richtigen Wortzwischenraum ist vor allem bei Abkürzungen zu achten:

• Normaler Zwischenraum: z. B. S. 15 ff.
• Schmaler Zwischenraum, Spatium: z. B. § 157 SGB VII
• Kein Zwischenraum: z.B.

Es ist jeweils ein geschütztes Leerzeichen einzufügen.

Zahlen und Ziffern

Kleine Zahlen

ausschreiben: In fünf Minuten fertig.

Nicht exakte Zahlen

ausschreiben: Etwa tausend Zuschauer.

Bis zu vier Ziffern

werden ohne Abstand gesetzt: 9000.

Ab fünf Ziffern

darf man die mit schmalen Zwischenräumen gliedern: 90 000, 100 000, 1 000 000.

Telefonnummern

von hinten in Zweiergruppen gliedern: 0 69/12 34 56 78. Neuerdings: 069/12 34 56 78.

Kontonummern

von hinten in Dreiergruppen gliedern: Konto 123 456 789.

Bankleitzahlen

von vorne in Dreiergruppen gliedern: BLZ 123 123 12.

Postleitzahlen

ohne Gliederung: 63263.

Striche

Der Gedanken- und der Streckenstrich sind auseinanderzuhalten:

• Geviertstrich: 3,— Euro
• Halbgeviertstrich: 1–2 mal
• Viertelgeviertstrich: Trenn-, Binde-Strich

Häufig zu sehen (DIN 5008): 11 - 12 Uhr

Anführungszeichen

Bei deutschen Texten sollten „Gänsefüßchen“ bevorzugt werden:

„Innerhalb von Zitaten kann man ‚solche Stellen‘ mit ‚halben Anführungszeichen‘ kennzeichnen.“

In English, use “quoted ‘text’ like this”.

In französischen Texten werden Guillemets verwendet, die mit einem schmalen Zwischenraum umgeben sind:

« On ne voit bien qu’avec le cœr. » (Saint-Exupéry)

Exkurs: Eingabe von Sonderzeichen

Wie kann man Anführungszeichen, Striche, schmale und geschützte Leerzeichen, diakritische Zeichen usw. eingeben?

• Mac: Alle relevanten Zeichen sind über die Tastatur direkt zu erreichen. Dreifache Belegung über Alt- und Shift-Taste verwenden. Ggf. die Tastaturübersicht einblenden/Zeichenübersicht zum Einfügen verwenden. Direkte „Unicode Hex-Eingabe“.
• Linux/Unix: Compose Key + Mehrfachbelegung verwenden („Tottaste“).
• Microsoft Windows: Alt + Zahlencode über Ziffernblock (abhängig von der Codepage des Systems).

Hervorheben von Text

Text wird durch kursiven Satz hervorgehoben.

Innerhalb einer Hervorhebung wird auf die Kursive verzichtet, um einen Textteil noch weiter hervorzugeben.

Bei serifenlosen Schriften kann auch fett hervorgehoben werden (bitte sparsam verwenden). Bitte nicht kursive und fette Auszeichnung kombinieren!

Bitte auf Unterstreichungen verzichten.

Tabellen

Tabellen sollten keine vertikalen Linien enthalten.

Der Trennstrich zwischen den Spalten-Überschriften und der darunterliegenden Tabellenzeile kann weggelassen werden, wenn man an dieser Stelle den Zeilenabstand leicht vergrößert.

Die Ausführung einer Tabelle hängt vor allem von ihrem Inhalt und dem zur Verfügung stehenden Raum ab.

Zeile

Zeilenabstand: Hängt von Schriftart und Schriftgrad ab.

• Zeilenabstand: Abstand zwischen zwei Grundlinien.
• Durchschuß: Abstand zwischen Unter- und Oberlänge.
• Muß jeweils ermittelt werden. Es gibt keinen festen Zeilenabstand. Vorgaben in Textverarbeitungen („1- oder 11-zeilig“) nehmen keine Rücksicht auf die jeweilige Schrift.

„Ideale“ Zeilenlänge?

• Lesbarkeitsforschung: Wie liest man? Nicht Wort für Wort: Saccaden.
• Bei deutschen Texten: 50–70 Zeichen je Zeile.

Absatz

Blocksatz oder Flattersatz?

Abstellen auf:

• Kolumnenbreite
• Laufweite der Schrift
• Grauwert der Schriftfläche

Je enger die Kolumne und je größer die Laufweite der Schrift, desto schlechter ist der Grauwert beim Blocksatz.

Bei Flattersatz bitte die Silbentrennung aktivieren.

Schusterjungen und Hurenkinder

Links ein „Schusterjunge“, rechts ein „Hurenkind“.

Eine einzelne Zeile die z.B am Anfang einer Seite bzw. Spalte steht, nennt man in der Typografie ein "Hurenkind". Ein Schusterjunge ist das Gegenteil von einem "Hurenkind" und bedeutet, dass am Ende einer Seite bzw einer Spalte eine einzelne Zeile steht.

Symbole

Bei kleinen Formaten können statt Wörtern auch Symbole verwendet werden,um Platz zu sparen. Beispielsweise wird ✉ leicht als Anschrift erkannt.

Weitere:

• ☏ = Telefon
• 📱 = Mobil
• ♿ = behindertengerecht

Symbole werden z.B. bei Visitenkarten interessant, auf denen ohnehin wenig Platz vorhanden ist, um z.B. auch den Weißraum möglichst groß zu halten.

Seitenlayout

Einige typographische Grundbegriffe:

• Seite – Höhe, Breite des typographisch nutzbaren Raums
• Satzspiegel – Raum zwischen „Seitenrändern“/Stegen, in den der Text gesetzt wird
• Kolumne – eine Spalte des gesetzten Texts; der Satzspiegel kann mehrere Spalten enthalten
• Zeile – so breit wie die Kolumne; bei einspaltigem Satz ist die Zeile so breit wie der Satzspiegel
• Schrift – Schriftarten, Schnitte, Dickten, Schriftgrade, Laufweiten, Schriftfamilien . . .

Satzspiegel und Stege

Satzspiegel und Stege.

Satzspiegelkonstruktion im Überblick

Wie konstruiert man den Satzspiegel/die Ränder einer Seite?

• Klassisch: Goldener Schnitt – im Verhältnis 2:3:5:8.
• Modern: Gestaltungsraster und Grundlinienraster (Satzspiegel und Plazierung von Text und Bildern auf einer Seite).
• Faustregel für DIN-Formate: 2:3:4:5 bzw. 3:3:3:5.
• Trivial/Microsoft: Alle Ränder auf 2 od. 2,5 cm einstellen…

Erweiterung: Satzspiegel und Schrift

Die Schrift soll den Satzspiegel vollständig ausfüllen.

Die Höhe des Satzspiegels hängt ab von:

• der Satzspiegelkonstruktion,
• der Schriftgröße (genauer: der „Versalhöhe“ der Schrift),
• dem Zeilenabstand (bzw. dem „Durchschuß“)

Wie beschreibt man eine Schrift?

Begriffe zur Beschreibung einer Schrift.

Beispiele

• 
  Klassischer Satzspiegel: Gutenberg-Bibel
• 
  Goldener Schnitt als Satzspiegelkonstruktion
• 
  Gestaltungsraster: Satzspiegel nach Neunerrasteraufteilung
• 
  „Goldener Kanon“ nach Tschichold; rechts eine Rasterkontruktion
• 
  Gestaltungsraster
• 
  Grundlinienraster/Registerhaltiger Satz
• 
  Seitenlayout anhand eines Rasters
• 
  Geometrische vs. optische Mitte

Erneut: Wie beschreibt man eine Schrift?

• Schriftart: Garamond, Times, Helvetica . . .
• Schriftform/-stil: Antiqua (mit normalen Serifen), Serifenlose/Grotesk, Egyptienne (mit betonten Serifen), Schreibschrift, dekorative Schrift, Fraktur.
• Schriftfamilie: zusammengehörige Schriftarten und Schnitte.
• Schriftschnitte: konkrete Ausformung, in der eine Schriftart als Font vorliegt (die Schriftart als solche; aber auch: gerade, kursiv, halbfett, fett . . . ).
• Schriftstärke: mager, normal, halbfett, fett.
• Schriftbreite/Laufweite: schmal, normal, breit.
• Schriftlage: gerade, kursiv, ggf. auch: schräg.
• Schriftgröße/Schriftgrad: 5–9, 10–12, ab 12 pt.

Exkurs: Schriften auf dem eigenen Rechner

• Installation von Schriften

Schriften einsetzen

Wie sollte man Schriften einsetzen?

• Empfehlungen der „Neuen Typographie“ (Jan Tschichold)
  • Möglichst wenige Schriftarten/Schnitte verwenden.
  • Kursiv und halbfett zur Schriftauszeichnung benutzen.
  • Versalien nur selten gebrauchen; wenn man sie verwendet, immer SPERREN.
• Empfehlungen der „Schweizer Typographie“ (Max Bill, Adrian Frutiger)
  • Hauptsächlich Verwendung von Groteskschriften.
  • Möglichst wenige Schriftgrade.
  • „Extreme Weißräume“.
  • Gestaltungsraster. Sachliche Anordnung. Keine Schmuckelemente.

Empfehlungen:

• Mengentext in der Brotschrift setzen. Möglichst eine Antiqua wählen.
• Überschriften in einem größeren Schriftgrad als den Mengentext; halbfett absetzen; ggf. eine Grotesk.
• Fußnoten, Marginalien und Bild-/Tabellenunterschriften in einem kleineren Schriftgrad als den Mengentext setzen.
• Möglichst nur eine Schriftart verwenden.
• Eher mehr Weißraum lassen. Text und Grafik nicht zu eng setzen.
• Hervorhebungen kursiv oder halbfett.

Webtypografie

Digitales Publizieren in Print und Online

Einheitlichen Workflow vor Beginn des Projekts bedenken:

• „Content“ eingeben…
• …für Print…
• …und weiter verarbeiten für Online…

Der Weg: Konvertieren, parallel verarbeiten…

Problem: Jede Konvertierung ist verlustbehaftet.

Lösung: Export aus Office-Paketen; Zusammenspiel von Anwendungen in der Adobe Creative Suite; HTML/XML-Konverter für LaTeX.

Hinweise zur Webtypographie

Worauf sollte man vor allem achten?

• Betriebssysteme und Webbrowser: Verschiedene Clients führen zu einer unterschiedlichen Ausgabe bei Layout, Farben, Auflösung, Fonts, Usability…
• Detailtypographie auch hier beachten: Geschützte Leerzeichen, Striche, Anführungszeichen, Hervorheben von Text, Zeilenumbrüche . . .
• Sonderzeichen escapen mithilfe von HTML-Entitäten; wenn möglich, Unicode einsetzen.
• Auf Lesbarkeit achten: F-Muster beim Lesen im Web.
• Standardlayouts von CMS vs. eigene Lösungen in CSS/Flash.
• Möglichst zurückhaltender Einsatz von Schriften.
• Eher serifenlose Schriftarten auswählen. Akzente bei Überschriften setzen.
• Auf Usability und Barrierefreiheit achten.
• Lokale Fonts vs. Webfonts.
• Mathematische Formeln: Grafik vs. MathJax.

Literatur

• Christoph Bier: typokurz – Einige wichtige typografische Regeln. Version 1.7 vom 21. Mai 2009.
• Ralf Hermann: DIN 1450 – warum eine Norm zur Leserlichkeit von Schrift sinnvoll ist. In: Typografie.info. 17. April 2013.
• Markus Knigge: Buchstaben-Dressur. Regeln und Tipps für bessere Typografie im Web. In: ct – magazin für computertechnik. 9/2010, S. 164–169.
• Markus Kohm: Moderne Briefe mit KOMA-Script. Die TeXnische Komödie 2/2003, S. 32–51. Überarbeitete Fassung wiederabgedruckt in: Markus Kohm, Jens-Uwe Morawski: KOMA-Script: Eine Sammlung von Klassen und Paketen für LaTeX2e. Anleitung zur Version 3.00. 3., überarbeitete und erweiterte Auflage. Lehmanns Media. Berlin. 2008. S. 493–513. ISBN 978-3-86541-291-1 (19,95 Euro).
• Markus Kohm: Satzspiegelkonstruktionen im Vergleich. Nachdruck aus: Die TeXnische Komödie 4/2002, S. 28–48. Überarbeitete Fassung wiederabgedruckt in: Markus Kohm, Jens-Uwe Morawski: KOMA-Script: Eine Sammlung von Klassen und Paketen für LaTeX2e. Anleitung zur Version 3.00. 3., überarbeitete und erweiterte Auflage. Lehmanns Media. Berlin. 2008. S. 445–463. ISBN 978-3-86541-291-1 (19,95 Euro).
• Peter König: Themen-Special: Der eigene Flyer. In: c't 10/2009. Heise-Software-Verzeichnis (zehn Seiten).
• Marion Neubauer: Feinheiten bei wissenschaftlichen Publikationen – Mikrotypographie-Regeln: Teil 1 und Teil 2. Nachdruck aus: Die TeXnische Komödie 4/1996, S. 23–40; 1/1997, S. 25–44. Überarbeitete Fassung wiederabgedruckt in: Klaus Braune, Joachim Lammarsch, Marion Lammarsch: LaTeX. Basissystem, Layout, Formelsatz. Springer. Berlin, Heidelberg. 2006. S. 545–576. ISBN 3-540-00718-0 (64,95 Euro).
• Claudia Runk: Grundkurs Grafik und Gestaltung. Mit konkreten Praxislösungen. Bonn. Galileo Press. 2010. ISBN 978-3-8362-1437-7 (24,90 Euro).
• Axel Reichert: Typografie – Gestaltung einer Beispielklasse. Tutorium für LaTeX-Anwender. 24. Februar 1999.
• Jürgen F. Schopp: Lesbarkeit. Universität Tampere. 3. Version. 28. Juli 2003.
• Jan Tschichold: Erfreuliche Drucksachen durch gute Typographie. Eine Fibel für jedermann. Maro. 2001 (Reprint von: Otto Maier-Verlag, Ravensburg, 1960). ISBN 978-3-87512-413-2 (12,– Euro).
• Hans Peter Willberg, Friedrich Forssman: Erste Hilfe in Typografie: Ratgeber für den Umgang mit Schrift. Mainz. Schmidt. 2009. ISBN 978-3-87439-474-1 (12,80 Euro).
• Hans Peter Willberg: Wegweiser Schrift. Erste Hilfe für den Umgang mit Schriften, was paßt, was wirkt, was stört. Verlag Hermann Schmidt. Mainz. 2001. ISBN 3-87439-569-3

Vorschläge für praktische Übungen und Beispiele

Aushang

• „Verkaufe: Für das Söhne Mannheims Konzert in der Hugenottenhalle am 13. Oktober habe ich 1 Eintrittskarte abzugeben. Bitte anrufen: 06102/123456 oder 0160/123456789.“
• „Einladung zum öffentlichen Gastvortrag im Rahmen des Wikipedia-Schulprojekts: „Wikipedia im Unterricht – Chancen und Herausforderungen“ – Hans Maier, Wikimedia Deutschland e. V. – Di, 10. Mai 2011, 16 Uhr (s.t.), RW 1.“

Flyer

• „Einladung zum öffentlichen Gastvortrag im Rahmen des Wikipedia-Schulprojekts: „Wikipedia im Unterricht – Chancen und Herausforderungen“ – Hans Maier, Wikimedia Deutschland e. V. – Di, 10. Mai 2011, 16 Uhr (s.t.), RW 1.“
• Kurs:Scribus – Einführung zu dem freien DTP-Programm Scribus; es wird gezeigt, wie man einen Flyer mit Scribus erstellt (2009)

Briefe und Bewerbungen

• Geschäftsbrief – DIN 5008
• Bewerbung
• Bewerbungshandbuch – auf Wikibooks