Schriftdarstellung in Extremsituationen
Dass Schriftglättung nicht gleich Schriftglättung ist, haben wir im vorherigen Kapitel besprochen. Doch es kommt noch komplexer und ein wenig nerviger. Denn die geschilderten Verhältnisse beziehen sich in erster Linie auf den klassisch-konservativen Schriftsatz, sprich: dunkle Schrift auf hellem strukturlosen Grund, Zeile für Zeile in einem statischen Layout verbaut. Es gibt jedoch einige Gestaltungsparameter und CSS-Effekte, welche entweder die Schriftglättung negativ beeinflussen oder eine optimale Schriftdarstellung auf andere Weise korrumpieren. Hier einige Beispiele dafür, wo man grundsätzlich vorsichtig sein sollte:
Text auf IE-Filter-Hintergründen
Eine beliebte Methode, um auch den älteren Browsern IE6 bis IE8 Farbverläufe (und andere Effekte) zu entlocken, ist der gezielte Missbrauch der Microsoft-eigenen filter-Eigenschaft in CSS. Das sieht im Code ungefähr folgendermaßen aus:
div.teaserbox {
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e5799',
endColorstr='#7db9e8',
GradientType=0
);
}Nicht Teil des Webstandards – und im IE10 endlich abgeschafft – hat diese Technik jedoch auch ihre Nachteile. Abgesehen davon, dass fürchterlicherweise keine Ecken mehr per CSS abgerundet werden können, streikt auch die Schriftglättung aller Textelemente, die sich visuell auf dem entsprechenden Kasten befinden. Selbst dann, wenn sie nicht zum gefilterten HTML-Element selber gehören. Der Text wirkt dann wieder wie unter Windows 95, komplett mit
1-Bit-Pixeln.
Man könnte behaupten, dass Nutzer des Internet Explorers diesen Darstellungsfehler üblicherweise gar nicht bemerken, oder, falls doch, sie es nicht anderes verdient haben. Eventuell hätte man damit sogar Recht.
Rotation
Man kann sich seine Designvorlagen nicht immer aussuchen. Dieses Jahr hatten wir einen Kunden, dessen Website komplett um ca. 4 Grad schräggestellt werden sollte. Da ich manchmal einen perversen Spaß an der technischen Herausforderung besitze, ließen wir uns darauf ein. Das grundsätzliche Layout stellte sich als fast schon triviale Aufgabe heraus, da man mit der CSS3-Eigenschaft transform:rotate(4deg) sehr pragmatisch und schnell arbeiten kann. Der Haken ist die Schriftdarstellung der angeschrägten Textzeilen, welche in Abhängigkeit von Betriebssystem und Browser zwischen akzeptabel und grausam schwankt.
Unterschiedlichste Raster-Ergebnisse beim Rotieren
Das beste Resultat erzielt der Internet Explorer 9 unter Windows 7, weil hier durchgängig das überlegene DirectWrite im Einsatz ist, welches in alle Richtungen saubere und stufenlose Subpixelglättung ermöglicht. Auch Firefox läuft unter Windows 7 potenziell mit DirectWrite, allerdings nur unter bestimmten Voraussetzungen – die Grafikkarte des Rechners spielt dabei eine überraschend wichtige Rolle.
Qualitätsmäßig dicht dahinter folgen Safari, Chrome und Opera unter OS X, welche ebenfalls erträglich gut leserliche, wenn auch etwas unscharfe Textzeilen hervorbringen.
Wieder etwas schlechter schlägt sich Firefox unter OS X, wo die Buchstaben schon deutlich hinauf und hinab hüpfen – deren vertikale Position also offenbar an das Pixelraster des Bildschirms gebunden zu sein scheint.
Katastrophal hingegen ist die Schriftdarstellung unter GDI, also bei allen Windows-XP-Browsern. Hier sieht man deutlich, dass die erste ClearType-Version nur für die horizontale Optimierung ausgelegt war und mit als stufenlos angedachten Verschiebungen auf der y-Achse nicht klarkommt. Die Folge: hässliche Treppeneffekte in der Grundlinie der Textzeilen, was die Schrift sehr schwer zu erfassen macht.
Animation
Sobald ein HTML-Element fließend animiert wird – sei es per JavaScript oder modernerer CSS-Transition –, wechseln in vielen Browsern die Glättungsmethoden lustig hin und her. Vor allem Safari auf dem Mac entwickelt eine gewisse Eigenintelligenz und versucht, den Abschluss einer Animation selbstständig zu erkennen, woraufhin wieder zu einer merklich fetteren Darstellungsmethode gegriffen wird als während der Animation.
Die genaue Aufstellung, welche Browser sich bei welchem Animationseffekt unter welchen zusätzlichen Umständen besonders schlecht benehmen, erspare ich Ihnen an dieser Stelle – es wäre eine komplizierte Tabelle, die sich ständig ändert, wenn neue Browserversionen auf den Markt kommen. Zur Veranschaulichung dürfte vorerst die folgende visuelle Dokumentation dienen:
links: während der Animation, rechts: vor/nach der Animation
Inverse Schrift
Man könnte es als optische Täuschung auffassen, wenn es nicht doch so auffällig wäre: Die sowieso schon als zu fett geltende Schriftdarstellung unter OS X wird noch extremer, wenn sie in weiß auf schwarz (oder generell hell auf dunkel) gesetzt ist. Um dieses Problem zu umgehen, haben sich manch verwegene Webdesign-Kollegen zwischenzeitlich sogar eines – inzwischen gefixten – Bugs beholfen, indem sie die opacity des Textes auf 0.999 gesetzt haben, um einen anderen Schriftdarstellungsmodus zu triggern, der visuell magerere Schriften erzeugt.
Glücklicherweise fällt die fettere Darstellung vor allem bei Serifenschriften in kleineren Schriftgraden störend auf (siehe Darstellung oben). Bei den inzwischen üblicheren 16 Pixeln aufwärts dürfte sich der Unterschied der negativen zur positiven Schrift optisch größtenteils erledigt haben. Und auf High-PPI-Displays sowieso, weil hier selbst eine 11-Pixel-Georgia mit physischen 22 Pixeln gerastert wird.