Unscharfe Fonts im Browser: Die Probleme von DirectWrite

Wenn man die Schwächen des GDI genauer untersucht, stößt man zunächst auf das Kerning (deutsch: Unterschneidung). Die GDI-Funktion TextOut hat die Kerning-Information im Font schlicht und einfach nicht ausgewertet. Buchstabenpaare wie "AV" oder "VA" dürfen einen geringeren Abstand voneinander haben als er im Font hinterlegt ist.

Das liegt daran, weil die parallel verlaufenden diagonalen Linien beim Betrachter subjektiv einen größeren Abstand suggerieren als zwei vertikale Linien wie beim Buchstabenpaar „MN“. Daher ist in den Fonts für bestimmte Buchstabenpaare ein geringerer Abstand hinterlegt, den das GDI jedoch nicht beachtet hat.

Komplizierter sind Hinting und Subpixel-Rendering-Technologien wie ClearType. Um diese Probkamtik zu verstehen, muss man sich ein wenig damit beschäftigen, dass die Darstellung von Vektorfonts wie TrueType oder OpenType auf einem Bildschirm alles andere als einfach ist. Grundsätzlich sind Vektorfonts auflösungsunabhängig. Ein Zeichen in einem Vektorfont ist eine Zusammenstellung von Bezierkurven.

Auf einem Bildschirm hat man das Problem der geringen Auflösung. Normale LCD-Bildschirme besitzen eine Auflösung von etwa 100 Pixel pro Zoll (englisch: dots per inch, dpi). Zur Darstellung einer Schrift in der Größe 10 Punkt, wie sie in Websites üblich ist, hat man ohne Unterlängen eine Zeichenhöhe von 10 Pixeln zur Verfügung. Die Breite ist bei Proportionalschriften variabel. Sie richtet sich nach dem Schriftbild. So ist der Font „Arial Narrow“ recht eng, während „Verdana“ eher breit ist. Ein „D“ in Verdana hat beispielsweise bei 10 Punkt eine Breite von 6 Pixeln. Ein „l“ muss mit einer Breite von einem Pixel auskommen.

Es ist offensichtlich, dass ein Zeichen einer altdeutschen Schriftart mit vielen Schnörkeln und Serifen nur schwer in 10 mal 6 Pixeln darstellbar ist, insbesondere wenn man die Charakteristik dieser Schriftart bei 10 Punkt noch erkennen soll. Aber auch bei serifenlosen Schriften wie Arial, Tahoma oder Verdana ist das nicht einfach. Ein weiteres Problem ist der Treppenstufeneffekt, der bei diagonalen Linien auftritt.

Bild 5: Quelle: Wikimedia, Autor: Jonathan Haas

Um die Darstellung zu verbessern gibt es verschiedene Techniken. Eine davon ist Hinting. Dabei sind in der Fontdatei „Hinweise“ (englisch: Hints) eingebaut, wie Zeichen einer Vektorschrift in kleinen Auflösungen, etwa 10 mal 6 Pixel, am besten darzustellen sind. Ein Beispiel dafür zeigt Bild 5.

Würde man die Vorschriften der Bezierkurven konsequent auf den Buchstaben „W“ anwenden, um ihn auf 14 mal 12 Pixel zu rendern, erhielte man die Darstellung links. Beachtet man die „Hints“ in der Fontdatei, ergibt sich ein Rendering wie rechts gezeigt. Man sieht sofort, dass das Wort „Wikipedia“ rechts besser zu lesen ist. Erst auf den zweiten Blick erkennt man, dass das rechte „W“ 15 statt 14 Pixel breit ist. Die Metrik des Fonts wurde also geändert, um eine bessere Darstellung zu bekommen.

Obwohl durch das Hinting einige Schriftzeichen auch enger werden können, führt es jedoch in den meisten Fällen dazu, dass das Zeichen um einen Pixel breiter wird. Wenn man eine Textzeile aus 40 Zeichen hintereinander schreibt, kann man davon ausgegen, dass der Text etwa 10 bis 15 Pixel breiter ist, als er laut Fontmetrik sein darf. Will man die Fontmetrik einhalten, muss man die zusätzlichen Pixel irgendwie wieder einsparen, beispielsweise durch Verringerung der Abstände zwischen Wörtern und einzelnen Zeichen.

Bild 6: In der oberen Zeile wurde nur das Hinting beachtet. In der unteren Zeile wurden die zusätzlichen Pixel wieder eingespart.

In Bild 6 sieht man die Unterschiede. Die obere Zeile zeigt, wie durch das Hinting der Text um ein paar Pixel breiter wird. In der unteren Zeile wurden die Abstände zwischen den Buchstaben so weit verringert, dass der Text die vorgeschriebende Breite hat. Das verschlechtert das allerdings das Schriftbild. In der unteren Zeile sind die Buchstaben „u“ und „i“ im Wort „quick“ sehr nah beieinander. Würde man das „i“ um einen Pixel nach rechts versetzen, wäre es viel zu nah am „c“.

Microsoft hat sich beim GDI dafür entschieden, das bessere Schriftbild zu rendern und es mit der Breite von Text nicht so genau zu nehmen. Dafür hat Microsoft in der Vergangenheit viel Kritik einstecken müssen, denn dieses Verhalten ist der Albtraum eines Programmierers einer WYSIWYG-Anwendung.

Verkleinert man etwa eine Textbox von 72 Punkt auf 10 Punkt, dann verändert sich das Seitenverhältnis der Box. Das allein ist schon nicht gut. Hinzu kommt, dass das nur für die Ausgabe auf dem Bildschirm gilt, nicht aber für einen Ausdruck auf einem handelsüblichen Drucker mit 600 dpi. Der hat nämlich eine so hohe Auflösung, dass kein Hinting erforderlich ist. Dem Entwickler bleibt nichts anderes übrig, als mühevoll mit Funktionen wie GetGlyphOutline daran zu arbeiten, dass die Bildschirmausgabe einigermaßen passt.