04.12.2012 Aufrufe

Jmt - NAurath

Jmt - NAurath

Jmt - NAurath

MEHR ANZEIGEN
WENIGER ANZEIGEN

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

YUMPU macht aus Druck-PDFs automatisch weboptimierte ePaper, die Google liebt.

Aspekte des Grafik-Design<br />

Schwerpunkt Screendesign<br />

Andreas Naurath<br />

06PS, WS 2010/2011<br />

MIE 110 – Do, 16 bis 18 Uhr


Typographie<br />

Griechisch »typos« - Gestalt, Muster<br />

Griechisch »graphein« - schreiben


Typographie - Regeln<br />

Gute Lesbarkeit ist oberstes Gebot<br />

Bescheidenheit im Einsatz der Mittel<br />

Beschränkung auf wenige Ideen<br />

Zu viele Effekte nehmen sich gegenseitig die Wirkung


Typographie - Regeln<br />

Möglichst wenige Schriftarten verwenden<br />

Schrift-Charakter sollte die inhaltliche Aussage unterstützen<br />

Hervorhebungen wie fett und kursiv sparsam einsetzen


Typographie - Regeln<br />

Auf dem Bildschirm serifenlose oder besonders serifenbetonte Schriften<br />

verwenden. Beispiel Courier<br />

Online-Schriften größer anlegen als im Druck (ca. 2 pt)<br />

Zur besseren Lesbarkeit Groß- und Kleinschreibung verwenden


Typographie - Regeln<br />

Zeilenlängen mit 8 bis 12 Wörtern<br />

Günstiger für das menschliche Wahrnehmungsvermögen<br />

Lesens. @chen den die e@sieben<br />

bis <strong>Jmt</strong> es zur<br />

Bei m@ das Auge @ksprünge,


Typographie - Regeln<br />

Merkfähigkeit 5 bis 9 Informations-Einheiten<br />

Kurze Absätze ordnen den Lesefluss bildhaft


Style (60)<br />

Style (48)<br />

Style (36)<br />

Style (24)<br />

Style (16)<br />

Style (14)<br />

Style (12)<br />

Style (10)<br />

Style (9)<br />

Style (8)<br />

Style (7)<br />

Style (6)<br />

Welche Schriftgröße wählen?<br />

Schaugrößen<br />

z.B. Anzeigen, Buchtitel, Zeitungsüberschriften (1. Seite)<br />

Auszeichnungsgrößen<br />

z.B. Kapitel- oder Artikelüberschriften, Präsentationsfolien<br />

Lesegrößen<br />

z.B. Hausarbeiten (12), Zeitungstexte (9)<br />

Konsultationsgrößen<br />

z.B. Fußnoten und Quellenangaben


Versalhöhe 10 Ohr<br />

x-Hohe 11 Bogen<br />

Oberlänge 12 Tropfen<br />

Unterlange 13 Einlauf<br />

Grundlinie 14 Auslauf. Endstrich<br />

Stamm. Grundstrich 15 Querstrich, Balken<br />

Serife 16 Schulter. Überlauf<br />

ßinnenraum. Punze 17 Überhang<br />

Rundung 18 Aufstrich, Haarstrich<br />

19 Abstrich, Grundstrich<br />

Anatomie der Buchstaben<br />

17


Computer Schriften<br />

Matrixtechnik<br />

Bitmaps aus 8x8 oder 8x16 Pixeln


Bitmap-Fonts


Bitmap-Fonts<br />

Pixel-Bilder einzelner Buchstaben<br />

Höhere Auflösungen bei Druckern und Bildschirmpixeln führten zu<br />

einer detaillierteren Darstellung<br />

Schlecht zu vergrößern<br />

Entweder Zacken oder<br />

Riesige Schriftdateien


Outline Fonts


Outline Fonts<br />

Linien- und Kurvenelemente beschreiben geometrisch die Umrisse eines<br />

Zeichens<br />

Die Form wird anschließend schwarz gefüllt<br />

Praktisch unbegrenzte Skalierbarkeit<br />

Aber: Rechenaufwand sehr hoch<br />

Handgepixelte Schriften sind teilweise besser als gerechnete Schriften


Post-Script Type-1<br />

Outline Font mit exzellenter Ausgabequalität<br />

„Hints“ – spezielle Informationen im Fonts, die die Ausgabe verbessern<br />

Pair-Kerning<br />

Abstände zwischen Buchstabenpaaren individuell angepasst<br />

Track-Kerning<br />

Buchstabenabstände verändern sich je nach Darstellungsgröße


TrueType Fonts<br />

OutlineFont - Alternative zu Postscript Fonts von Apple und Microsoft<br />

Frei skalierbar<br />

Liegen den Betriebssystemen bei


Open-Type


Open-Type<br />

Zusammensetzung von True-Type und PS-Type-1 Schriften<br />

Auf verschiedenen Systemen einsetzbar – ohne Konvertierung<br />

Kompakte Datenstruktur<br />

Informationen und Zeichen für unterschiedliche Sprachen in einer Datei


Clear Type<br />

Anti-Aliasing auf Sub-Pixel Niveau<br />

Unter Vista, Windows7 & Mac OS 10 aktiviert, unter XP einschalten:<br />

Clear Type Tuner


Screenfonts<br />

Typetester


Fonts einbetten oder „brennen“<br />

Embedden sie jetzt<br />

10 Great Free Fonts for @font-face embedding<br />

http://typekit.com/<br />

http://typeface.neocracy.org/


Nützliche Typographie-Links<br />

Typolis<br />

http://www.typolis.de/version1/typolis.htm<br />

http://web.archive.org/web/20040212090231/http://sendung.de/typolinx/<br />

http://www.linotype.com/<br />

http://www.fontshop.de/<br />

Design im Internet<br />

http://jeff.cs.mcgill.ca/~luc/fonts.html<br />

http://www.typografie.info/typowiki/index.php?title=Startseite


Nützliche Typographie-Links<br />

Fonts identifizieren<br />

http://www.myfonts.com/<br />

http://www.identifont.com/<br />

Hersteller Dokumentationen<br />

http://www.adobe.com/type/opentype/<br />

http://www.microsoft.com/typography/default.asp


Nützliche Typographie-Links<br />

http://www.designguide.at/typographie.html<br />

http://www.redsun.com/type/<br />

http://www.fontblog.de/<br />

http://www.typeforum.de/<br />

http://www.typografie.info/<br />

http://www.typolexikon.de/


Folien hier:<br />

http://is.gd/gVNqA

Hurra! Ihre Datei wurde hochgeladen und ist bereit für die Veröffentlichung.

Erfolgreich gespeichert!

Leider ist etwas schief gelaufen!