praegnanz.de büro für intervernetzte medien

Gerrit, 03.10.2012

Keine Angst mehr vor opacity und Schriftdarstellung?

Manchmal ist das Timing ein Schalk. Gerade wollte ich ein Kapitel meines #webtypobuch schreiben, in dem es um Schriftdarstellung in Extremsituationen geht. Viele von euch werden den Effekt kennen: Sobald man per opacity ein Element auch nur einen Hauch teiltransparent werden lässt, verliert die Schrift ihre Subpixel-Glättung und wird merklich dünner. Besonders ärgerlich beim sanft animierten Ein- und Ausblenden von Textboxen und Ähnlichem.

Quasi während ich formuliere, macht mein Chrome ein Update von 21 auf 22, und das Problem ist weg. Und ein kurzer Check macht klar: Auch unter Firefox 15, Safari 6 und Opera 12 sind keine größeren Unterschiede zwischen opacity:1 und opacity:0.999 mehr zu vermelden. Siehe dazu auch meine entsprechende Testumgebung.

(Ja, Chrome schaltet weiterhin die Subpixel aus, aber die Schrift wird nicht mehr so absurd viel schlanker wie vorher. Alle anderen Mac-Browser sind noch robuster und behalten auch die Subpixel bei.)

Kann jemand über die Situation unter Windows XP und Windows 7 berichten? Ich habe leider gerade beides nicht zur Hand.

update: Das Problem besteht weiterhin, allerdings in erster Linie bei Animationen von opacity-Werten oder ganz besonders deutlich bei Dreh-Animationen

5 Kommentare

  1. Belles Lettres am 3. Oktober 2012 #

    Ich habe gestern erst gemerkt, daß man Schrift mit CSS lieber nicht drehen sollte. Woran liegt das eigentlich, in Illustrator sieht es doch auch schön aus? Und wenn ich mich recht erinnere, auch in SVG.

  2. Gerrit am 3. Oktober 2012 #

    Alle Adobe-CS-Produkte kommen mit hauseigener Schriftglättung, die nicht mit Subpixeln arbeitet, oder zumindest besser damit umgeht, wenn die Schrift nicht ausschließlich in 90-Grad-Schritten gedreht wird. Dafür sieht unter Mac OS X die normale, 90-gradige Schriftdarstellung ein wenig besser aus als unter CS. So mein Empfinden. Ist viel Subjektivität dabei.

  3. Belles Lettres am 4. Oktober 2012 #

    Ich habe es noch einmal ausprobiert. Das Rotate-Attribut in SVG führt (natürlich!) zum selben Ergebnis wie xy-transform:rotate(?deg) in CSS. Auch schräge Linien (line und path) werden ja in SVG ausgegraut.

    In Windows auf einem nicht zu guten Monitor sieht man:
    IE9 graut schwarze Schrift durch Drehung kaum aus (nicht wahrzunehmen), die Buchstaben tanzen nicht auf der schrägen Grundlinie. Toll gemacht und ein Hinweis auf die Hintergründe des Problems.

    FF graut aus, das Tanzen hält sich in Grenzen. Chrome ist gräuslich. Bei jeder Neigung kann man die Schrift kaum entziffern. Opera graut aus, kein Tanzen, aber die Buchstaben werden in die Breite gezerrt, so daß man es gar für eine andere Schrift hält.

    Es scheint ein größeres Problem zu sein und sieht so aus, daß sogar Systemschriften ihr gutes Hinting beim Drehen verlieren. Würde mich schon interessieren, wie Adobe es genau anstellt, daß gedrehte Schrift in Ai gut aussieht. So etwas müßte man doch auch für Browser machen können. Der IE unterscheidet sich doch irgendwie im ClearType von anderen Browsern, nicht wahr?

    Die gedrehten Postitzettelrandnotizen auf meinem Blog kann ich erst einmal vergessen.

  4. Gerhard am 8. Oktober 2012 #

    Chrome 21, Firefox 15, Opera 12, gerade bei den ersten beiden dürften die meisten Nutzer bereits vor ewigen Zeiten aus dem Updateterror ausgestiegen sein und freuen sich jetzt über einen Brower mit verlässlicher Dartellung und funktionierenden Plugins.

  5. Gerrit am 8. Oktober 2012 #

    @Gerhard: Die Statistiken sehen anders aus:

    http://cdn.arstechnica.net/wp-content/uploads/2012/10/chrome-adoption-2012-09.png

    http://cdn.arstechnica.net/wp-content/uploads/2012/10/firefox-adoption-2012-09.png

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.