WebPunktManufakturPunktKöln

Internet Lösungen

NotizenPunkt: Notizen Notizen

Statt eines Blogs, für das wir nicht ausreichend und regelmäßig genug Zeit haben, finden Sie hier Notizen zu Themen, die uns beschäftigen:


Typographie

Schriften besitzen bemerkenswerte Symbolkraft.

Wild in den Schriftenvorrat zu greifen hieße: sich keine Gedanken zu machen, welche Kleider zu welcher Gelegenheit tragen - im Karnevalskostüm zur Beerdigung, im Nadelstreifen zum Kindergeburtstag etc.

Die passende Schrift zum Beruf ...
Mit welchem Rechtsanwalt würden Sie vor Gericht ziehen ... und mit welchem ein Bierchen trinken gehen?


Wahl der Schrift

Wir Webdesigner haben bei der Schriftauswahl ein großes Problem:
Die Browser können nur die Schriften anzeigen, die der Besucher Ihrer Homepage auf seinem eigenen Rechner installiert hat. Die Hausschrift einer Firma ist also höchst selten 1:1 in das Online-Layout übernehmbar.

Mit den uns zur Verfügung stehenden Techniken können wir den Browsern lediglich eine Präferenzliste unserer Wünsche nennen und die ist denkbar kurz. Sie sieht z.B so aus:

font-family:
Verdana, Tahoma, Arial,
Helvetica, sans-serif;

Hier wird der Browser des Besuchers angewiesen, zuallererst nach der Schriftart 'Tahoma' zu suchen. Findet er sie nicht, sucht er die 'Arial'. Wird auch diese Schrift nicht gefunden, sitzt der Besucher vielleicht an einem Apple-Computer. Dort könnte die 'Helvetica' installiert sein. Findet der Browser auch diese Schrift nicht, wählt er die nächstbeste 'sans-serif' (serifen-freie) Schrift.

Präsentation der Schrift:
1. Grauskala verwenden

Bei der Behandlung von Text im Screen-Design fällt mir immer wieder eine Nachlässigkeit auf: schwarzer Text erscheint vor weißem Hintergrund oder weißer Text erscheint vor schwarzem Hintergrund.

Offenbar machen viele Web-Designer sich nicht klar, wie weit die Farbdarstellungen im Print einerseits und am Monitor andererseits auseinandergehen.

Wenn wir ein Druckerzeugnis betrachten, ergeben sich die Farben aus dem Licht, das auf das bedruckte Papier fällt und dann in unser Auge.

Beim Blick auf die Mattscheibe durchstrahlt das Licht 'von hinten' unser Werk. Wir schauen also direkt in die Lichtquelle. Entsprechend 'brilliant' sind die Farben und entsprechend heftig die Kontraste. Stellen Sie sich den Unterschied zwischen einem Papierabzug und einem Dia vor: das ist dasselbe Prinzip.

Ist nun Text - womöglich viel Text - am Bildschirm zu lesen, ist der extreme Kontast zwischen Schwarz und Weiß eine Zumutung.

Schwarzer Text
vor weißem Hintergrund
Weißer Text
vor schwarzem Hintergrund
Dunkelgrauer Text
vor hellgrauem Hintergrund
Hellgrauer Text
vor dunkelgrauem Hintergrund

Präsentation der Schrift:
2. Sperren -Zeilenhöhen - Textauszeichnungen - Größen

Hier schreibe ich mit der Georgia, einer Serifenschrift, die eigentlich sehr schön ausschaut ... aber hier ist sie eindeutig zu klein und Sie stöhnen zurecht über den Augenpfeffer

Merke:
Wenn eine Serifenschrift [Schrift mit 'Füßchen'] für Fließtext verwendet wird, sollte sie ausreichend groß gesetzt sein! Das ist eine Grundvoraussetzung für die gute Lesbarkeit ... hier allerdings ist auch noch die Zeilenhöhe zu gering!

Aha! So liest sich die Georgia noch ein wenig besser, wie ich meine. Ich habe den Zeilenabstand um einiges erhöht.
Was mir ansonsten noch übel aufstößt, betrifft diverse Textauszeichnungen, als da wären: Sperrung, Unterstreichung, Kapitälchen ... sehr fragwürdig ist außerdem der Kursivsatz für die Textausgabe am Monitor:
kaum eine Schrift sieht am Bildschirm kursiv akzeptabel aus.

Manche Texte strotzen von Unterstreichungen (die der Besucher gerne als Hyperlinks mißversteht...), ausgedehnten fettgesetzen oder gesperrten Passagen. Solche Mittel im Übermaß und unsystematisch eingesetzt, töten jedes Schriftbild und öden an.

Ein verwandtes Thema: Texten für's WWW  /  Grafik + Text in der Homepage

Literatur:
Ralf Turtschi: "Praktische Typografie - Gestalten mit dem Personal Computer" - Verlag Niggli AG, Sulgen - ISBN 3-7212-0292-9

WWW:
Typoasis | Typografie.info |

[Claudia]
Stand: 09.01.2008..:: ^ ::..




Copyright / Urheberrecht:
Creative Commons LicenseThis website by Web Manufaktur Köln is licensed under a Creative Commons Attribution- Noncommercial- Share Alike 2.0 Germany License.
Based on a work at www.web-manufaktur-koeln.de.

Stand: 16.09.2009