text-rendering:optimizeLegibility;

Safari has historically had lousy kerning on its text rendering. This was particularly notable for headlines.

A while back, a fix was implemented. It wasn’t turned on browser-wide because of the performance implications, but it can be turned on by a web developer by setting the appropriate style.

The attribute to set is text-rendering and the value to set it to to enhance kerning and enable ligatures is optimizeLegibility.

The examples below show two pairs of headlines. The first in each pair has this style attribute set, and the second does not (technically, the second is set to optimizeSpeed). If you have Heveltica and Zapfino installed on an OS X device, you should see nicely rendered text below:

Text

Text

baffle

baffle

Post a Comment

*Required
*Required (Never published)