Typographie

--

./images/typo-example-01.png

./images/typo-example-02.png

./images/typo-example-03.png

./images/typo-example-04.png

./images/typo-example-05.png

./images/typo-example-06.png

./images/typo-example-07.png

./images/typo-example-09.png

./images/typo-example-10.png

./images/typo-example-11.png

./images/typo-example-12.png

./images/typo-example-08.png

./images/schriften-und-typo.1.png — Arial

./images/schriften-und-typo.2.png — Baskerville

./images/schriften-und-typo.3.png — D-DIN

./images/schriften-und-typo.4.png — Avenir

./images/schriften-und-typo.5.png — Max

./images/schriften-und-typo.6.png — Produkt

Dickte / Ligatur / Majuskel / Minuskel / Versalie / Gemeine / Hurenkind / Serife / Punze / Geviert / Schusterjunge

Erinnern Sie sich an einen Tag, an dem Sie nicht gesprochen haben?

Erinnern Sie sich an einen Tag, an dem Sie nichts gelesen oder geschrieben haben?

./images/diagramm-tuba-3d-1991.png

Typosgraphein

Gestalt, Muster / Schreiben

Das Aufgezeichnete ist uns erhalten geblieben, das Gesprochene nicht.

Ohne Sprache und Schrift würden wir vielleicht eher den Berufsgruppen Jäger oder Sammler angehören.

Die Kommunikation der Urmenschen wurde mit Hilfe von Mimik, Lauten und Gesten realisiert. Auch heute noch unterstützen wir Gesprochenes durch Mimik und Gestik, selbst wenn wir telefonieren und unsere Kommunikationspartner uns nicht sehen kann.

Historie

./images/historie-01.png — Schrift als Grundlage für den Staatsapparat

./images/historie-02.png — Vinca Schrift. 6. bis 5. Jahrtausend v. Christus

./images/historie-03.png — Ägyptische Hieroglyphen. 3200 v. bis 300 n. Christus

./images/historie-04.png

./images/historie-04.png — Chinesisches Zeichen für „Berg“

./images/historie-05.png — Griechisches Lautalphabet

./images/historie-06.png — Alphabet der Etrusker

./images/historie-07.png — Capitalis Monumentalis

./images/rome-arch-of-titus-1960.png — Capitalis Monumentalis

./images/historie-08.png — Capitalis quadrata und Capitalis rustica. 100 n. Christus

./images/historie-09.png — Entstehung von Ober- und Unterlängen

./images/historie-10.png — Karolingische Minuskel. 800 n. Christus

./images/historie-11.png — Entwicklung der Klein- und Großbuchstaben

./images/historie-12.png — Brief des Paulus aus dem 16. Jahrhundert

./images/historie-13.png — Buchseite aus dem 16. Jahrhundert mit farbigen Versalien

./images/gutenberg-01.png — Johannes Gensfleisch, genannt Gutenberg

./images/mazarine-bibel-01.png — Die Gutenberg Bibel (B42), 1450

./images/historie-14.png — Die Gutenberg Bibel (B42), 1450

./images/historie-15.png — Satzspiegel der Gutenberg Bibel

./images/capitalis-rustica-01.png — Textura, die Schrift der Gutenberg Bibel

./images/historie-16.png — Variabler Bleibuchstabe, 1960

Anatomie der Buchstaben

./images/anatomie-01.png — Renaissance Antiqua mit Majuskeln und Minuskeln

./images/anatomie-02.png — Anatomie der Buchstaben: Bezeichnungen

./images/anatomie-03.png — Anatomie der Buchstaben: Bezeichnungen

./images/anatomie-04.png

./images/anatomie-05.png

./images/anatomie-06.png

./images/anatomie-07.png

./images/anatomie-08.png

Wie viele und welche Schriften kennen Sie?

Schriftgruppen der DIN 16518

DIN 16518

Gruppe 1: Venezianische Renaissance-Antiqua

