I came across a interesting issue regarding web font rendering whilst updating my website. The WordPress theme I’d chosen ( www.eleganthemes.com ) had lots of white space, and a fairly uncluttered, open feel, but with a relatively large, readable font. Yet the font seemed strangely ‘grey’ and washed-out, like this:

antialiased type

antialiased type

It was then that I noticed a line in style.css that read:

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

…and I recalled having read about this some time ago: web designers trying to override a supposed issue with web font rendering in modern browsers. So after a quick Google, I found this article which explains the issue well:

Please Stop “Fixing” Font Smoothing

Changing style.css to the following:

html { -webkit-font-smoothing: subpixel-antialiased; }

…gave this result:

subpixel-antialisaed type

subpixel-antialisaed type

Certainly ‘bolder’ and less washed-out than antialiased.

Comparing the two next to each other it’s a subtle difference, but the overall effect on readability and clarity of using subpixel rendering is definitely favourable, so that’s what I’ve gone with on this site. As the article says, please stop fixing font smoothing.

ScreenGrab-2013-3-7-2204955-8171ScreenGrab-2013-3-7-2205018-772

Pin It on Pinterest

Share This