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: Der Buchstabe
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.
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.

Themenseiten: Betriebssystem, Browser, Business-Software, Chrome, Firefox, Internet Explorer, Microsoft, Software, Windows

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

Artikel empfehlen:

Neueste Kommentare 

6 Kommentare zu Unscharfe Fonts im Browser: Die Probleme von DirectWrite

Kommentar hinzufügen
  • Am 27. November 2016 um 20:32 von locop chun

    diese schrift im kommentarfeld
    “ Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *
    Kommentar “
    ist kaum noch zu lesen !

  • Am 29. Juni 2011 um 7:29 von Daniel Melanchthon [MSFT]

    Fix für unscharfe Schriftdarstellung in Internet Explorer 9 jetzt verfügbar
    Viele Anwender haben in der Vergangenheit die Darstellung kleiner Schriftgrößen im Internet Explorer 9 besonders bei niedrigen Bildschirmauflösungen kritisiert: Subpixel-Positionierung mit DirectWrite (IE9, Firefox) vs. pixelgenaue Positionierung über GDI (IE8, Chrome)

    Während die einen Cleartype und Subpixel-Positionierung besser lesbar finden, präferieren andere die eckige Darstellung ohne Cleartype & Co und kritisieren “blurry fonts”.

    Am 27.06.2011 haben wir nun eine Aktualisierung der Schriftarten Arial, Verdana und Tahoma für Windows Vista, Windows Server 2008, Windows 7 und Windows Server 2008 R2 an, um diesen Konflikt zu entschärfen: http://bit.ly/jll76a

    Viele Grüße,
    Daniel Melanchthon
    Microsoft Deutschland GmbH

  • Am 16. März 2011 um 17:15 von JP

    In einigen Fällen hat es aber auch Vorteile
    Ich habe das ganze noch nie als unscharf empfunden. Vielleicht bin ich auch nur die Darstellung von OS X gewohnt. Dort war das schon immer so. GDI-Glättung sieht von den Standardschriften abgesehen oft sehr grausam aus. IE9 – eigentlich bereits IE4 (das Format war aber sehr exotisch) – beherrscht Webfonts, die nachgeladen werden. Ohne vernünftige Glättung sind viele Seiten bei denen der Gestalter mal etwas Abwechslung zu Arial, Times New Roman, Verdana, Tahoma und Konsorten liefern recht schlecht lesbar. Das alte ClearType (ohne Direct2D/Write) wurde für Screenreader unter WindowsCE entwickelt und setzt auf Hinting welches speziell vorbereitete Fonts so manipuliert, dass der Eindruck entsteht sie wären schärfer. Ohne Hints wird die Glättung gegenüber GDI verbessert aber der volle Effekt ist nicht da. Außer bei einer Hand voll Windows-Bildschirmschriftarten kommt dieser Vorteil nicht zu tragen. Die Veränderung hilft natürlich in anderen Anwendungen (z. B. DTP) bei der Vorabbeurteilung eines Layout (es sei denn es ist ein E-Book) nicht wirklich weiter. In meinen Augen ist das Ganze Geschmackssache. Ich persönlich fand die GDI-Schriftglättung (war nie für LCDs gedacht) in Windows XP furchtbar pixelig (ClearType (klassische Version) musste erst aktiviert werden, danach ging es besser).

  • Am 7. Februar 2011 um 17:57 von Miko

    Update
    Microsoft hat mittlerweile ein Update herausgebracht (welches AFAIK Bestandteil von Windows 7 SP1 ist), welches die Schärfe von hellem Text auf dunklen Grund verbessert, das sieht dann also nicht mehr so aus wie auf dem Screenshot im Teil 1.

    Die Nutzer mit 19-Zoll-Bildschirmen mit 1280×1024-Auflösung tun mir Leid, da lob ich mir meine 137 PPI.

    • Am 15. März 2011 um 18:14 von Roger

      AW: Update
      Ich habe das Problem auch bei Chrome. Jetzt hab ich das Service Pack 1 installiert und es hat kaum etwas geholfen. Solange die Schriftdarstellung nicht wie gewohnt ist, werde ich die Hardwarebeschleunigung (leider) deaktivieren müssen, die Darstellung ist schlicht inakzeptabel, hoffentlich wird dieses Problem bald gelöst, es sind ja sehr viele Nutzer davon betroffen.

      • Am 16. März 2011 um 18:34 von Miko

        AW: AW: Update
        Chrome verwendet GDI, also das was IE8 und davor verwendete. Der einzige andere Browser der auch DirectWrite unterstützt ist Firefox 4 mit aktivierter Hardwarebeschleunigung oder gesetztem gfx.font_rendering.directwrite.enabled Flag.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *