text-rendering: optimizeLegibility

Earlier in the week Twitter was awash with a new CSS technique for text-rendering called optimizeLegibility. The premise behind this new technique is that browsers, which are notorious for rendering fonts terribly, improve the handling of kerning pairs and ligatures in modern browsers; Safari 5, Webkit Nightlies & Chrome.

After reading a lot of the big industry players talking about it I decided to implement it on my own website. Everything seemed to be running fine until I noticed the font rendering on Google Chrome for PC.

As you can see from the image above, the fonts seem to have a horrible text shadow applied to them and the li elements on my left sidebar were getting pushed onto two lines.

I’m not really sure what is to blame here as the font displayed perfectly across multiple other browsers on both Mac and PC. Is this a specific browser error for Chrome PC, even thought it says it should work or is this down to a conflict with the fonts on my website which are served up with Typekit?

I’ve commented out this technique until I can find out what is causing the error. If you have encountered anything similar then please feel free to get in touch.

July 2nd, 2010