Inversen Text vor der Hässlichkeit retten?

Per Mail erreicht mich diese Frage:

Ich habe ein großes Problem mit Html Schriften auf schwarzem Untergrund. Ich bin Designer, kein Html Programmierer, daher wusste ich nicht, dass helle Schrift auf schwarzem Untergrund unglaublich hässlich aussieht. Viel zu fett & zu viel aliasing!
Meine Frage an sie ist nun: Hätten sie einen Tip für mich, welche Schrift besonders gut für schwarze Hintergründe geeignet ist? Bzw. in welcher Schriftgröße?
Leider steht das Layout schon und ich MUSS unter allen Umständen einen schwarzen Untergrund verwenden  …

Als Antwort schrieb ich dies:

vielleicht kann man ein wenig tricksen und das Schwarz ein wenig ins Graue übergehen lassen, die Schrift nicht komplett weiß, sondern leicht gebrochen, so dass der Kontrast ein bisschen weniger stark rüberkommt.
Ansonsten gibt es keine wirklich generell zu empfehlende Schrift speziell für Inverse Layouts. Die Verdana dürfte wahrscheinlich noch am robustesten sein – von einer Serifenschrift würde ich eher abraten.
Es gibt einen kleinen CSS-Trick, mit dem man zumindest im Safari das ausufernd fette Antialiaising wegzaubern kann:
text-shadow: 0 0 0 #000000;
Und als Farbe dann die Hintergrundfarbe nehmen, auf der der Text stehen soll.

7 Kommentare

Boris

Interessanter Aspekt! Sagen wir nicht generell, dass Hell auf Dunkel lese-problematisch ist? Das mag also nicht bloß mit dem härter wirkenden Kontrast bei inverser Darstellung zusammenhängen, sondern auch mit der Schrift-Darstellung.

Ich habe eben mal kurz ein Vergleichsdokument gebastelt, um mir das anzuschauen. Ist auf die Schnelle aber rein statisch geworden. Lokal gespeichert kann man im Stylesheet (style.css) die Schriftarten per Kommentierung wechseln. (Müsste das nicht mit Firebug im Firefox sogar dynamisch im Online-Dokument machbar sein?)

Meine Erkenntnis:

Unter Linux sehe ich beide Kontrast-Varianten ohne Subpixel-Rendering ab 1.2em sehr gut dargestellt und lesbar, vor allem sehe ich praktisch keinen nennenswerten Unterschied zwischen S/W und W/S. Und je größer die Schrift, desto geringer werden die Darstellungsunterschiede.

Jetzt schaue ich mir das mal unter Windows an …

Zellmi

Ich denke, der Tipp mit dem »fast« schwarzen Hintergrund und der »fast« weißen Schrift, ist für die PC-Welt der geeignete gewesen. Ich hab das mit dem text-shadow mal im Firefox getestet: Nutzt nix  …

Marco Philipeit

In seinem Artikel Five Simple Steps to better typography beschreibt Mark Boulton u.A. in Part 1 ebenfalls kurz die Problematik mit Inverser Textfarbe. Er empfiehlt für angesprochenes Problem, den Buchstabenzwischenraum sowie die Zeilenhöhe zu vergrößern. Meiner Meinung nach eine wirklich lohnenswerte Methode und ein lesenswerter Artikel.

Veit

In der Offline-Typografie sperrt man inversen Text ohnehin etwas mehr. Man sieht auch in Boris’ Beispiel, dass der weiße Text auf schwarzem Hintergrund irgendwie gequetschter wirkt.

Leider ist das mit dem Buchstabenabstand bei Webseiten nicht so einfach, da mitunter nur 1px-Änderungen sichtbar sind. Wenn ich also bei z.B. 1em=10px als Buchstabenabstand 0.01em einstelle, passiert auf manchen Browsern/Systemen erstmal gar nichts. Stelle ich 0.06em ein, reißt es die Schrift auseinander (1px-Abstände). Sehr unschön, wo doch gerade bei kleinen Schriftgrößen ganz leichtes Sperren angebracht wäre.

esher

dicke schriften im browser unter mac os x (tiger)? gehe: systemeinstellungen > erscheinungsbild > schriftglättung > standard! > restart browser > et voila.

siehe auch eoghanmccabe

Struppi

CSS Code kann man schön mit der Web Developer Erweiterung bearbeiten. http://chrispederick.com/work/web-developer/

pimpster

Den Trick für Safari kannte ich noch nicht. Danke!

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.