But the devil lies in the details,and it turns out this CSS property can actually be quite useful when applied to the appropriate situation.
Take, for example, an older target audience. In such a situation, it is very important to have a legible, fairly large, and properly kerned font. Kerning, for the uninitiated, is the horizontal distance between letters.
A neat test to demonstrate the effect of text-rendering values is to overlay both the 'optimizeLegibility' version and the 'optimizeSpeed' version of the same text.
Here this is done by Trent Walton
While the kerning difference may seem subtle and unimportant, it can make a world of difference visually for your site, and help you attract your target audience.
The technical side of things:
|Valid Values||auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit|
|Basic support for Windows and Linux||4.0 but with multiple bugs||3.0 (1.9)||--||--||5.0 (532.5)|
|'auto' value||Chrome treats this as 'optimizeSpeed'||If the font size is below 20px Gecko engines render this as 'optimizeSpeed' and above 20px they use 'optimizeLegibility'||--||--||Treats this as 'optimizeSpeed'|
|'geometricPrecision' value||13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system. Introduced in WebKit 535.1||Gecko engines treat this as 'optimizeLegibility'||--||--||--|