Screen Typography - Documentation by dreipol GmbH

* Univers Bold, 7 Pixel

Inhaltsverzeichnis Inhalt

01 | Schriftanalyse «Wählen Sie jeweils eine Schrift aus den folgenden Schriftgruppen aus und analysieren Sie diese. Verwenden Sie für die Analyse das Wort „Typografie“ und die Ziffern „1234567890“.»

Schriftgruppe 01

Schriftgruppe 02

Typografie 1234567890

Arial Regular

Typografie 1234567890

Akzidenz Grotesk Roman

Typografie 1234567890

Courier Regular

Typografie 1234567890

Bauer Bodoni Roman

Typografie 1234567890

Frutiger Roman

Typografie 1234567890

Franklin Gothic Condensed

Typografie 1234567890

Geneva Regular

Typografie 1234567890

Futura Medium

Typografie 1234567890

Helvetica Regular

Typografie 1234567890

Garamond Regular

Typografie 1234567890

Meta Normal

Typografie 1234567890

Helvetica Neue

Typografie 1234567890

Times Regular

Typografie 1234567890

ITC Machine Medium

Typografie 1234567890

Trebuchet MS Regular

Typografie 1234567890

Rotis Sans Serif Regular

Typografie 1234567890

Verdana Regular

Typografie 1234567890

Sabon Roman

Die Auswahl: Schriftgruppe 01

Die Auswahl: Schriftgruppe 02

Ich werde die Geneva Regular analysieren, weil sie mir am wenigsten bekannt ist und sie mir formal gefällt.

Aus dieser Auswahl entscheide ich mich für die Franklin Gothic Condensed. Fette Schriften gefallen mir im Print. Wie gut sie für die Bildschirmdarstellung taugt wird sich herausstellen. Diese Schrift steht ausserdem stark im Kontrast zur Geneva Regular, was die Analyse interessan ter macht.

Allgemein: Kerning Bei allen Tests habe ich das Kerning auf metrisch ein gestellt, damit die integrierten Kerningeinstellungen der Schrift berücksichtig werden.

Typografie 1234567890 Typografie Die Geneva ist eine serifenlose Linear-Antiqua oder auch als «Grotesk» bekannt. Ich würde sagen, sie ist von der Klassizistischen Antiqua abgeleitet.

Typografie 1234567890 Typografie

Entwickelt wurde sie von Susan Kare für Apple. Sie wurde bereits mit dem ersten Macintosh-Rechnern ausgeliefert, und gehört damit zu den ältesten Schriften der Macintosh Betriebssysteme. Verwendetes Format: TrueType

Typografie 1234567890 Typografie

Die Franklin Gothic ist eine serifenlose Linear-Antiqua, abgeleitet von der «Amerikanischen Grotesk». Sie hat ein sehr ausdruckvolles, charakteristisches Schriftbild.

Typografie 1234567890 Typografie

Der Grundschnitt wurde im Jahr 1904 vom Amerikaner Morris Fuller Benton entworfen. Ob der hier verwendete Condensed Schnitt von anfang an zur Schrift gehörte oder später dazukam konnte ich nicht herausfinden. Gemäss dem Buch «Schriften erkennen» von «Sauthoff, Wendt, Willberg, Verlag Hermann Schmidt Mainz, 1998» wurde sie ursprünglich nur als halbfette Schrift gesetzt und erst in der ITC-Version kamen andere Schnitte hinzu. Verwendetes Format: PostScript (Type1)

Typografie h Die Proportionen, Verhältnisse 1) hp-Höhe: 100.0% 131.9% 183.3% 472.4% 2) Versalhöhe: 75.8% 100.0% 138.9% 358.1% 3) Mittellängenhöhe: 54.5% 71.9% 100.0% 257.7% 4) Unterlängenhöhe: 21.2% 27.9% 38.8% 100.0% (Die Proportionen unterscheiden sich von Schrift zu Schrift)

Erkenntnis Die Proportionen der Geneva wirken eher standardisiert. Die Geneva hat, verglichen mit der Franklin Gothic, eine Oberkant Oberlänge und eine Oberlänge.

Typografie Die Buchstabenabstände/Kerning Der Abstand zwischen T und y fällt auf. Damit der Text besser ausgeglichen wäre, müsste das y zum T unterschnitten werden (Kerning). Wird in InDesign die Kerning-Methode «Optisch» aktiviert, gleicht InDesign dieses Loch sehr schön aus (1).

Offsetkorrigiert Die verwendete Geneva ist offsetkorrigiert. Die im spitzen Winkel zusammenlaufenden Balken weisen also eine Verjüngung auf, welche auf dem Bildschirm jedoch nicht erkennbar ist.

1) 2) 3) 4)

Typografie

(1)

Typografie h Die Proportionen, Verhältnisse 1) hp-Höhe: 100.0% 121.1% 171.7% 574.3% 2) Versalhöhe: 82.6% 100.0% 141.7% 474.3% 3) Mittellängenhöhe: 58.2% 70.5% 100.0% 334.4% 4) Unterlängenhöhe: 17.4% 21.1% 29.9% 100.0% (Die Proportionen unterscheiden sich von Schrift zu Schrift)

