Christoph ZillgensBack to Home

I‘m an Interface Designer and Web Developer from Germany. Here are some example of my work at my one-man company

-webkit-font-smoothing reloaded

Some time ago Tim van Damme blogged about -webkit-font-smoothing and suggested to use -webkit-font-smoothing: antialiased to improve font rendering in Safari on Mac. At this time Safari 4 was around and it seems like the new Safari 5 has improved on standard font rendering.

To look closer at this (or to look into a louse’s butt, as we say in Germany ;-), I compared Tim’s Safari 4 screenshots he used in his afore mentioned article with a new Safari 5 screenshot from the Mac:

(1) shows the old standard rendering in Safari 4, (2) shows the new standard rendering in Safari 5 and (3) shows the antialiased rendering (that didn’t change from Safari 4 to 5).

I created a test page where you can compare this. I think that now the standard subpixel-antialiased method has some advantages over the antialiased method when it comes to diagonal lines, especially in italic texts or characters like the uppercase M.

So do we still need to change the font-smoothing method to make text look good?

Yes, there is a case where -webkit-font-smoothing:antialiased makes sense, when it comes to light text on dark background.

If you have italic text on dark background, it depends which version is better. Some fonts will render to thin and get unreadable when antialiased is applied. Again, see the test page for this.

5 comments

  1. Amrinder wrote 1360 days ago · #

    Nice experiment, Chris. I applied -webkit-font-smoothing in two of my recent projects having dark and light background colors, one of them is Relpost and mind you I’ve to pull back. Though text was OK on Mac but on Windows it was too thin to be fully visible.

    P.S. That designer with good designing sense is called Tim Van Damme instead of ‘Von’

  2. Christoph Zillgens wrote 1360 days ago · #

    @ Amrinder Thanks for the hint, corrected ;)

    »-webkit-font-smoothing« only works in OS X, as Windows has a different font rendering method. I changed the post and the test page to make that clear.

  3. Tim Van Damme wrote 1359 days ago · #

    I love that you called me “Tim Von Damme”, makes me sound like some evil wizard :)

    I’ve updated my article with a link to your article.

  4. kosmar wrote 1141 days ago · #

    all this works/has an effect in chrome as well now. at least on mac. not sure about windows, though?

  5. Bruce Lueckenhoff wrote 960 days ago · #

    This is visible, but only using Safari and only if configured for non- Windows Standard font smoothing.

    example

Commenting is closed for this article.