This one simple line of CSS can dramatically improve the handling of kerning pairs and ligatures in modern browsers.
text-rendering: optimizeLegibility;
Currently supported in Safari, Webkit & Firefox. Subtle but massively benefical, something I’ve been wanting for a long long time.
More info & examples of Cross-browser kerning-pairs & ligatures →
Ed Henderson 29 June 2010, 03:36
#1
Nice nugget Sam, thanks. You are already #2 on Google for optimizeLegibility. Will give this a little test on my current project.
Gonzalo González Mora 29 June 2010, 06:33
#2
I’ve noticed this change (in headers mostly) a few days ago on Firefox 3.6, but now I view that test page and it doesn’t seem to be working. I ran a test on BrowserLab and it looks that it’s working on OSX but not on Windows. Do you have any idea if it’s been disabled in the latest builds? I’m using Windows 7 ×64 btw.
Dan Bookman 29 June 2010, 09:19
#3
Oh my god! It’s like magic! Wait, why would you ever turn this off? …It’s like Photoshop’s “maximize compatibility” button.
Thanks for sharing!
kevadamson 29 June 2010, 11:26
#4
Worth noting that I think this is currently “Apple-only”. Tested on all the browsers listed above on my Windows machine and no joy. Had a ganders on my MacBook. Looks sweet.
Jal 10 July 2010, 19:48
#5
Seeing no apparent differences on Windows 7 ×64. But I’m sure there’s something awesome.
Hi, I'm a UI designer developer based in Edinburgh Scotland working as lead web designer at foursquare in NY.
• Dribbble • Endorse • Facebook • Flickr • foursquare • Twitter