If you use Chrome or Safari on Windows XP, you may have noticed that some webfonts show up grey & washed out on your pages, as if the browser is using some very aggressive antialiasing algorithm that's rubbing out real strokes in the glyphs and not just the jaggies. And often when this happens, not all the vertical strokes are washed out in the same way, so the text looks uneven to boot. This is especially noticeable in the smaller fonts with normal or lighter weights, in the range of 300 or 400. It only happens with downloaded webfonts; the browser's built-in fonts all look nice & sharp.
The effect is almost exactly the same in Chrome and Safari. This makes sense since they both use the Webkit engine. But if you squint really, really hard (or use the eyedropper tool in your favorite graphics editor), you can see that the effect is actually slightly worse in Chrome than it is in Safari.
With Safari there is a way for the user to fix the problem in their browser: Go to Preferences, and choose the 'Appearance' icon. Notice the 'Font smoothing' listbox. If you choose any option other than 'Windows Standard', the fonts will render much crisper & darker. Unfortunately Chrome doesn't seem to have any way for the user to change the font smoothing, so Chrome users are stuck until they upgrade to Windows 7.
But for web developers, I have found a fix on the server side that works reasonably well so nobody
needs to see your site as washed out. It's not perfect, but it does make the fonts render darker
& crisper: -webkit-text-stroke. In Safari the best setting is -webkit-text-stroke: 1px transparent.
Using a transparent stroke with any nonzero width produces a consistent, good-looking font in Safari,
while not harming the look of the font if the user does have their Font smoothing set to a darker
value.
A transparent stroke doesn't have any effect in Chrome, so the best approach there is to use a non-transparent stroke with a small width, such as 0.2px or perhaps even 0.15px.
I use this nifty browser selector script,
which adds classes to the HTML element depending on which browser & OS it's running under, so I add
both flavors of -webkit-text-stroke to my CSS like this:
/* HACK: Chrome (& Safari if Font rendering=Windows Standard) on Win XP */ HTML.safari.win { -webkit-text-stroke: 1px transparent; } HTML.chrome.win { -webkit-text-stroke: 0.2px; }
Unfortunately this browser selector script doesn't break out Windows XP, so all Windows users are seeing this fix, even if they don't really need it. If you know of a better browser detector out there, please let us know in the comments.
Try it out in this browser
| No -webkit-text-stroke | -webkit-text-stroke: px | -webkit-text-stroke: px transparent |
|---|---|---|
There is grandeur in this view of life, with its several powers, having been originally breathed into a few forms or into one; and that, whilst this planet has gone cycling on according to the fixed law of gravity, from so simple a beginning endless forms most beautiful and most wonderful have been, and are being, evolved.
| There is grandeur in this view of life, with its several powers, having been originally breathed into a few forms or into one; and that, whilst this planet has gone cycling on according to the fixed law of gravity, from so simple a beginning endless forms most beautiful and most wonderful have been, and are being, evolved.
| There is grandeur in this view of life, with its several powers, having been originally breathed into a few forms or into one; and that, whilst this planet has gone cycling on according to the fixed law of gravity, from so simple a beginning endless forms most beautiful and most wonderful have been, and are being, evolved.
|
Webfonts with & without -webkit-text-stroke in Windows XP SP2
| No -webkit-text-stroke | -webkit-text-stroke: 0.2px | -webkit-text-stroke: 0.2px transparent |
|---|
Firefox 12
Chrome 19.0.1084.46
| Washed out | Looks good | Washed out - transparent stroke doesn't help |
Safari 5.1.4 - Font smoothing: Windows Standard
| Washed out | A bit too bold | Looks best |
Safari - Font smoothing: Light
| Looks best | A bit too bold | Looks best and is consistent with above |
Safari - Font smoothing: Strong
| A bit too bold | A bit too bold | Looks best and is consistent with above |
IE 7
IE 8
These tests were made using the Google font "Oxygen". For this site I ended up using 0.15px stroke width. At smaller values the thickness of the characters look more like what you see in Firefox or IE, but the vertical strokes are still noticeably inconsistent. At higher values all the vertical strokes look the same, but the text starts to look almost bold.
So, have you seen this problem in Webkit browsers in Windows XP, or elsewhere? Do some webfonts need different settings on your website? Please let us know in the comments.
