Webdesign-Kurztipp für den Firefox: Schriften auf Webseiten weicher darstellen

Marcel Am 13.03.2014 veröffentlicht Lesezeit etwa 1:28 Minuten

ffcsAn dieser Stelle mal ein kurzer Tipp für alle Hobbymäßigen Webdesigner, der vielleicht für den ein oder anderen ganz praktisch sein kann. Wie dem ein oder anderen vielleicht schon aufgefallen ist, habe ich dem Blog hier mal ein neues Äußeres spendiert, wobei ich wieder mal auf einen recht doofen Umstand gestoßen bin. So lässt sich das Schriftbild in Browsern mit der WebKit-Engine (Safari, Chrome, Opera und Co.) über die CSS-Angabe „-webkit-font-smoothing: antialiased;“ noch ein wenig glätten, wodurch alles ein wenig schicker und glatter aussieht – wird inzwischen von vielen Erstellern gerne genutzt. Das doofe an der Sache: Funktioniert eben nur in den genannten Browsern, der Firefox zum Beispiel unterstützt dieses Anti-Aliasing per Befehl derzeit noch nicht und so kommt es vor, dass sich das Schriftbild schon deutlich unterscheidet und einfach nicht mehr so rund aussieht:

Nach etlicher Zeit des Suchens und des Ausprobierens bin ich dann auf einen kleinen „Hack“ aufmerksam geworden, der sogar den gewünschten Effekt erzielt hat. So lässt sich ein leichter Schatten um den Text legen, wodurch dieser etwas „smoother“ wird:

Schaut meiner Meinung nach etwas besser aus als vorher, erreicht wird es über die folgende CSS-Angabe welche dank der ersten Zeile eben auch nur im Firefox genutzt wird:

@-moz-document url-prefix() {
body {
-moz-osx-font-smoothing: grayscale !important;
text-shadow: 0 0 1px rgba(0,0,0,0.3);
}
}

Hierbei müsst ihr allerdings ein wenig herumexperimentieren. Denn neben dem schwarzen Schatten lässt sich auch ein weißer Schatten nutzen, was gerade auf helleren Untergründen doch etwas besser passen dürfte:

@-moz-document url-prefix() {
body {
-moz-osx-font-smoothing: grayscale !important;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
}

Ebenso solltet ihr ein wenig an der Transparenz feilen (letzter der vier Komma-separierten Werte), ich bin mit dem angegebenen Wert ganz gut gefahren, versucht diesen einfach mal zu verringern oder zu erhöhen und schaut dann einfach mal selbst. Für mich persönlich ein toller und kurzer Tipp, auch wenn das sicherlich nur bedingt Sinn der Sache ist. Falls ein Webdesigner aus der professionellen Ecke dazu etwas sagen möchte, der kann das gerne in den Kommentaren machen.

Artikel teilen

Kaufempfehlung*

  • Motorola Moto X 2. Generation Smartphone (5,2 Zoll (13,2 cm) Touch-Display, 32 GB Speicher, Android 4.4.4) schwarz
  • Neu ab EUR 150,80, gebraucht schon ab EUR 150,80
  • Auf Amazon kaufen*