1) 2) 3) 4)

Erkenntnis Auffallend ist die grosse Mittellängenhöhe, die kurze Unterlängenhöhe und dass die Schrift keine Oberkant Oberlänge hat. Die Unterlänge ist auch kürzer als die Oberlänge.

Typografie Die Buchstabenabstände/Kerning Diese Schrift ist bereits stark unterschnitten, wobei bei «fetten» Schnitten die Buchstabenabstände generell viel kleiner gesetzt werden als bei Regular Schnitten. Die Unteschneidung zwischen y und T wurde bereits in den integrierten Kerningeinstelllungen berücksichtigt.

AN Offsetkorrigiert Die verwendete Franklin Gothic ist nicht offsetkorrigiert. Das liegt wohl auch daran, dass sie für den Titelsatz gedacht ist.

Versalien Wenn das ganze Wort in Versalien abgesetz ist wirkt das Schriftbild seh massiv und der Text ist schlecht lesbar.

Die Punzen Die Geneva hat eher breite Punzen. (Schriften mit grossem Buchstabeninnenraum brauchen mehr Zeilenabstand)

2.374

2.374 2.347

2.293 2.346

Grundstrich Die Grundstriche sind beinahe gleich dick, dies ist ideal für die Bildschirmdarstellung. Die Linie wird dadurch immer gleichmä ssig in Pixel umgewandelt.

Elemente die den Schriftkarakter prägen Diese feinen Details prägen den Schriftkarakter und geben der Schrift ein Gesicht. Natürlich sind es noch Grundlegendere Formen wie Rundungen. Doch an den Details lassen sich Schrifte erken nen.

2.346

2.346 2.346

Duktus Der Duktus ist wenig differenziert.

Die Punzen Die Franklin Gothic Condensed hat schmale Punzen. (Schriften mit kleinen Buchstabeninnenraum brauchen weniger Zeilenabstand)

4.318

4.317

4.318

4.317

Grundstrich Die Grundstriche sind exakt gleich fett.

Elemente die den Schriftkarakter pr채gen Diese feinen Rundungen wie sie zum Beispiel im Abstrich von der 7 zu erkennen sind pr채gen diese Schrift. Der vertikale Anstrich und das aufgerichtete F채hnchen beim g.

4.317 4.317

Duktus Der Duktus ist mittelstark differenziert. (Bei Versalien weniger erkkenbar)

01.1 | Antialiasing-Analyse «Stellen Sie das Wort und die Ziffern in Bitmap- und Antialiasing-Darstellung in den vorgegebenen Punktgrö ssen gegenüber. Visualisieren und beschreiben Sie Ihre Erkenntnisse.»

Bitmap- und Antialiasing- oder geglättete-Darstellung Das kleinste darstellbare Bildelement am Bildschirm ist der Pixel. Im Bitmpa-Modus werden nur Volltonwert Pixel für die Darstellung eines Zeichens verwendet. Beim Geglättet-Modus werden die Konturen in Tonwerte umgewandelt. 5-Pixel ist die kleinstmöglich darstellbare Schriftgrösse am Bildschirm.

Über den Entscheid, ob die Bitmap- oder der Antialia sing-Darstellung zur Anwendung kommt hat der Schrift karakter und das Fontformat einen wichtigen Einfluss. Desto Grösser eine Schrift eingesetzt wird umso besser ist die geglättete-Darstellung. Für sehr verspielte Schrif ten ist die geglättete-Darstellung besser geeignet. Diese Schriften in kleinen Formen einzusetzen macht wenig Sinn wenn es um eine gute Lesbarkeit garantiert werden muss.

100%

200%

1250%

100%

200%

1250%

Anpassung der Aufgabenstellung

Laufweite

Antialiasing (geglättet) wird in Photoshop CS3 differen zierter verwendet, man hat die Einstellungsmöglichkei ten: scharf, schärfer, stark und abrunden.

Wird die Laufweite der Schrift geändert, muss auf zwei Details geachtet werden. Erstens, dass die Buchstaben nicht zusammenfallen:

Die Darstellungen scharf und stark sind schwer vonein ander zu unterscheiden: scharf: stark:

Zweitens: dass es die Abstände korrekt übernimmt. Wenn nicht, entsteht ein unruhiges Schriftbild. Im folgenden Beispiel wurde die Laufweite verändert. Der A bstand vor und nach dem i sollte auf beiden seiten gleich viele Pixel betragen. Dies ist nur in Version 3 der Fall.

Wie auch die Darstellung schärfer und abrunden: schärfer: abrunden:

Darum habe ich mich auf den folgenden Seiten auf Bit map, scharf und abrunden beschränkt.

Schriftkarakter Schriften mit einem starken Karakter sollten nur in geeigneter Punktgrösse eingesetzt werden.

Lauflänge Die Lauflänge eines Wortes verlängert sich, wenn von der geglätteten- zur Bitmap-Darstellung gewechselt wird (im Photoshop). Was bei längeren Texten zu Problemen, manueller Nachbearbeitung, führen kann.

Geneva Roman

Bitmap

Pt Schriftkarakter Homogenität Schwärze Schärfe Lesbarkeit

9 •••• ••••• •••••

10 • •••• ••••• •••••

12 ••• •••• ••••• •••••

24 •••• •••• ••••• ••

••••

•••••

••••

9 •••• •••• ••

10 •• •• •••• ••

12 •••• •• •••• ••

24 •••• •••• ••••• •••••

•••

••

••••

•••••

9 •••• •• ••••

10 • ••• •• ••••

12 ••• •••• •• ••••

24 ••••• ••••• •••• ••••

•••

••••

•••••

scharf Pt Schriftkarakter Homogenität Schwärze Schärfe Lesbarkeit

abrunden

Pt Schriftkarakter Homogenität Schwärze Schärfe Lesbarkeit

Bitmap

Geglättet

Die Form bleibt konstant und gleichmässig, der Buch staben ist gut erkennbar. Wobei der Schriftkarakter nicht mehr zu erkennen ist.

Die geglättete Variante ist immer noch sehr gleichmä ssig. Verschiebungen im Grauwert sind nur in grosser Darstellung erkennbar.

24 Pt Vektor.

9 Pt

Typografie 1234567890 Diese Schriftgrösse (9 Pt) ist sehr ausgeglichen und optisch gut lesbar. Der Schriftkarakter der Geneva ist leider nicht mehr vorhanden.

10 Pt

Von 9 Pt auf 10 Pt rechnet das Programm in der Höhe 1 Pixel dazu und lässt die Breite iden tisch. Der Schriftkarakter wird stärker verfälscht.

12 Pt

In dieser Schriftgrösse ist der Schriftkarakter langsam er kennbar. Wobei es immer noch diverse Schriften sein könnten.

24 Pt

In dieser Schriftgrösse schnei det die Bitmapdarstellung klar schlechter ab als die geglättete Version. Der Schriftkarakter in der geglätteten Version ist bei nahe identisch mit der Original schrift (Bildschirmdarstellung).

Franklin Gothic

Bitmap

Pt Schriftkarakter Homogenität Schwärze Schärfe

••• •

••• ••

24 •• ••• ••••• •••

••••

••• •• ••

••• •••• ••

12 • •••• •••• •••

24 ••••• ••••• ••••• •••••

••

•••

•••••

Pt Schriftkarakter Homogenität Schwärze Schärfe

9 • ••• • ••

10 • •••• • •••

12 •• •••• ••• •••

24 •••• ••••• ••••• ••••

Lesbarkeit

•••

•••••

Lesbarkeit

scharf Pt Schriftkarakter Homogenität Schwärze Schärfe Lesbarkeit

abrunden

Bitmap

Geglättet

Aus dem kleinen o sind neue Buchstaben entstanden. Ab 24 Pt ist ein o erkennbar. Der Schriftkarakter der Franklin Gothic verschwindet total.

Ab 24 Pt ist ein o klar erkennbar. Während diese Schrift im kleineren Modus eher einer Anhäufung von Grauen Pixel/Quadraten gleicht.

24 Pt Vektor.

9 Pt

10 Pt

12 Pt

24 Pt

Typografie 1234567890 In dieser Schriftgrösse ist es nicht mehr möglich den Text zu lesen. Wobei die Darstellung in der Mitte wesentlich besser ist als bei 9 Pt. Der Schriftkarakter ist bei der variante mit abrunden erkennbar und lesbar.

Mit Bitmap-Darstellung ist diese Schrift nicht darzustellen. Zu viele Fehler. Auch bei 24 Pt.

Der Schriftkarakter in der geglätteten Version ist beinahe identisch mit der Originalschrift (Bildschirmdarstellung). Wobei einzelne Kanten noch immer unscharf sind. Die BitmapDarstellung bleibt schlecht, wird aber lesbar.

01.2 | Antialiasing-Analyse auf Schwarz «Stellen Sie Aufgabe 01.1 mit einem weissen Schrift bild auf schwarzem Hintergrund dar. Visualisieren und beschreiben Sie Ihre Erkenntnisse.»

Negative Schrift

Grauwert

Durch die Umkehrung strahlt die Schrift stärker. Sie wirkt leicht fetter als die positive Version. Die identische Schrift in Schwarz auf Weiss wirkt feiner.

Die geglätteten Schriften wirken Grauer als bei der Posi tiven Darstellung

9 Pt

10 Pt

12 Pt

24 Pt

9 Pt

Die Lesbarkeit nimmt ab, vergli chen zur positiven Variante.

10 Pt

12 Pt

24 Pt

Die Bitmap-Darstellung ist um einiges schlechter als bei posi tiver Darstellung. Die geglätte ten Schriften können in dieser Grösse gut gelesen werden.

Schriftglättung in Flash CS3 (OS X) In Flash CS3 können die folgenden Einstellungen für die Darstellung der Schrift vorgenommen werden: Geräte schriftarten verwenden, Bitmaptext, Anti-Aliasing für Animation, Anti-Aliasing für Lesbarkeit und zusätlich sogar eine Benutzerdefiniertes Anti-Aliasing.

Benutzerdefiniertes Anti-Aliasing Mit dieser Art von Anti-Aliasing kann manuell der stär kegrad der Glättung und der Schärfe angepasst werden. Dadurch kann der Schriftkarakter total verändert entstellt werden. Wie in der beiliegenden Matrix zu erkennen ist. Links oben: 200 Stärke, 400 Schärfe Rechts unten: -200 Stärke, -400 Schärfe

Flash CS3

Photoshop CS3

9 Pt

10 Pt

12 Pt

Laufweite (1 Flash, 2: Photoshop)

In Flash weisst die Textdarstellung Fehler auf und da durch stimmt die Laufweite nicht mit Photoshop überein. Anti-Aliasing für Lesbarkeit Bei dieser Einstellung weisen die Grautöne einen leich ten Farbstich auf.

Schwärze, Homogenität (1 Flash, 2: Photoshop)

In der Homogenität ist die Darstellung in Flash sicht bar schlechter als jene in Photoshop. Die Schrift wirkt sehr fleckig und nur einzelne Buchstaben weisen ein Tiefdunkles Schwarz auf. Die Schriften sind Generell gräulicher in Flash.

Schriftglättung im Web-Browser – MAC OS X, Safari – MAC OS X, Firefox – Windows XP, Internet Explorer 6 – Windows XP, Firefox – Windows Vista, Internet Explorer 7 – Windows Vista, Firefox – Windows Vista, Opera

MAC OS X, Safari

Darstellung: Geglättete farbig MAC OS X, Firefox

Getestete Schriftgrössen: 18 Pt und 12 Pt ClearType auf Windows Vista ClearType ist eine Software-Technik, die von Microsoft entwickelt wurde, um die Lesbarkeit von Schriftarten zu verbessern. Die ClearType-Technik erhöht den Buchsta benkontrast durch selektive Ansteuerung der Farbpixel an den Kontrastgrenzen mit Hilfe von Subpixeln. Die Auflö sung erhöht sich um den Faktor drei. (http://de.wikipedia.org/wiki/ClearType, zuletzt besucht am 27. Nov. 2007) PrintScreen / Screenshot auf XP Ob der Screenshot auf XP in Firefox wirklich verbindlich ist für das gesehene Schriftbild, ist zu bezweifeln. Da Auf dem Screenshot im Weissraum «JPGE» Artefakte oder andere Verunreinigungen sichtbar sind.

Darstellung: Geglättet farbig Windows XP, Internet Explorer 6

Darstellung: 18 Pt: Geglättete, 12 Pt: Bitmap Windows XP, Firefox

Darstellung: 18 Pt: Geglättete, 12 Pt: Bitmap Windows Vista, Internet Explorer 7

Farbe Obwohl bei allen Test mit RGB Schwarz gearbeitet wurde werden die Schriften auf im Browser oft mit Farben dargestellt. Hat das einen Einfluss auf die Bildaufbereitung? Erkenntnisse Die Schrift Times wird von System zu System unter schiedlich dargestellt. Die Grössen sind nicht identisch und die Farbdarstellung ändert sich. Auf OS X ist eine sehr Homogene Darstellung zu erkennen. Als Konklusion steht für mich fest, es braucht eine Manuelle Kontrolle in den einzelnen Browsern und Systemen.

Darstellung: ClearType Windows Vista, Firefox

Darstellung: ClearType

02 | Punktkompositionen «Mittels Punkten werden nach verschiedenen Kompositionen und Gewichtungen auf einer quadratischen Fläche gesucht.»

Erkenntniss Mit gleichem Abstand anordnen? Eigentlich gibt es nur zwei «korrekte» Lösungen bei welchen der Abstand von Punkt zu Punkt immer gleich ist.

02.1 | GrĂśsse: identisch Abstand: identisch Punktanzahl: min. 2, max. 5Âť

02.2 | Grรถsse: identisch Abstand: unterschiedlich Punktanzahl: min. 3, max. 6

02.3 | Grรถsse: identisch Abstand: identisch Punktanzahl: min. 5 bis ~

02.4 | Grรถsse: identisch Abstand: unterschiedlich Punktanzahl: min. 5 bis ~

02.5 | Grรถsse: unterschiedlich Abstand: unterschiedlich Punktanzahl: min. 3 bis ~

03 | Linienkompositionen «Mittels Linien werden nach verschiedenen Kompositionen und Gewichtungen auf einer quadratischen Fläche gesucht.»

03.1 | Mit gleiche Linien Linienanzahl: 3 L채nge: Eigendefinition Breite: Eigendefinition Anordnung: Vertikal, horizontal Farbe: Schwarz/Weiss

03.2 | Mit gleiche Linien Linienanzahl: 7 L채nge: Eigendefinition Breite: Eigendefinition Anordnung: Vertikal, horizontal Farbe: Schwarz/Weiss

03.3 | Mit ungleichen Linien Linienanzahl: 7 L채nge: Eigendefinition Breite: Eigendefinition Anordnung: Vertikal, horizontal Farbe: Schwarz/Weiss

03.4 | Mit ungleichen Linien Linienanzahl: 7 L채nge: Eigendefinition Breite: Eigendefinition Anordnung: Orthogonal Farbe: Schwarz/Weiss

04 | Flächenkomposition mit ungleichen Flächen «Mittels schwarzen und grauen Flächen wird der weisse Hintergrund geteilt und strukturiert. Bei der Strukturierung sollte allerdings darauf geachtet werden, dass der Hinter grund in die Komposition mit einbezogen wird.»

04.1 | Fl채chenanzahl: min. 3 L채nge: Eigendefinition Breite: Eigendefinition Anordnung: Vertikal und/oder horizontal Fl채chenfarbe: Schwarz, 60% Schwarz, 20% Schwarz

04.2 | Fl채chenanzahl: min. 3 L채nge: Eigendefinition Breite: Eigendefinition Anordnung: Orthogonal Fl채chenfarbe: Schwarz, 60% Schwarz, 20% Schwarz

05 | Textkompositionen «Unter Berücksichtigung verschiedener Parameter werden, mit einem vorgegebenen Text, ästhetisch reizvolle Komposi tionen und Variationen gesucht.»

05.1 | Textblockanzahl: 1 Satz: linksbündiger Flattersatz Schrift: Helvetica Neue Schriftschnitt: 55 Regular Schriftgrösse: 12 pt Zeilenabstand: Eigendefinition Anordnung: Horizontal

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinﬂusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinﬂusst unsere Aufmerksamkeit auch beim Betrachten von Bildern.

Die Leserichtung ist eine Sehgewohnheit, welche

die Wahrnehmung nachhaltig beeinflusst. Sie prägt

auch beim Betrachten von Bildern.

sondern beeinﬂusst unsere Aufmerksamkeit

Sie lenkt den Blick nicht nur beim Lesen,

Praxis des Lesens tief in unser Sehverhalten ein.

Aufmerksamkeit auch beim Betrachten von Bildern.

Sie prägt sich im Laufe der Zeit durch die

nicht nur beim Lesen, sondern beeinflusst unsere

welche die Wahrnehmung nachhaltig beeinﬂusst.

tief in unser Sehverhalten ein. Sie lenkt den Blick

Die Leserichtung ist eine Sehgewohnheit,

sich im Laufe der Zeit durch die Praxis des Lesens

05.2 | Textblockanzahl: 2 Satz: linksbündiger Flattersatz Schrift: Helvetica Neue Schriftschnitt: 55 Regular Schriftgrösse: 12 pt Zeilenabstand: Eigendefinition Anordnung: Horizontal

Die Leserichtung ist eine Seh-

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein.

gewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern.

Die Leserichtung ist eine Sehgewohnheit, Sie lenkt den Blick nicht nur beim Lesen, welche die Wahrnehmung nachhaltig beeinflusst. sondern beeinflusst unsere Aufmerksamkeit Sie prägt sich im Laufe der Zeit durch die Praxis auch beim Betrachten von Bildern. des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit

auch beim Betrachten von Bildern.

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung

nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die

Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick

nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit

auch beim Betrachten von Bildern.

05.4 | Textblockanzahl: 2 Satz: linksbündiger Flattersatz Schrift: Helvetica Neue Schriftschnitt: 55 Regular Schriftgrösse: Eigendefinition Zeilenabstand: Eigendefinition Anordnung: Horizontal

Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick

nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen.

05.4 |

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein.

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern.

unsere Betracht. Die Leserichtung ist eine Sehgew. Wahrnehmung

Die

Die Leserichtung ist eine Sehgewohnheit, welche dihmung nachhaltig beeinflusst. Sie prägt

Leserichtung

Die Leserichtung ist eine Sehgewohn heit, welche die Wahrnehmung nachhaltig Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst.

nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst.

Die Leserichtung Wahrnehmung nachhaltig beeinfl der Zeit durch die tief in unser Sehverhalten ein. Sie len kt d Blick nicht Zeitvertreib.

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst.

Textblockanzahl: min. 2, max. 7 Satz: linksbündiger Flattersatz Schrift: Helvetica Neue Schriftschnitt: 55 Regular Schriftgrösse: Eigendefinition Zeilenabstand: Eigendefinition Anordnung: Horizontal

05.5 | Textblockanzahl: Eigendefinition Satz: Eigendefinition Schrift: Eigendefinition Schriftschnitt: Eigendefinition Schriftgrösse: Eigendefinition Zeilenabstand: Eigendefinition Anordnung: Variabel

Die Leserichtung ist eine Sehgewohnheit.

gnumhenrhaW eid ehclew welche die Wahrnehmung .tssuflnieeb gitlahhcan nachhaltig beeinflusst.

mi hcis tgärp eiS tieZ red efuaL sixarP eid hcrud resnu ni feit sneseL sed .nie netlahrevheS kcilB ned tknel eiS kcilB ned tknel eiS ,neseL mieb run thcin ,neseL mieb run thcin tssuflnieeb nrednos tssuflnieeb nrednos skremfuA eresn tiekmaskremfuA eresnu mieb hcua nethcarteB mieb hcua hcarteB miehcarteB miE.nredliB nov

Leserichtung Die Sehgewohnheit eine ist

DIELESERICHTUNGISTEINESEHGEWOHNHEIT,WELCHE WAHRNEHMUNGNACHHALTIGBEEINFLUSST. SIEPRÄGTSICHIMLAUFEDERZEITDURCHDIEPRAXIS DESLESENSTIEFINUNSERSEHVERHALTENEIN.

gnuthcireseL eiD Die Leserichtung ,tiehnhowegheS enie tsi ist eine Sehgewohnheit,

Leserichtung Die Sehgewohnheit eine ist

DIE LESERICHTUNG IST EINE SEHGEWOHNHEIT.

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern. Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie prägt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern.

Die Leserichtung ist eine Sehgewohnheit

Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. eine eine eine eine eine eine eine ist ist ist ist ist ist ist Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Die Die Die Die Die Die Die eiD eiD eiD eiD eiD eiD eiD gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL tsi tsi tsi tsi tsi tsi tsi enie enie enie enie enie enie enie Sehgewohnheit. .tiehnhowegheS Sehgewohnheit. .tiehnhowegheS Sehgewohnheit. .tiehnhowegheS Sehgewohnheit. . t i e h n h o w e g h e S Sehgewohnheit. . t i e h n h o w e g h e S Sehgewohnheit. . t i e h n h o w e g h e S Sehgewohnheit. .tiehnhowegheS eine eine eine eine eine eine eine

Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit.

ist ist ist ist ist ist ist

.tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS

enie enie enie enie enie enie enie

eine eine eine eine eine eine eine

.tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS

tsi tsi tsi tsi tsi tsi tsi

ist ist ist ist ist ist ist

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

Die Die Die Die Die Die Die

Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit.

eine eine eine eine eine eine eine

ist ist ist ist ist ist ist

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

Die Die Die Die Die Die Die

Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit.

eiD eiD eiD eiD eiD eiD eiD

Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit. Sehgewohnheit.

eine eine eine eine eine eine eine eine eine eine eine eine eine eine

gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL

eine eine eine eine eine eine eine

ist ist ist ist ist ist ist ist ist ist ist ist ist ist

tsi tsi tsi tsi tsi tsi tsi ist ist ist ist ist ist ist

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

enie enie enie enie enie enie enie

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

Die Die Die Die Die Die Die Die Die Die Die Die Die Die

.tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS

Die Die Die Die Die Die Die

eiD eiD eiD eiD eiD eiD eiD

eine eine eine eine eine eine eine eine eine eine eine eine eine eine

gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL

ist ist ist ist ist ist ist ist ist ist ist ist ist ist

tsi tsi tsi tsi tsi tsi tsi

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

enie enie enie enie enie enie enie

Die Die Die Die Die Die Die Die Die Die Die Die Die Die

Sehgewohnheit. .tiehnhowegheS Sehgewohnheit. .tiehnhowegheS Sehgewohnheit. .tiehnhowegheS Sehgewohnheit. . t i e h n h o w e g h e S Sehgewohnheit. . t i e h n h o w e g h e S Sehgewohnheit. . t i e h n h o w e g h e S Sehgewohnheit. .tiehnhowegheS

eine eine eine eine eine eine eine

eine eine eine eine eine eine eine eine eine eine eine eine eine eine

ist ist ist ist ist ist ist

ist ist ist ist ist ist ist ist ist ist ist ist ist ist

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

Die Die Die Die Die Die Die

Die Die Die Die Die Die Die Die Die Die Die Die Die Die

eiD eiD eiD eiD eiD eiD eiD

gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL

eine eine eine eine eine eine eine eine eine eine eine eine eine eine

tsi tsi tsi tsi tsi tsi tsi

ist ist ist ist ist ist ist ist ist ist ist ist ist ist

enie enie enie enie enie enie enie

Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung Leserichtung

.tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS .tiehnhowegheS

Die Die Die Die Die Die Die Die Die Die Die Die Die Die

gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL gnuthcireseL

eiD eiD eiD eiD eiD eiD eiD

Die Leserichtung ist eine Sehgewohnheit, welche die Wahrnehmung nachhaltig beeinflusst. Sie pr채gt sich im Laufe der Zeit durch die Praxis des Lesens tief in unser Sehverhalten ein. Sie lenkt den Blick nicht nur beim Lesen, sondern beeinflusst unsere Aufmerksamkeit auch beim Betrachten von Bildern.

06 | Semantische Typografie «Semantische Typografie. Wählen Sie einen der folgenden Begriffe aus und setzen Sie ihn bezug nehmend auf seinen Inhalt typografisch um.»

06.1 | Semantische Typografie «Semantische Typografie. Wählen Sie einen der folgen den Begriffe aus und setzen Sie ihn bezug nehmend auf seinen Inhalt typografisch um.»

Umsetzung Für die Umsetzung habe ich die Irritation ausgewählt. Irritiert zu sein oder jemanden zu irritieren finde ich ein spannender Ansatz. So kann das Wort irritiert sein oder der Benutzer wird irritiert wenn er das Wort liest.

01 Kontakt

1. Verbindung, die man (einmal od. in bestimmten 1. Verbindung, die man (einmal od. in bestimmten Abständen wieder) für eine kurze Dauer herstellt; Fühlung. 2. Berührung. 3. (Elektrot.) a) Berührung, durch die eine Strom führende Verbindung hergestellt wird; b) Übergangsstelle, Kontaktstelle für den Strom; Verbindungsteil zur Herstellung des elektrischen Kontakts

02 Balance

Gleichgewicht 1)

03 Irritation

a) auf jmdn., etwas ausgeübter Reiz, Reizung; b) das Erregtsein; c) Verwirrung, Zustand der Verunsichertheit 1) (Verwundert, überrascht)

04 rhythmisch

Feststellungen Die Grenze zwischen Irritation und einer falschen Wir kung ist sehr schmal. So wirkt ein veränderter Buch staben bald falsch oder eine weggelassene Serife als Fehler. Es entsteht schnell ein Konflikt zwischen: •• Irritation und Neugier •• rritation und Dekonstruktion •• Irritation und Demontage

1. Gleichmaß, gleichmäßig gegliederte Bewegung; periodischer Wechsel, regelmäßige Wiederkehr natürlicher Vorgänge (z. B. Ebbe u. Flut). 2. einer musikalischen Komposition zugrunde liegende Gliederung des Zeitmaßes, die sich aus dem Metrum des thematischen Materials, aus Tondauer u. Wechsel der Tonstärke ergibt. 3. Gliederung des Sprachablaufs, bes. in der Versdichtung durch den geregelten, harmonischen Wechsel von langen u. kurzen, betonten u. unbetonten Silben, durch Pausen u. Sprachmelodie. 4. Gliederung eines Werks der bildenden Kunst, bes. eines Bauwerks durch regelmäßigen Wechsel bestimmter Formen1)

