Keine Angst vor Schriften – Basiswissen ... - 5gestalten GmbH
Keine Angst vor Schriften – Basiswissen ... - 5gestalten GmbH Keine Angst vor Schriften – Basiswissen ... - 5gestalten GmbH
Silke Lotterbach Keine Angst vor Schriften – Basiswissen Typografie tekom Regionalgruppentreffen RG Stuttgart | 27. Mai 2009
- Seite 2 und 3: Agenda - Teil 1 › Die 5gestalten
- Seite 4 und 5: Die 5gestalten GmbH Das Unternehmen
- Seite 6 und 7: 5gestalten GmbH - angewandtes Infor
- Seite 8 und 9: Einführung in das Thema Definition
- Seite 10 und 11: Umfang Print Schriftschnitt Schrift
- Seite 12 und 13: Einführung in das Thema Fokus »So
- Seite 15: Plakate im Wirtschaftsgymnasium-Wes
- Seite 18 und 19: 5gestalten GmbH - angewandtes Infor
- Seite 21 und 22: Wahrnehmungspsychologie Gestaltgese
- Seite 23 und 24: 5gestalten GmbH - angewandtes Infor
- Seite 25: Wahrnehmungspsychologie Farben ›
- Seite 28 und 29: Wahrnehmungspsychologie Buchempfehl
- Seite 30 und 31: Flyer eines Anbieters für Homepage
- Seite 32 und 33: Schriftauswahl Standard-PC Schrifte
- Seite 34 und 35: Schriftauswahl Technischer Hintergr
- Seite 36 und 37: Schriftauswahl Verwechslungsgefahr
- Seite 38: 1 2 3 4 5 6 7 Willberg, Hans Peter:
- Seite 41 und 42: Schriftauswahl Mischen von Schrifta
- Seite 43 und 44: Gruhl, Gerd und Lege, Karl-Christia
- Seite 45 und 46: Aus der Bedienungsanleitung für ei
- Seite 47 und 48: Typografische Richtlinien Der Zeile
- Seite 49 und 50: Typografische Richtlinien Schriftsc
- Seite 51 und 52: Typografische Details Auszeichnunge
Silke Lotterbach<br />
<strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong><br />
<strong>–</strong> <strong>Basiswissen</strong> Typografie<br />
tekom Regionalgruppentreffen RG Stuttgart | 27. Mai 2009
Agenda <strong>–</strong> Teil 1<br />
› Die <strong>5gestalten</strong> <strong>GmbH</strong><br />
› Einführung in das Thema<br />
› Wahrnehmungspsychologie<br />
› Seitenlayout<br />
› Fragen<br />
› Pause<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 2 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Agenda <strong>–</strong> Teil 2<br />
› Schriftauswahl<br />
› Typografische Richtlinien<br />
› Typografische Details<br />
› Zusammenfassung<br />
› Fragen<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 3 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Die <strong>5gestalten</strong> <strong>GmbH</strong><br />
Das Unternehmen<br />
› Gegründet 2005 von 5 Informationsdesignerinnen<br />
› Firmensitz im Stuttgarter Westen<br />
› Verschiedene Schwerpunkte:<br />
Technische Dokumentation, Web, Multimedia, Usability, Text, Gestaltung<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 4 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Die <strong>5gestalten</strong> <strong>GmbH</strong><br />
Informationsdesign<br />
› Künstlerische Disziplinen: Grafikdesign, Typografie, Farbgestaltung<br />
› Klassische Disziplinen: Informations- und Wahrnehmungspsychologie,<br />
Informationsdidaktik und Informationsarchitektur, Texten<br />
› Moderne Disziplinen: Technische Dokumentation, Professional Writing,<br />
Usability Engineering, Webdesign<br />
› Vielfältige Werkzeuge: Layouterstellung, Grafik-, Bild- und Textbearbeitung,<br />
Web- und Interface-Gestaltung<br />
› Verbindung von Methodik und Logik mit Kreativität und Handwerkszeug<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 5 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 6 von XY | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Einführung in das Thema<br />
Definition »Typografie«<br />
› »Gestaltung von Druckprodukten mit <strong>Schriften</strong>, Bildern, Zeichen und anderen<br />
Gestaltungsmitteln mit dem Ziel der Einheit von Lesbarkeit, Funktionalität<br />
und Ästhetik. Typografie vermittelt nicht nur eine Botschaft oder Information,<br />
Typografie ist ein Ausdruck des Schönen. Der Einsatz und die Anordnung der<br />
Gestaltungsmittel erfordern Kreativität, das Beherrschen wesentlicher Grundregeln,<br />
Schriftbewußtsein und Erfahrung im Umgang mit den Gestaltungsmitteln.«<br />
Teschner, Helmut: Fachwörterbuch für visuelle Kommunikation und Drucktechnik, 2. Auflage, Ott Verlag + Druck<br />
AG Thun, 1995, Seite 358<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 7 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Einführung in das Thema<br />
Definition »Typografie«<br />
› »Der Begriff Typografie oder Typographie [...] lässt sich auf mehrere Bereiche<br />
anwenden. [...] Vorrangig gilt die Typografie heute jedoch als Gestaltungsprozess,<br />
der mittels Schrift, Bildern, Linien, Flächen und typografischem Raum<br />
auf Druckwerke und elektronische Medien angewendet wird.<br />
http://de.wikipedia.org/wiki/Typografie<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 8 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Einführung in das Thema<br />
Aspekte der Technischen Dokumentation<br />
Aus der Sicht der Nutzer<br />
Technische Dokumente sollen in erster Linie informieren.<br />
Nutzer sind gezielt auf der Suche nach konkreten Informationen, z. B.:<br />
› Produkt kennen lernen, nutzen<br />
› Lösung für ein bestimmtes Problem finden<br />
Aus der Sicht der Hersteller<br />
»Die Dokumentation muss verständlich, vollständig, korrekt und aktuell sein,<br />
schnell zum Kunden kommen und darf nicht zu teuer werden.«<br />
Hansen, Kerstin: Typografie- und Layout<strong>vor</strong>gaben. In: Henning, Jörg und Tjarks-Sobhani, Marita: Arbeits- und Gestaltungsempfehlungen<br />
für Technische Dokumentation. Eine kritische Bestandsaufnahme. tekom <strong>Schriften</strong> zur Technischen<br />
Dokumentation, Band 13, Schmidt-Römhild, Lübeck, 2009, Seite 119.<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 9 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Umfang<br />
Print<br />
Schriftschnitt<br />
Schriftgröße<br />
Elektronisch<br />
Format<br />
Nutzungskontext<br />
Zielgruppe<br />
Medium<br />
Schriftfarbe<br />
Hintergrundfarbe<br />
CD Struktur<br />
Konsistenz<br />
Schriftart<br />
Satzspiegel<br />
Satzart<br />
Laufweite<br />
Zeilenlänge<br />
Konventionen<br />
Lesbarkeit<br />
Finetuning,<br />
z. B. Trennungen<br />
Schreibstil<br />
Budget & Zeitrahmen<br />
Zwischenräume Spalte<br />
Wort<br />
Zeile<br />
Erfahrung<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 10 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
omantisch<br />
Alltag<br />
feierlich<br />
Anlaß<br />
Ausstattung Küche<br />
Werkzeuge<br />
Vorlieben<br />
Allergien<br />
Gäste<br />
Mengen<br />
Gutes Essen<br />
Ethik<br />
Jahreszeit / Saison<br />
Budget<br />
Bio<br />
Zeitrahmen<br />
Traditionen<br />
Zutaten<br />
Beilagen<br />
Fisch<br />
Fleisch<br />
Obst<br />
Gemüse<br />
Fähigkeiten<br />
Erfahrung<br />
Lokalität Garten<br />
unterwegs<br />
Esstisch<br />
Gewürze<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 11 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Einführung in das Thema<br />
Fokus<br />
»Solide Alltagsküche« <strong>–</strong> schnell, günstig, einfach<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 12 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Wahrnehmungspsychologie<br />
Wie wir lesen<br />
Willberg, Hans Peter:<br />
Wegweiser Schrift, Erste<br />
Hilfe für den Umgang mit<br />
<strong>Schriften</strong>, was passt <strong>–</strong> was<br />
wirkt <strong>–</strong> was stört. Verlag<br />
Hermann Schmidt Mainz<br />
(2001), Seite 35.<br />
Lidwell, William, Holden, Kritina; Butler, Jill: Universal Principles of Design: A Cross-Disciplinary Reference:<br />
100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions,<br />
and Teach Through Design. Rockport Publ (2003), Seite 125.<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 13 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Plakate im Wirtschaftsgymnasium-West,<br />
70178 Stuttgart
Wahrnehmungspsychologie<br />
Gestaltgesetze (nach Max Wertheimer)<br />
› Das Gesetz der Nähe<br />
› Gleiche Elemente mit geringeren Abständen<br />
zueinander werden als zusammengehörig<br />
wahrgenommen<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 17 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 18 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Imbiss in Stuttgart Bad Cannstatt<br />
Foto: Silke Lotterbach, 2009
Wahrnehmungspsychologie<br />
Gestaltgesetze (nach Max Wertheimer)<br />
› Das Gesetz der Ähnlichkeit<br />
› Sich ähnlich sehende Elemente werden eher als<br />
zusammengehörig empfunden als sich unähnlich<br />
sehende<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 21 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 22 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 23 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Wahrnehmungspsychologie<br />
Gestaltgesetze (nach Max Wertheimer)<br />
› Das Gesetz der guten Gestalt<br />
(... der Einfachheit oder Prägnanzgesetz)<br />
› Das Gesetz der guten Fortsetzung<br />
(... der durchgehenden Linie)<br />
› Das Gesetz der Geschlossenheit<br />
› Das Gesetz des gemeinsamen Schicksals<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 24 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Wahrnehmungspsychologie<br />
Farben<br />
› Farbiges Feld:<br />
Für das menschliche Auge<br />
sichtbare Farben<br />
› Graue Linie:<br />
CMYK-Farbraum<br />
› Schwarze Linie:<br />
RGB-Farbraum<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 25 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
GO<br />
STOP<br />
<br />
+<br />
Vgl. Lidwell, William, Holden, Kritina; Butler, Jill: Universal Principles of Design: A Cross-Disciplinary Reference: 100 Ways to Enhance Usability,<br />
Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design. Rockport Publ (2003), Seite 115.
Wahrnehmungspsychologie<br />
Buchempfehlungen<br />
› Lidwell, William, Holden, Kritina; Butler, Jill: Universal Principles of Design: A<br />
Cross-Disciplinary Reference: 100 Ways to Enhance Usability, Influence Perception,<br />
Increase Appeal, Make Better Design Decisions, and Teach Through<br />
Design. Rockport Publ (2003).<br />
› Mangold, Roland: Informationspsychologie, Wahrnehmen und Gestalten in<br />
der Medienwelt. Elsevier Spektrum Akademischer Verlag (2007).<br />
› Frutiger, Adrian: Der Mensch und seine Zeichen. <strong>Schriften</strong>, Symbole, Signete,<br />
Signale. 3. Auflage, Weiss Verlag <strong>GmbH</strong>, Dreieich (1991).<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 28 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Seitenlayout<br />
Druck und elektronische Medien<br />
› Im Druck:<br />
Satzspiegel<br />
› Im Web:<br />
abhängig von der Platzierung der Navigationselemente,<br />
Inhalte etc.<br />
› Andere Medien:<br />
abhängig von Format, Auflösung etc.<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 29 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Flyer eines Anbieters<br />
für Homepage-Gestaltung
Carwardine, Mark: Whales, Dolphins and Porpoises (Smithsonian Handbooks), DK ADULT (2002), Seite 164f.
Schriftauswahl<br />
Standard-PC <strong>Schriften</strong> oder individuelle Schrift?<br />
Standard Schriftart (ist vom Betriebssystem abhängig)<br />
› Kostenlos<br />
› Kann auch im Web verwendet werden<br />
› Schriftart muss nicht eingebettet werden,<br />
z. B. in PowerPoint Präsentationen, pdf-Dateien<br />
Individuelle Schrift<br />
› Unterstreicht Corporate Design<br />
› Harmoniert mit Logo, Farbe, Aufgabengebiet<br />
› Hebt sich deutlich von anderen ab<br />
› Mehr Schriftschnitte, optimale Schrifteigenschaften<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 33 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Schriftauswahl<br />
Zeichensatz einer Schrift<br />
fi fi statt fl fi<br />
Ligaturen:<br />
Zeichen: »« „“ @ €<br />
Schriftschnitte: Regular, Bold, Italic<br />
Ausgleich: Vo, Te<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 34 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Schriftauswahl<br />
Technischer Hintergrund<br />
Bitmap<br />
Pixelgrafik<br />
nicht skalierbar<br />
PostScript<br />
Outline, Vektorgrafik<br />
(Bézierkurven)<br />
skalierbar<br />
TrueType<br />
Outline, Vektorgrafik<br />
(Quadr. B-Splines)<br />
skalierbar<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 35 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Schriftauswahl<br />
Laufweite<br />
Lidwell, William, Holden, Kritina; Butler, Jill: Universal Principles of Design: A Cross-Disciplinary Reference: 100 Ways to Enhance Usability,<br />
Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design. Rockport Publ (2003), Seite 125.<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 36 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Schriftauswahl<br />
Verwechslungsgefahr<br />
a q g<br />
a q g<br />
Lr<br />
Lr<br />
Willberg, Hans Peter: Wegweiser Schrift, Erste Hilfe für den Umgang mit<br />
<strong>Schriften</strong>, was passt <strong>–</strong> was wirkt <strong>–</strong> was stört. Verlag Hermann Schmidt<br />
Mainz (2001), Seite 31.<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 37 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Willberg, Hans Peter: Wegweiser Schrift,<br />
Erste Hilfe für den Umgang mit <strong>Schriften</strong>,<br />
was passt <strong>–</strong> was wirkt <strong>–</strong> was stört.<br />
Verlag Hermann Schmidt Mainz (2001),<br />
Seite 9.
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
Willberg, Hans Peter: Wegweiser Schrift,<br />
Erste Hilfe für den Umgang mit <strong>Schriften</strong>,<br />
was passt <strong>–</strong> was wirkt <strong>–</strong> was stört.<br />
Verlag Hermann Schmidt Mainz (2001),<br />
Seite 11.
Aus der Bedienungsanleitung<br />
für einen Videorekorder
Schriftauswahl<br />
Mischen von Schriftarten<br />
Aus der Bedienungsanleitung<br />
für einen Videorekorder<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 43 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Typografische Richtlinien<br />
Schriftgröße<br />
› Klar unterscheidbare Schriftgrößen verwenden,<br />
möglichst max. drei Schriftgrößen<br />
› Grundschrift ca. 10 <strong>–</strong> 12 Punkt bei DIN A4 Seiten<br />
› Probeausdruck in Originalgröße,<br />
denn Schriftgröße ist abhängig von der Mittellänge (x-Höhe)<br />
Helvetica Neue Futura<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 44 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Gruhl, Gerd und Lege, Karl-Christian: Seminar »Schrift und Typografe« (Seminar-Unterlagen), Berlin (1992).
Typografische Richtlinien<br />
Satzarten in der Technischen Dokumentation<br />
Blocksatz<br />
+ Ruhige, geschlossene Wirkung<br />
<strong>–</strong> Löcher erschweren Lesbarkeit<br />
<strong>–</strong> Funktioniert ab einer gewissen Zeilenlänge<br />
Linksbündiger Flattersatz<br />
+ Sehr gute Orientierung<br />
<strong>–</strong> Teilweise manuelles Nacharbeiten nötig<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 46 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Aus der Bedienungsanleitung für einen Videorekorder
Typografische Richtlinien<br />
Zeilenlänge<br />
Willberg, Hans Peter:<br />
Wegweiser Schrift, Erste<br />
Hilfe für den Umgang mit<br />
<strong>Schriften</strong>, was passt <strong>–</strong> was<br />
wirkt <strong>–</strong> was stört. Verlag<br />
Hermann Schmidt Mainz<br />
(2001), Seite 35.<br />
› 45 bis 65 Zeichen: Optimale Lesbarkeit<br />
› Ca. 40 Zeichen: sehr schnelles Lesen (z. B. Zeitung)<br />
› Ca. 55 Zeichen: ruhiges Lesen (z. B. Buch)<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 48 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Typografische Richtlinien<br />
Der Zeilenabstand<br />
Mindestabstand:<br />
Unterlängen sollen Oberlängen nicht berühren<br />
Aus der Bedienungsanleitung<br />
für eine Waschmaschine<br />
Faustregel:<br />
› Durchschuß = ½ der Höhe der Mittellänge<br />
› Zeilenabstand ca. 120 %<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 49 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Aus der Bedienungsanleitung für eine Waschmaschine
Typografische Richtlinien<br />
Schriftschnitt<br />
dünner<br />
schmaler<br />
normal<br />
breiter<br />
dicker<br />
schräger<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 51 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Typografische Details<br />
Auszeichnungen im Text<br />
Fetter Schriftschnitt<br />
+ Sticht stark heraus<br />
+ Funktioniert auf farbigem Hintergrund / Bild<br />
<strong>–</strong> Behindert Lesefluss (Grauwert weicht stark ab)<br />
fett elektronisch<br />
fett Schriftschnitt<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 52 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Typografische Details<br />
Auszeichnungen im Text<br />
Kursiver Schriftschnitt<br />
+ Grauwert bleibt gleich<br />
+ Lesefluß wird kaum behindert<br />
<strong>–</strong> Wird beim »Überfliegen« kaum wahrgenommen<br />
kursiv elektronisch<br />
kursiv Schriftschnitt<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 53 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Aus einem<br />
Seminarprogramm<br />
»Unternehmer-<br />
Coaching«
Typografische Details<br />
Auszeichnungen im Text<br />
Versalbuchstaben<br />
+ Überschriften werden stärker hervogehoben<br />
+ Systemschriften und Aufschriften können<br />
visualisiert werden<br />
<strong>–</strong> Lesefluß wird stark behindert<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 55 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Typografische Details<br />
Auszeichnungen im Text<br />
Versalbuchstaben <strong>–</strong> Die richtige Größe<br />
Im Text sollten Auszeichnungen in<br />
VERSAL etwas kleiner sein, um nicht<br />
aus dem Text zu SCHREIEN.<br />
Im Text sollten Auszeichnungen in<br />
VERSAL etwas kleiner sein, um nicht<br />
aus dem Text zu SCHREIEN.<br />
Im Text sollten Auszeichnungen in<br />
VERSAL etwas kleiner sein, um nicht<br />
aus dem Text zu SCHREIEN.<br />
Im Text sollten Auszeichnungen in<br />
VERSAL etwas kleiner sein, um nicht<br />
aus dem Text zu SCHREIEN.<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 56 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Aus der<br />
Bedienungsanleitung<br />
für<br />
eine Waschmaschine
Aus der Bedienungsanleitung für einen mp3-Player
Typografische Richtlinien<br />
(Silben-)Trennungen<br />
Kompromisse finden zwischen<br />
› Guten Silbentrennungen und Leselogik<br />
(Stolper-steine statt Stol-persteine)<br />
› Einem schönen, regelmäßigen Zeilenbild<br />
Nicht mehr als drei Trennungen in Folge<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 59 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Typografische Details<br />
Hurenkinder und Schusterjungen vermeiden<br />
› Hurenkinder sind Ausgangszeilen (die letzte Zeile)<br />
von Kapiteln oder Absätzen, die am Anfang einer<br />
Seite stehen.<br />
› Schusterjungen sind Anfangszeilen von Kapiteln<br />
oder Absätzen, die am Ende einer Seite stehen.<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 60 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
und hinter den Wortbergen leben die Blindtexte.<br />
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik,<br />
eines großen Sprachozeans. Ein kleines Bächlein namens Duden<br />
fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.<br />
Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile<br />
in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion<br />
werden die Blindtexte beherrscht <strong>–</strong> ein geradezu unorthographisches<br />
Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr<br />
Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.<br />
Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen<br />
Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das<br />
Blindtextchen ließ sich nicht beirren.<br />
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel<br />
und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges<br />
erklommen hatte, warf es einen letzten Blick zurück auf die<br />
Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf<br />
und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig<br />
lief ihm eine rethorische Frage über die Wange, dann setzte es<br />
seinen Weg fort. Unterwegs traf es eine Copy.<br />
Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie
Typografische Details<br />
Weitere Aspekte<br />
› Gedankenstriche statt Minus-Zeichen bei<br />
»gegen« (VfB Stuttgart <strong>–</strong> Energie Cottbus) und<br />
»bis« (18.30 <strong>–</strong> 19.00 Uhr)<br />
› Anführungszeichen im Deutschen „“ oder »« statt ““<br />
› Doppelte Leerzeichen vermeiden<br />
› keine »ß« in versal gesetztem Text »DAS GROßE GRAUEN«<br />
› Nummergliederung einheitlich (DIN 5008),<br />
z. B. Telefon 0711 6201168<br />
› Ggf. Ausgleich von Zahlen: 4711 ... 4711<br />
und Buchstaben: Veto, Tom ... Veto, Tom<br />
› Ellipse, (genau drei!) Auslassungspunkte: Sch… (ohne Leerzeichen)<br />
Und sie lebten glücklich … (mit Leerzeichen)<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 62 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 63 von XY | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009<br />
http://www.wordsarepictures.co.uk/
Danke! Fragen?<br />
Silke Lotterbach<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Obere Paulusstraße 105 | 70197 Stuttgart<br />
Telefon: (07 11) 6 20 11 68<br />
Telefax: (07 11) 6 20 11 68<br />
E-Mail: silke.lotterbach@<strong>5gestalten</strong>.de<br />
Web: http://www.<strong>5gestalten</strong>.de<br />
<strong>5gestalten</strong> <strong>GmbH</strong> <strong>–</strong> angewandtes Informationsdesign<br />
Seite 64 von 64 | tekom RG Stuttgart | <strong>Keine</strong> <strong>Angst</strong> <strong>vor</strong> <strong>Schriften</strong> <strong>–</strong> <strong>Basiswissen</strong> Typografie | 27. Mai 2009
Change language