WERBEN FARBEN CORPORATE DESIGN WEBDESIGN
TYPOGRAFIE

universal type
Entwurf 1928: HERBERT BAYER Bild:
NETSCHOOL
| Das Layout,
also der Gesamteindruck einer Seite, eines Plakates oder einer
Webseite, umfasst das Zusammenwirken von Text und Abbildungen. Die Typografie hingegen widmet sich nur den Textelementen, vom Buchstaben über das Wort, die Zeile und den Satz bis zum Textblock. Großbuchstaben (=Versalien) und Kleinbuchstaben (=Gemeine oder Minuskeln) werden mit bestimmten Abständen (=Laufweite) aneinander gereiht. Bei zu geringen Buchstabenabständen ist der Text schlecht lesbar, sind die Abstände zu groß, wirkt der Text löchrig: |
| Hier ist die Laufweite zu klein, die Lesbarkeit beeinträchtigt. |
| Hier ist die Laufweite zu groß, der Text überdehnt. |
| Kommen Buchstaben nebeneinander zu
stehen, die wegen ihrer Form große Freiräume entstehen lassen, sieht
das erstens nicht gut aus und beeinträchtigt zweitens den Lesefluss. Diese "problematischen" Buchstaben sind die Großbuchstaben A L T V W und die Kleinbuchstaben f j r v w y. Beim Wort SPALTE ist das "Loch" zwischen den Zeichen L und T gut erkennbar, aber auch der viel kleinere Freiraum zwischen dem P und dem A fällt unangenehm auf. Wird der Abstand zwischen P und A bzw. zwischen L und T reduziert, sieht die Sache schon viel besser aus: |
| SPALTE darunter zum Vergleich das ursprüngliche Wortbild: |
| SPALTE |
|
|
|
|
Inserat der Zeitschrift HANDEL 19. 12. 2011 |
Typo von WIEN ENERGIE |
|
|
|
|
Plakatbilder: WEBSCHOOL |
|
| In den 1930er Jahren haben runde Schriftarten die gebrochenen verdrängt. Runde Schriften sind leichter zu schreiben und deutlich besser zu lesen. | |
|
GEBROCHENE SCHRIFTARTEN Beispiele |
RUNDE SCHRIFTARTEN Beispiele |
|
|
|
|
|
|
| Die Größe des Wortzwischenraums entspricht - abhängig von der typografischen Philosophie - der Breite des Buchstabens i oder der Punze (= Innenraum) des Buchstabens n. | |
| Bei den Schriften gibt es welche mit Serifen (das sind die häkchenförmigen Enden), Courier New zum Beispiel und solche ohne: Verdana. |
|
| Schriften ohne "Füßchen" laden nicht zum Lesen ein, daher sind Bücher mit literarischen Texten immer mit Serifenschriften gedruckt. | |
| Die weltweit meistverwendete Schrift ist die Helvetica. Der Zürcher Grafiker Max Miedinger hat sie 1957 entwickelt. Anfangs hieß sie Neue Haas-Grotesk, dann Helvetia und seit 1960 Helvetica. Unternehmen, die Helvetica verwenden (Zeitungen: Guardian, Hürriyet; American Airlines, Panasonic, Schweizer Bundesbahn, ...): |
|
|
|
|
|
Eine sehr junge Serifen-Schrift (veröffentlicht 2009) ist die von Stefan Huber für das Wissenschaftszentrum Berlin für Sozialforschung WZB entwickelte
Ebenfalls 2009 veröffentlichte der Schriftendesigner
Erik Faulhaber die
Aeonis, eine serifenlose, auf das für die Lesbarkeit Notwendigste
reduzierte Schrift. Beim versalen Eine Schrift, die ihre Heimatstadt verkörpert
wollten die Berliner Hannes von Döhren und Livius Dietzel schaffen.
Ergebnis war die ITC Chino: Akiro Kobayashi, künstlerischer Leiter von Linotype,
gewann Adrian Frutiger, um dessen nach ihm benannten Klassiker, die "Frutiger"
zu modifizieren: (alt - neu) Tern (Trans European
Road Network) wurde für eine bessere Lesbarkeit von Verkehrswegweisern im
Rahmen eines EU-Projekts (In-Safety) am
International Institut für Information und Design in Wien
entwickelt: An eine Handschrift erinnert die
Strangelove von Marcus Sterz.
Entworfen 2009; es gibt nur Großbuchstaben (Versalien)
Texte im Blocksatz füllen die ganze Zeile aus. Das führt bei kurzen
Zeilen zu großen Wortzwischenräumen. Wie das
unten abgebildete CHANEL-Stelleninserat aus dem
KURIER zeigt: |
|

| Manche Konzerne lassen
für ihre Broschüren, Geschäftsberichte, Formulare, Webauftritte, ... eine
eigene Schrift entwerfen:
CORPORATE IDENTITY Im folgenden - gekürzten -
Stelleninserat wird eine Mischung verschiedener serifenloser Schriften,
unterschiedlicher Laufweiten, Schriftstärken, Schriftgrößen und
Hintergrundfarben eingesetzt. Das erzeugt zwar Aufmerksamkeit,
erleichtert aber nicht das Lesen. |
| Jeder bekommt, |
jobs |
||
| was er verdient. |
executive |
personalberatung |
|
|
Manager
SAP Implementation & Support Consulting Industry |
|||
| Unser Auftraggeber ist ein globales Dienstleistungsunternehmen, das sich auf maßgeschneiderte Lösungen und Services im Industriebereich spezialisiert hat. Hochqualifizierte Mitarbeiter betreuen internationale Industriekonzerne im Bereich strategische IT-Beratung, SAP und Zukunftstechnologien. ...... | |||
| Sie verdienen | |||
| das Beste: executive-jobs | |||
|
Auf
Ihre Bewerbungsunterlagen oder Ihre telefonische Kontaktaufnahme freut sich Vorname Name Personalberatung GmbH Straße, Postleitzahl, Ort |
|||
| Für ein Zeitungsinserat
wühlte British Airways kräftig in der kreativen Kiste. Der optische
Eindruck war toll, die Lesbarkeit weniger. Der Flug nach
TOKYO kostete € 619. Was für die
Strecken nach SAN FRANCISCO und
NEW YORK zu bezahlen war, war nicht
so einfach erkennbar: |
||||
|
|
|
|
||
| TOKYO | SAN FRANCISCO | NEW YORK | ||
| Aufkleber am Schaufenster eines Konfektionsgeschäftes in 1070 Wien, der auf den Saison-Ausverkauf hinweisen sollte. Gesehen und von WEBSCHOOL fotografiert am 13. Jänner 2011. |
![]() |
![]() |
Ein Verkaufsargument mit typografischer Verstärkung B R E I T / SCHLANK Printwerbung der Bamberger Schuhfabrik MANZ im Jahr 1963. |
| Die REWE-Marke
ja! natürlich warb für ihren
GRÜNEN VELTLINER mit einem Text, der in Flaschenform gesetzt war. AUFMERKSAMKEIT mittels Farbe, Schriftart und Schriftgröße ERREGT das Inserat von PRINT POWER printpower.at |

| Einen verwirrenden Schriftenmix zeigen auch sowohl das alte als auch das neue Layout der Kinderschokolade-Verpackungen. |
|
Typografie für den Bildschirm |
|
| Die Darstellung der Schrift auf einem Monitor ist stark von Helligkeit und Kontrast beeinflusst. Liegen Farben mit ähnlicher Helligkeit oder ähnlicher Sättigung (z. B. 100 % Rot und 100 % Blau) dicht nebeneinander, kommt es zum Flimmern. | |
| Dunkle Schrift auf hellem Hintergrund wirkt kleiner, helle Schrift auf dunklem Hintergrund größer. | |
|
Schwarze Schrift auf weißem Hintergrund hat den besten Kontrast, |
|
|
graue Schrift auf weißem Hintergrund liest sich jedoch angenehmer! |
|
| Gleiches gilt auch für die inverse Darstellung: | |
| Weiße Schrift auf schwarzem Hintergrund hat einen besseren Kontrast als | |
|
|
|
| graue Schrift auf schwarzem Hintergrund, die sich dafür augenfreundlicher darstellt! | |
| In der linken Spalte sind die Kontraste zu stark, die Darstellung flimmert; die rechte Farbkombination ist besser. | ||||
| Die Hintergrundeinstellung ist 0 % Rot, 100 % Grün, 0 % Blau. Die Schrift besteht aus 100 % Rot, 0 % Grün und Blau | Die Hintergrundeinstellung ist 80 % Rot, 100 % Grün, 60 % Blau. Die Schrift besteht aus 60 % Rot, 0 % Grün und Blau. | |||
| Die Wahl der Schriftart ist gut zu überlegen: beide Schriften haben in diesem Beispiel die gleiche Schriftgröße, nämlich 12pt!. Die Lesbarkeit unterscheidet sich deutlich. | ||||
| Times New Roman ist die verbreitetste Serifenschrift. Häufig ist sie von der Software als Standardschrift eingestellt. | Die serifenlose Verdana wurde für den Bildschirm entwickelt. Klare Formen sorgen für ein ruhigeres Schriftbild. | |||
| Wegen ihrer geometrischen Form sind serifenlose Schriften vom Pixelraster des Monitors besser darstellbar. Für die exakte Wiedergabe komplexer Schriften (mit Schnörkeln, Rundungen, Schwüngen,...) verfügen die Bildschirme über zu wenig Bildpunkte. | |
| Aus der Vielzahl von Computerschriften sind nur wenige auf allen Computern darstellbar. Alle Betriebssysteme unterstützen die Schriften: Arial, Courier New, Georgia, Times New Roman, Trebuchet MS und Verdana. | |
| Typografie-Freaks haben an Arial eine Menge auszusetzen. Sie sehen in der Schrift eine misslungene Kopie der Helvetica. Es wird vermutet, dass Microsoft die Helvetica gerade so viel abändern ließ, dass die daraus entstandene Arial als eigene Schrift deklariert und daher Lizenzgebühren, die für die Nutzung der Helvetica angefallen wären, umgangen werden konnten. | |
| Courier New ist eine Schrift mit fixer Breite (= Festbreitenschrift). Alle Buchstaben nehmen den gleichen Raum ein. Mit Festbreitenschriften geschrieben werden Texte länger als mit Proportionalschriften. Bei den Proportionalschriften nehmen schmale Schriftzeichen (i, l, 1,...) weniger Raum ein als breite (m, w, G,...). | |
| Die nächsten drei Schriften wurden im Auftrag von Microsoft entwickelt: | |
| Die Georgia - bei ihr haben auch die Ziffern Ober- und Unterlängen (1,6,9) und fügen sich deshalb gut ins Schriftbild ein. Sehr gut geeignet für große Textmengen im Internet. | |
| Trebuchet MS - das MS, ein dezenter Hinweis auf den Besitzer. Serifenlos und ziemlich breit - wie auch die Verdana - ist sie wie diese gut lesbar, jedoch noch etwas runder und aufwändiger. | |
| Die englische Zeitung "The Times" ließ vor etwa 70 Jahren die Schrift Times New Roman entwickeln. Sie ist Platz sparend und - wichtig für den Einsatz im Zeitungsdruck - auch bei schlechten Druckqualitäten noch gut lesbar. | |
| Wer Texte auf seiner Webseite als Grafik einbindet, ist nicht davon abhängig, dass eine bestimmte Schrift beim Empfänger installiert ist. Empfehlenswert bei Firmenschriftzügen, Wortmarken und Logos. | |
| Für besonders kleine Beschriftungen sind die herkömmlichen Schriften nicht geeignet, weil nicht mehr genügend Bildpunkte zur Verfügung stehen. Für diesen Zweck verwendet man Pixelschriften (siehe Abbildung rechts). Das sind Schriften, die nur für eine bestimmte Pixelgröße entwickelt wurden, bei anderen Größen funktionieren sie nicht. Sie passen genau in den Pixelraster des Monitors. |
|
|
|
|
|
|
Nach sechzig Jahren wechselte
IKEA die Schrift. War der Katalog bis 2009 in der
leicht veränderten |
| 2010 auf Microsofts Internetschrift Verdana um, die auch auf der Firmen-Website verwendet wird. | ||||
| Das
Firmenlogo "verlor" 2011 seine Serifen. Die Schräge zwischen
L und
S
|
||
|
2001 bis 2011 |
2011 bis ... |
|
|
B
|
||
| Die Typopassage Wien ist ein "Mikromuseum für Gestal-tung von und mit Schrift". Sie ist in einem Zugang zum Museumsquartier eingerichtet. In mehreren Vitrinen sind in wechselnden Ausstellungen (3 pro Jahr) zeitgenössische typografische Arbeiten zu besichtigen, die experimentelle Auseinandersetzung mit Typografie zeigen. Zu jeder Ausstellung erscheint eine eigene Publikation, die rund um |
![]() ![]() |
![]() |
| die Uhr aus einem Automaten käuflich entnommen werden kann.
Preis: 2 Euro. Der Eintritt ist frei, die
Finanzierung wird vom quartier21/MQ bestritten.
www.typopassage.at
Bilder: WEBSCHOOL Die Beurteilung, ob es sich beim jeweiligen Plakat um ein grafisches oder ein typografisches handelt, obliegt dem Betrachter. Die Musikgruppe Gotan Project formte die Buchstaben ihres Namens auf einem Plattencover aus nackten Körpern: |
||

|
|
|
|
Die indische
Währung RUPIE sollte ein Symbol bekommen. Ein
Wettbewerb wurde ausgeschrieben, die Entwürfe den Lesern der "Economic
Times" zur Abstimmung vorgelegt und das gewählte Zeichen ignoriert. Eine Jury aus Regierungsmitgliedern bestimmte ein Symbol, das im Wettbewerb gar nicht |
|
|
|
||
| vertreten war. 4.200 Euro brachte dem Designer D Udaya Kumar das erkorene Zeichen. Die beiden horizontalen Linien des Entwurfs interpretiert er als Querbalken der indischen Staatsflagge. Rupie Abb. links, daneben andere Entwürfe | |||
| Im Jahresabstand findet in Berlin die
Fachmesse für Designer und Typographen statt:
www.typoberlin.de Der italienische Verlag Eulda Books kürt jährlich die besten Logos (wolda - worldwide logo design award) und präsentiert sie in einem Bildband. |
|
| Wie die Sprache lebt auch die Schrift,
laufend werden neue Schriften entwickelt. Reich werden die
Schriftdesigner nicht. Schriften lassen sich schlecht schützen, weil sie
von den Gerichten meist als Allgemeingut betrachtet werden. Und der kaum
durchsetzbare Schutz drückt auf den Preis. Bücher zum Thema: Film zum Thema:
Websites: |
|