05 Demontage

Abbau, Abbruch, Zerlegung; das Auseinandernehmen 1)

06 Bruch 07 Prozess

1. Verlauf, Ablauf, Hergang, Entwicklung. 2. vor einem Gericht ausgetragener Rechtsstreit 1

08 antizyklisch

1. in unregelmäßiger Folge wiederkehrend. 2. (Wirtsch.) einem bestehenden Konjunkturzustand entgegenwirkend; Ggs. prozyklisch1)

09 Grenze Die Typografische Umsetzung, die beim Betrachter Irritation auslöst ist einfacher umzusetzen als wenn das Wort selbst Irritation ausstrahlen soll. Und der Betrachter unirritiert dies erkennt.

Trennlinie, abgrenzen; begrenzen, eingrenzen, ausgrenzen; grenzen, Altersgrenze, Eigentumsgrenze, Emissionsgrenze, Grundstücksgrenze, Immissionsgrenze, Kulturgrenze, Landesgrenze, Luftgrenze, Natur schutzgrenze, Nutzungsgrenze, Sprachgrenze, Untergrenze, Waldgrenze, Wassergrenze, Wirtschaftsgrenze, Zollgrenze (http://de.wiktionary.org/ wiki/Grenze)

10 leer

inhaltsleer, Leere, leeren, Leerfahrt, Leergewicht, Leergut, Leerkasset te, Leerlauf, leer laufen, leer stehen, Leerstelle, menschenleer (http:// de.wiktionary.org/wiki/leer) 1

Duden – Das Fremdwörterbuch, 9. Aufl. Mannheim 2007

Irritation (Vertiefung) Unter Irritation versteht man einen Reiz oder eine Erregung, die meist von negativer Bedeutung sind. Das Wort Irritation wird im landläufigen Sprachgebrauch vor allem als eine Umschreibung für eine Missstimmung oder für ein Verwürfnis zwischen einzelnen Personen verwendet, und bezeichnet ein Ärgernis. In der Regel handelt es sich aber nicht um eine tiefgreifende Verstim mung zwischen den einzelnen Personen, sondern eine spontan aufgetretene Haltung eines Menschen. Oft wird dies gerade durch das Bekanntwerden einer Hand lung oder durch Bekanntwerden von Aussagen eines Dritten ausgelöst. Im volkstümlichen Sprachgebrauch entstand durch die klangliche Nähe zu irr und irren im 19. Jahrhundert die Bedeutung von ablenken, verunsichern, stören, verwirren. 2 •• •• •• •• •• ••

••

•• ••

Papst-Rede sorgt für Irritation the state of feeling annoyed, impatient, or angry a cause of this : the minor irritations of life the production of inflammation or other discomfort in a bodily part or organ. Biology the stimulation of an organism, cell, or organ to produce an active response. she tried not to show her irritation annoyance, exas peration, vexation, indignation, impatience, cross ness, displeasure, chagrin, pique; anger, rage, fury, wrath, aggravation; literary ire. antonym delight I realize my presence is an irritation for you irritant, annoyance, thorn in someone›s side/flesh, bother, trial, torment, plague, inconvenience, nuisance, aggravation, pain (in the neck), headache, burr under someone›s saddle. antonym pleasure.w Irritation vom Ausland Irritation ist ein kurzfristiger, lokaler zustand. Z.B. im Gesicht

http://de.wikipedia.org/wiki/Irritation

irriTatIon

IggitVtidn

06.1 | Type in Motion «Setzen Sie eine Variante aus Aufgabe 06.1 animiert um.»

Auswahl Bei dieser Typografischen Umsetzung wurde der Schriftkarakter nicht modifiziert und die Wirkung nicht verändert. Der Eingriff um die Irritation beim Betrachter auszulösen beschränkt sich auf die Erfahrung des Benut zers in Bezug auf seine Fähigkeit Rechtschreibfehler zu erkennen.

Idee Bei der Umsetzung will ich, dass ich das Wort selber korrigiert. Sprich, dass die Buchstaben über sich selbst irritiert sind und sich korrigieren.

Erstellung Die einzelnen Positionen für die Animation erstellte ich in Illustrator und setzte sie in Flash zusammen.

Teil 1 Das a ist irritiert, es merkt, dass seine Position nicht stimm. Es korrigiert dies selbstständig.

Teil 2 Eine «r» Familie hüpft vorbei, das hinterste merkt, dass ein r im Wort fehlt und will das Korrigieren.

Teil 3 Es kickt das i weg und stellt sich drauf. Dem i passt das nicht, so katapultiert es das r in die Höhe.

Teil 4 Das r fällt auf das t und das a runter. Diese werden in die Höhe katapultiert und landen wieder falsch.

07 | Hommage an John Maeda «Dieses Projekt ist eine Hommage an die Gestalter und Typografen, die durch ihr Schaffen und Denken einen grossen Beitrag für das De sign geleistet haben. In Form einer Animation werden die wichtigs ten Arbeiten, Zitate und Sichtweisen in Bewegung versetzt.»

07 | Hommage an John Maeda

Arbeitsschritte

«Our hands are primary obstacle to advancement in the digital graphic arts. Their physical limitation prevent us from exploring what we cannot construct. Tap the power of the design machine its metamechanical hands do not tire. design the lens through which it ranslates raw infor mation into our own visible language escape the monot ony of demonstration engage in a pure discourse of style Manipulate perfect abstractions of form unhindered by tactile reality. with the design machine.»

07.1 | Selektion Arbeiten, Zitate, etc.

[John Maeda]

«Dieses Projekt ist eine Hommage an die Gestalter und Typografen, die durch ihr Schaffen und Denken einen grossen Beitrag für das Design geleistet haben. In Form einer Animation werden die wichtigsten Arbeiten, Zitate und Sichtweisen in Bewegung versetzt.»

«Amidst all the attention given to the sciences as to how they can lead to the cure of all diseases and daily prob lems of mankind, I believe that the biggest breakthrough will be the realization that the arts, which are conventi onally considered „useless,“ will be recognized as the whole reason why we ever try to live longer or live more prosperously. The arts are the science of enjoying life.» «Die künste sind die Wissenschaft des Genießens des Lebens.» «Die fundamentale Frage ist, wie man die richtige Balan ce zwischen Einfachheit und Komplexität findet.“ «You have to keep on leardning» «They were looking for people to help them figure out computers and the Web,“ he recalled. „It was a crazy pe riod. I never slept, but I had this zeal about the computer as a creative medium.» «Komplexität vs. Einfachheit» «I understand the computer less as a tool, and more as a new material for drawing.» «All my work is planned on paper, sketched out as codes on paper.»

07.2 | Storyboard Das Storyboard entwickelte ich auf Papier und setzte den Plot fest. Ich entschied mich f端r 7 Bildfrequenzen und setzte davon 5 in Flash um.

07.3 | Umsetzung in Flash Bei der Umsetzung ging ich in erster Linie auf die zwei Seiten von John Maeda ein (Code & Design). Ich gestaltete einzelne Abschnitte, dass sie wie kleine Programme wirken. Nachdem ich alle Bildfrequenzen einzeln erstellt hatte, fĂźgte ich sie in einem Dokument zusammen und kĂźrzte unnĂśtige Elemente zu Gunsten der Dramaturgie.

Teil 1

Teil 2

Teil 3

Teil 4

Teil 5