CHAPTER 9 The Next Steps for Web Typography
in Firefox. The auto value in Firefox is treated as optimizeLegibility (which
enables kerning and common ligatures, but slows down the page load and
scrolling), while in Chrome and Safari the auto value is treated as
optimizeSpeed (which disables kerning and common ligatures in favor of
better performance).
This property has been reported to cause a number of issues, though.
text-rendering can dramatically slow down page loads if applied to longer
texts. Throw in a font-variant: small-caps; and some custom let-
ter-spacing and it occasionally produces unpredictable results. My rule of
thumb has been to apply text-rendering to headlines and subheads only,
or simply filter out the less capable devices via media queries. An orthodox
standardista in me has another minor issue — this property is actually not
part of the CSS standard, but rather the SVG standard. Interrobang!
The same effect can be achieved using the more suitable and fu-
ture-friendly properties font-kerning and font-feature-settings:body {
-webkit-font-kerning: normal;
-moz-font-kerning: normal;font-kerning: normal;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga", "kern";
font-feature-settings: "liga", "kern";
/* IE 10 supports the standard property name */
}browser-specific legibility improvements
For the unsung heroes among us who feel comfortable with managing dif-
ferent CSS rules for different browsers, there are a few tricks we can apply
to improve the appearance of fonts.
The easiest way to tweak rendering in Safari and Chrome in Mac OS X
is with the -webkit-font-smoothing property and its values of none, sub-
pixel-antialiased (the default), and antialiased. The antialiased value
results in thinner glyphs, but with less than optimal rendering of diagonal
lines, so it’s best avoided with italics: