Schriften fürs Web
Schriftenlehre

DeveloperIT-ProjekteSoftware

Ein Designer sucht nach der größtmöglichen typografischen Freiheit. Diese im Web zu finden, ist gar nicht so einfach. Internet Professionell zeigt, wie Webdesigner Schriften richtig einsetzen.

Arial & Co.

Schriften fürs Web

Das Client-Server-Modell des Web hat die IT und bis zu einem gewissen Grad sogar die Welt revolutioniert. Mit den Folgen muss sich der Designer herumschlagen. HTML und CSS werden auf dem Client interpretiert, also im Browser, und insofern können Gestalter auch nur die Schriften verwenden, die auf den meisten Clients vorhanden sind. In der Praxis geben Sie am besten die spezielle Schrift an, die Sie idealerweise angezeigt haben möchten, danach eine weiter verbreitete wie Arial, Verdana oder Times und zum Schluss die Standard-Serifen- (serif
) oder serifenlose Schrift (sans-serif). In CSS sähe das so aus:

font-face: "Futura", Verdana, sans-serif;

Zuerst kommt im Beispiel die spezielle ? hier serifenlose ? Schrift Futura, dann die weit verbreitete und ebenfalls serifenlose Verdana. Wenn beide nicht vorhanden sind, nimmt der Browser seine standard-serifenlose Schrift.


Keine Fontfreiheit im Web

Schriften fürs Web

Wie sieht es nun aber aus, wenn Sie eine bestimmte Schrift einsetzen möchten? Das kann beispielsweise notwendig sein, weil Ihre Firma oder Ihr Kunde eine Hausschrift für alle Printerzeugnisse besitzt, die auch im Web verwendet werden soll. Eine Zeit lang wurde als Lösung angesehen, Schriftdateien mit dem HTML-Dokument mitzuschicken. Da sich aber die zwei Font-Technologien von Microsoft (für den IE) und Bitstream (für Netscape) nicht vertrugen und das Handling von downloadbaren Schriften nach wie vor schwierig ist, hat sich diese Lösung nicht durchgesetzt.

Bleibt als Ausweg, Schriften entweder als Pixelgrafiken (GIF, PNG und mit Einschränkungen JPEG) einzusetzen oder Schriften in Flash-Filmen zu verwenden. Beide Varianten sind mit Schwierigkeiten behaftet.


Vom Vektor zum Pixel

Schriften fürs Web

Schriften liegen meist als Vektoren vor. Das Umwandeln von Schrift in eine Pixelgrafik ist sehr simpel: Sie starten eine beliebige Bildbearbeitung, wählen das Textwerkzeug, schreiben Text und speichern die Datei anschließend als GIF oder PNG. JPEG ist meist nicht geeignet, da die verlustbehaftete Komprimierung mit ihren Artefakten und aufgeweichten Übergängen Schrift zu sehr verzerrt.

So weit, so einfach. Allerdings beginnen die Probleme, wenn die Schrift relativ klein abgebildet werden soll. Die dicke Headline ist nicht das Problem, wohl aber Schrift in der Navigationsleiste. Für eine Navigationsleiste stehen in der Breite selten mehr als 150 Pixel zur Verfügung, und gerade bei größeren Seiten müssen viele Elemente untereinander angeordnet werden.

Je kleiner eine Schrift dargestellt werden soll, desto weniger Pixel stehen natürlich zur Verfügung. Dies führt zu einigen Problemen: Bögen und Serifen können nur noch schwer dargestellt werden. Vor allem Serifen-Schriften wie beispielsweise die Garamond leiden darunter. Die allgemeine Empfehlung lautet, für kleine Schriftgrößen eher serifenlose Schriften einzusetzen. Solche Empfehlungen sind allerdings mit Vorsicht zu genießen. Eine wissenschaftliche Studie der Universität Witchita (psychology.wichita.edu/optimalweb/text.htm) zeigt zwischen der serifenlosen Arial und der Serifen-Schrift Times in 10 Punkt kaum Unterschiede bei der Lesegeschwindigkeit. Der Effekt ist hier eher ein psychologischer, da die Leser in der gleichen Studie angaben, die Times deutlich weniger gerne zu lesen.

Gerade bei besonderen Schriften haben einige Schriftanbieter wie beispielsweise Adobe auf die besondere Problemstellung im Web reagiert. Als weboptimiert bezeichnete Schriften sind oft Varianten bekannter Schriften, bei denen beispielsweise die Strichstärke weniger schwankt und Details stärker hervortreten, damit die Schrift auch in kleinen Schriftgrößen am Bildschirm lesbar ist.


Antialiasing

Schriften fürs Web

Wenn es zu einer Schriftart, die Sie gern verwenden möchten, eine weboptimierte Variante gibt, ist es natürlich meist sinnvoll, diese einzusetzen. Aber auch, wenn Sie eine Standardschrift einsetzen, sollten Sie sich bei der Umsetzung in der Bildbearbeitung noch einige Gedanken machen. Der erste ist einfach: Sie sollten die Schrift so groß wie möglich machen. Denken Sie daran, dass eine Grafik nicht skaliert werden kann. Nutzer mit Sehschwäche haben keine Möglichkeit, die Schrift im Browser größer zu drehen. Das ist übrigens meistens der Grund, sich komplett gegen kleinere Schrift als Pixelgrafik zu entscheiden und doch HTML und CSS mit einer Standardschrift einzusetzen.

Wenn die Schrift so groß ist, wie Sie es gerade noch für sinnvoll erachten, sollten Sie als Nächstes auf die Darstellung achten. Pixel sind quadratisch und Monitore haben eine recht geringe Auflösung. Ist Ihre Schrift also beispielsweise nur zehn Pixel hoch, müssen alle Striche der Schrift mit diesen wenigen Pixeln nachgebildet werden. Dies reduziert natürlich die eindeutigen Merkmale einer Schrift. Je kleiner Schriften dargestellt werden, desto weniger Unterschiede haben sie also.

Mit Antialiasing versucht die Bildbearbeitung, die Darstellung der Schrift zu verbessern. Das Prinzip ist sehr einfach. Nehmen Sie als Beispiel schwarze Schrift auf weißem Grund. Wenn jeder Pixel der Schrift schwarz ist und der Hintergrund weiß, wird es bei kleineren Schriftgrößen problematisch. Die so genannten Punzen ? von Zeichenformen ganz oder teilweise eingeschlossene Weißräume ? laufen zu, das heißt, sie verschwinden. Die Buchstaben rücken sehr eng aneinander und als Folge verschwimmen die Details.

Beim Antialiasing werden dazwischen graue Pixel eingefügt, um optisch die Kurven und feineren Elemente der Schrift zu simulieren. Allerdings sieht kleinere Schrift durch Antialiasing oft verwaschen aus. Hier müssen Sie einen guten Kompromiss finden.

Eine andere Lösung sind Pixelfonts. Diese Fonts sind auf bestimmte Größen beschränkt, zum Beispiel 8 Punkt. In diesen Größen sitzt jedes Pixel so optimal, dass kein Antialiasing notwendig ist. Verwenden Sie eine andere Größe, passen die Proportionen nicht mehr.


Design folgt Funktion

Schriften fürs Web

Ganz gleich ob Sie einen Pixelfont, eine weboptimierte Schrift oder eine normale Schrift verwenden, wichtig ist, dass Sie sich das Ergebnis aus Sicht der Lesbarkeit sehr kritisch ansehen. Manchmal hilft es auch, die Schrift in der fetten Variante zu verwenden oder den Buchstabenabstand zu erhöhen ? im Fachchinesisch: die Schrift zu sperren. Und wenn es mit der von Ihnen gewählten Schrift gar nicht funktioniert, kehren Sie lieber zu HTML und CSS zurück. Bei Text und Lesbarkeit folgt das Design eindeutig der Funktion.


Flash: Pixelfonts

Schriften fürs Web

Pixelfonts besitzen noch ein weiteres Einsatzgebiet: Flash. Der Flash-Player muss Text für den Bildschirm rastern. Bei normalen Schriften liefert er gerade bei kleiner Schrift keine guten Ergebnisse. Das Antialiasing lässt zu wünschen übrig und zwar in allen Qualitätsstufen. Oft auch als Flash-Fonts bezeichnete Pixelfonts sollen Abhilfe schaffen. Dazu müssen sie in Flash allerdings so eingesetzt werden, dass der Flash-Player sie auch wirklich ohne Antialiasing darstellt.

Wie das geht, sehen Sie im Folgenden: Pixel- beziehungsweise Flash-Fonts finden Sie auf einer Vielzahl von Webseiten. Für das Beispiel kommt die Uni05 (www.miniml.com) zum Einsatz. Sie können aber natürlich auch einen beliebigen anderen Font einsetzen.

Schreiben Sie Text mit dem Pixelfont. Wichtig ist, dass Sie als Schriftgröße nur eines der Maße nehmen, auf die der Pixelfont optimiert ist. Für die Uni05 sind das 5 Pixel beziehungsweise 8 Punkt oder ein ganzzahliges Vielfaches wie 16 oder 24 Punkt. Allerdings lässt sich das nicht beliebig weit treiben, da sich kleine Fehler und Unsauberkeiten bei größeren Größen zu stark bemerkbar machen.

Je nach Font wird meist empfohlen, ihn linksbündig auszurichten. Wichtig ist außerdem, dass der Font bei dynamischen Textfeldern in den Flash-Film eingebunden wird. Nun müssen Sie den Text exakt auf einem Pixel platzieren. Gehen Sie dazu in den Eigenschafteninspektor und geben Sie für den Text ganzzahlige Koordinaten an. Ist x bisher 100.3, sollte es anschließend 100.0 sein. Bei y verfahren Sie genauso.


Hilfreich: das Raster

Schriften fürs Web

Wenn Sie die Option Ansicht, Ausrichten, An Pixeln ausrichten (Flash MX: Ansicht, An Pixeln ausrichten) aktivieren, können Sie den Text noch verschieben, ohne dass er die ganzzahligen Koordinaten verlässt. Dies ist praktisch, wenn Sie nicht genau wissen, welche Koordinaten die richtigen sind. Ein Problem bleibt allerdings: Bei längeren Textblöcken scheitert meist auch der Pixelfont. Sie erkennen dann oft schon in den hinteren oder unteren Regionen leichtes Antialiasing. Hier versagt die exakte Ausrichtung. Abhilfe verschafft einzig, den Textblock in Einzelteile zu stückeln.

In Flash MX 2004 funktionieren die Pixelfonts immer noch wie gewohnt, sind aber nicht mehr unbedingt notwendig. Sie können für Schrift das Antialiasing deaktivieren. Dazu gibt es im Eigenschafteninspektor die Option Alias-Text. Damit wird jede beliebige Schrift zum Pixelfont.


Fazit

Schriften fürs Web

Freie Schriftwahl ist gerade in Verbindung mit kleiner Schrift nicht immer einfach zu erreichen. Ganz gleich welchen Kompromiss Sie eingehen, wichtig ist, dass der Nutzer noch lesen kann, was Sie ihm sagen möchten.