Gruppe 2: Französische Renaissance-Antiqua

Gruppe 3: Barock-Antiqua

Gruppe 4: Klassizistische Antiqua

Gruppe 5: Serifenbetonte Linear-Antiqua

Gruppe 6: Serifenlose Linear-Antiqua

Gruppe 7: Antiqua-Varianten

Gruppe 8: Schreibschriften

Gruppe 9: Handschriftliche Antiqua

Gruppe 10: Gebrochene Schriften

Gruppe 11: Fremde Schriften

./images/schriftgruppe-01.png — Venezianische Renaissance-Antiqua

./images/schriftgruppe-02.png — Französische Renaissance-Antiqua

./images/schriftgruppe-03.png — Barock-Antiqua

./images/schriftgruppe-04.png — Klassizistische Antiqua

Eine kurze Geschichte der Typografie

Schriftklassifikationsmodell des Typographen Wolfgang Beinert

Matrix Beinert Hauptgruppen

Gruppe 1: Antiqua Druckschriften mit Serifen

Gruppe 2: Egyptienne Druckschriften mit betonten Serifen

Gruppe 3: Grotesk Druckschriften ohne Serifen

Gruppe 4: Corporate Typography Fonts Schriftsysteme, CD-Schriften, DIN- ISO- und OCR

Gruppe 5: Zierschriften Dekorative, Display, Schreibmaschinen- und Digitale Schreibschriften

Gruppe 6: Bildschirmschriften Pixel- und World Wide Web-Fonts

Gruppe 7: Gebrochene Schriften

Gruppe 8: Nichtrömische Schriften

Gruppe 9: Bildzeichen Piktogramme, Ornamente, Zierrat, Logos usw

./images/beinert-hauptgruppen-01.png

./images/beinert-hauptgruppen-02.png

./images/beinert-hauptgruppen-03.png

./images/beinert-hauptgruppen-04.png

./images/beinert-hauptgruppen-05.png

./images/beinert-hauptgruppen-06a.png

./images/beinert-hauptgruppen-07.png

Einteilung von Schriften

Schriftgruppe oder -art: Antiqua, Grotesk, etc.

Schriftfamilie: Helvetica, Times, etc.

Schriftstärke: Leicht, Normal, Fett, etc.

Dicktenbreite: Schmal, Normal, Breit. etc.

Schriftlage: Normal, Kursiv (italic), Kapitälchen

Schriftgrad: 8 Punkt, 12 Punkt, etc. 1 Punkt(pt)=0,375 mm

./images/schriftlage-01.png — Einteilung von Schriften: Schriftlage

./images/schriftlage-02.png — Schriftschnitt

./images/schriftlage-03.png — Einteilung von Schriften: Schriftstärke und Dicktenbreite

Zurichtung

./images/zurichtung-01.png — Besonderheiten und Parameter

./images/zurichtung-02.png — Laufweite, optimiert für Schriftgrößen zwischen 9 und 12 Pt

./images/zurichtung-03.png — Unterschneidung (Kerning)

./images/zurichtung-04.png — Unterschneidung (Kerning)

./images/zurichtung-05.png — Unterschneidung (Kerning)

./images/zurichtung-06.png — Unterschneidung (Kerning)

./images/zurichtung-07.png — Unterschneidung (Kerning)

Geviert

./images/geviert-01.png — Geviert

Dicktengleiche Schrift

./images/geviert-03.png — Courier von Howard Kettler, 1956

Ligaturen

./images/ligaturen-01.png

./images/ligaturen-02.png

./images/ligaturen-03.png

Ändern der Laufweite

Spationierung

./images/laufweite-01.png — Spationierung einer Gill Headline

./images/laufweite-02.png — Spationierung einer Gill Headline

./images/laufweite-03.png — Spationierung als Stilmittel

./images/laufweite-04.png — Spationierung als Stilmittel

./images/laufweite-05.png — Spationierung als Stilmittel

Schriftschandtaten

./images/schandtaten-01.png

./images/schandtaten-02.png

./images/schandtaten-03.png

Schriftmischung

Mischen von Schriften

Schriften einer Familie können gemischt werden, z.B. Bold oder Regular
Schriften unterschiedlicher Familien nur mit Ausnahmegenehmigung:

Informationen übersichtlicher gestalten

Zusammenhänge zu verdeutlichen

wichtige Aussagen hervorheben

Beim Mischen darauf achten, dass die Familien sich stark voneinander unterscheiden.

./images/schriftmischung-01.png

./images/schriftmischung-02.png — American Typewriter, Myriad Pro

Vereinfachung

./images/vereinfachung-01.png

./images/vereinfachung-02.png

./images/vereinfachung-03.png

./images/vereinfachung-04a.png — Wortguppen

./images/vereinfachung-04b.png — Wortguppen

./images/vereinfachung-04c.png — Wortguppen

./images/vereinfachung-05a.png — Wortguppen

./images/vereinfachung-05b.png — Wortguppen

./images/vereinfachung-05c.png — Wortguppen

./images/vereinfachung-07a.png — Was erkennen Sie?

./images/vereinfachung-07b.png — Was erkennen Sie?

./images/vereinfachung-07c.png — Was erkennen Sie?

./images/vereinfachung-10a.png — Was erkennen Sie?

./images/vereinfachung-10b.png — Was erkennen Sie?

./images/vereinfachung-10c.png — Was erkennen Sie?

./images/vereinfachung-10d.png — Was erkennen Sie?

./images/vereinfachung-11.png

./images/vereinfachung-12.png

./images/vereinfachung-13.png

./images/vereinfachung-14a.png — Vom Wort zur Zeile

./images/vereinfachung-14b.png — Vom Wort zur Zeile

./images/vereinfachung-14c.png — Vom Wort zur Zeile

./images/vereinfachung-14d.png — Vom Wort zur Zeile

./images/vereinfachung-14e.png — Vom Wort zur Zeile

./images/vereinfachung-14f.png — Vom Wort zur Zeile

./images/vereinfachung-14g.png — Vom Wort zur Zeile

Spaltenbreite und Zeilenabstand

./images/spaltenbreite-01.png — Die richtige Schrift

./images/spaltenbreite-02.png — Die richtige Schrift

./images/spaltenbreite-03a.png — Mengentexte lesen

./images/spaltenbreite-03b.png — Mengentexte lesen

./images/spaltenbreite-03c.png — Mengentexte lesen

./images/spaltenbreite-03d.png — Mengentexte lesen

./images/spaltenbreite-03e.png — Mengentexte lesen

./images/spaltenbreite-03f.png — Mengentexte lesen

./images/spaltenbreite-03g.png — Mengentexte lesen

./images/spaltenbreite-03h.png — Zeilenabstand

./images/spaltenbreite-04.png — Zeilenabstand

./images/spaltenbreite-05.png — Zeilenabstand

./images/spaltenbreite-06.png — Zeilenabstand

Der richtige Grauwert

./images/grauwert-01.png

./images/grauwert-02.png

./images/grauwert-03.png

./images/grauwert-04.png

./images/grauwert-05.png

./images/grauwert-06.png

./images/register-01.png — Register

./images/register-02.png — Register

./images/register-03.png — Register

./images/register-04.png — Register

./images/register-05.png — Register

./images/clever-typoposter.png — https://www.cleverprinting.de/das-kostenlose-cleverprinting-typoposter/

Typo Games

./images/beispiel-01.png — 25knots // Chris Pop

./images/beispiel-02.png — https://type.method.ac/

./images/beispiel-03.png — https://shape.method.ac/

./images/beispiel-05.png — https://tothepoint.co.uk/

./images/beispiel-07.png — https://fathom.info/

Danke für's Mitmachen

https://christiannoss.de