Smoothing text in Safari
23 July, 2010 | Filed under “CSS”
At the peril of falling into the get-a-life category I climb out on a trembling branch of the Web tree to investigate a phenomenon which has annoyed me for years: The, for the lack of a better word, fattening of lightly coloured normal text on dark backgrounds. The 2nd and 4th rows in Figure 1 illustrate the abomination and has everything to do with how the user agent applies sub-pixel rendering.
Fig. 1. Rendering of text in Safari.
Whenever text with a light shade of colour sits on a darker background it stands in danger of being rendered approaching bold font characteristics. How light and how dark and limits of what it takes for the algorithm to kick in, lie buried in programming code and is not something we can be bothered with in our daily struggles. This is not restricted to Safari; Firefox and Opera both cry “Me, too.”
Fig. 2. Rendering of text in Firefox.
Fig. 3. Rendering of text in Opera.
So, what is going on in the four bottom rows of Figure 1? The problem seems to be solved, you may say. And right you are. At least as far as Safari is concerned. Take the ability to stroke text, for instance. It has been available in Safari via WebKit since late 2006. Yes, in web development the race is on in some quarters – while real world implementation slows to the speed of plate tectonics. Not that I will use regular stroking on text to any extent as the effect reminds me only too well of what could be accomplished with early versions of QuarkXPress.
Fig. 4. Stroking text in Safari.
The traditional computer screen thus suffers from too low a resolution as compared to the printed page (and what can be had with InDesign these days). That said, we can make good use of a none too obvious side effect of text stroking to slim down our prose. To burn some fat. To remove XXL from the shelves. All it takes is one CSS rule:
.deFat { -webkit-text-stroke: 1px transparent; }
Magic! And, like I mentioned, far from intuitive. It just works. As it has been working in Safari since version 3. Which explains rows 5 and 6 in Figure 1.
I will not recommend body tags populated with this rule for global antialiasing. Partly because I have not tried it. Partly because I suspect that it mooches off a user agents’s potentially limited resources.
Fast forward to 2010 and Safari 5. And WebKit – the Merlin of our age. In what can not be anything but an intuitivination (never mind “The Oxford Dictionay”) of the old rule from four years back, the open source evangelists have built a new rule on the foundation of what was already working (see Figure 5). As of today, we can write:
.deFat { -webkit-font-smoothing: antialiased; }
and be well rewarded. As I was with rows 7 and 8 in Figure 1.
Fig. 5. Details of text stroking (upper) and font smoothing.
Conclusion: If you want to bleed on the edge, use font-smoothing. If you need to drag versions 3 and 4 along on your safari, use text-stroke. The rest of the world is none the wiser.
