For those of you that may not be clear on what kerning is, it deals with the spacing between certain pairs of letters letters such as W and A.
Kerning can be built into a font by the font designer or it can be added by the person setting the type. It can increase legibility and is very useful when using large type in a design. Kerning only deals with pairs of letters and is different than letter-spacing/tracking because they deal with the spacing between all letters.
How to Enable Kerning For An Entire Font Family
As I mentioned, kerning can be built into a font by the font designer. We as web designers and developers just have to let browsers know that we want to use it. This can now be done with CSS although there are some tricks to it. Browser support is currently a little finicky at the moment and will require two properties and vendor prefixes to get the best support.
text-rendering property was included with the SVG specification and is supported by Chrome, Safari, and Firefox.
text-rendering property has other values that can be passed to it that do other things. Here’s all of them and what they do:
optimizeSpeed— Applies focus to speed over the other text-rendering properties when rendering text and disables kerning and ligatures.
optimizeLegibility— Applies focus to legibility over the other text-rendering properties when rendering text and enables kerning and ligatures.
geometricPrecision— Applies focus to geometric precision over the other text-rendering properties when rendering text. Allows the aspects of certain fonts that don’t scale well to look better.
auto— Allows the browser to determine how all of the text-rendering properties are applied when rendering text.
font-feature-settings property is a new and experimental CSS property and is in the working draft phase. This property is used to enable/disable certain OpenType features for fonts that have them. Kerning is one of the font features that can be enabled/disabled with the
font-feature-settings property. Due to its new-ness it requires vendor specific prefixes and syntax.
How to Fine Tune Kerning For Specific Font Pairs
This is a bookmarklet that lets you click on individual characters on your own website and then drag until you are happy with the way it looks. Once you are done you can simply click on an icon and then copy the CSS. It requires you to add a span for each character that you want to adjust the kerning on and it generates the CSS via negative and positive margins that will be applied to the characters.
This CSS text-rendering and font-feature-settings combination has pretty good browser support working in all modern browsers. It is, however, not supported at all in Chrome on Windows at the moment but likely will be in the near future. Not supported in ie9 and below.