New Perspectives On Web Design

(C. Jardin) #1
By Marko Dugonjić CHAPTER 9

Different results side by side. Check out the
-webkit-font-smoothing test page by Christoph Zillgens^32.

body { -webkit-font-smoothing: antialiased; }


text-shadow improves text antialiasing in Chrome on Windows.
The shadow has no effect on the Mac:


body { text-shadow: 1px 1px #fff; }
/ Replace the color with the background color /


Legibility in Firefox can be improved by adding a combination of text
shadows^33 :


body { text-shadow: 0px 0px 0px #777, 0px 0px 1px #ddd; }


32 http://files.christophzillgens.com/webkit-font-smoothing.html
33 http://dribbble.com/shots/99803-text-shadow-hackery


Different rendering with text-shadow in Firefox.
Free download pdf