Jeder weiß: Das beste Programm zum pixelgenauen Entwerfen von Screendesigns ist immer noch Adobe Photoshop. Jedes meiner bisherigen und aktuellen Projekte hat – zumindest für kurze Zeit – eine Phase durchlaufen, wo ich im mächtigsten aller Grafikprogramme Pixel verschoben und Ebenen verschlagschattet habe.

Die sinnvollste Einstellung der Photoshop-Schriftglättung für Fließtext ist mit Sicherheit »scharf«, da diese Methode dem Endergebnis im Browser recht nahe kommt, wenn man von Windows Cleartype ausgeht. Manche Kollegen bevorzugen zwar immer noch eine augeschaltete Schriftglättung bei Screenentwürfen, aber ich denke, man kann sich da inzwischen auch mal was Gutes tun – immerhin verbreitet sich ClearType mit Windows Vista und IE7 recht flott!

Doch darauf will ich gar nicht hinaus. Heute ist mir aufgefallen, dass einige meiner Designkollegen unterstrichene Links in ihren Entwürfen lieber vermeiden. Insbesondere beobachte ich das bei diesen so typischen »Ich-komme-vom-Print«-Webdesignern. Woran liegt das? Ich denke, ich weiß es: Unterstreichungen sehen in Photoshop-Entwürfen einfach fast immer scheiße aus:

(Das obige Bild zeigt vier gängige Webschriften in Mac-Photoshop CS3 mit »scharf«-Schriftglättung.)

Der Idealfall ist natürlich eine Untertreichung mit exakt einem Pixel Höhe, dann das ist das, was auch die Browser üblicherweise bei bis zu 16 Pixel Schriftgrad darstellen (auch unter Mac-OS-X-Quartz. Testen?). Doch was sehen wir? Verdana und Arial haben lediglich bei 11 Pixel Größe eine schöne Unterstreichung. Bei höheren Schriftgraden wird’s verwaschen. Bei der Georgia hingegen gibt’s nur bei 13 und 14 Pixeln was zu Meckern. Die Grande Catastrophe sehen wir bei Lucida: Hier sitzt der Unterstrich jeweils zwei bis drei Pixel zu tief – und das geht gar nicht! Dies hat mit der späteren Darstellung im Browser nun gar nichts mehr zu tun.

Als ästhetisch empfindsamer Webdesigner habe ich nun drei Möglichkeiten:

1. Ich lasse die vermeintlich hässlichen Unterstreichungen komplett weg, weil ich nicht weiß, dass es im Browser besser aussehen wird.
2. Ich lasse Photoshop die Unterstreichungen unscharf und zu tief machen und erkläre meinem Kunden, dass es später im Browser besser aussehen wird. Legitim, hängt aber vom Kunden ab.
3. Ich mache die Unterstreichungen manuell und ziehe eine Menge 1-Pixel-Linien im Photoshop. So mache ich es manchmal, und es ist eine Schweinearbeit.

Ich rate sehr von Methode 1 ab, denn Unterstreichungen von Links erhöhen fast immer die Usability! Auch wenn es beim Entwurf mal scheiße aussieht: Es lohnt sich dennoch, sie zumindest bei der Umsetzung der Website zu verwenden. Bedenkt dies bitte beim nächsten stylischen Wurf!

update: Wenn ich meine Leser nicht hätte! Einfach ein bisschen mit dem Grundlinienversatz spielen, schon kann man in einigen Fällen ein schöneres Ergebnis zaubern! Danke.