Kerning for the Web

Kerning refers to the practice of adjusting the amount of space between individual characters. Using a modest amount of kerning can greatly improve the look and feel of your text, especially when working with headlines. Common letter pairs that are improved with kerning include AV, AW, AY as well as most pairings of L, T, V, W, and Y.

Kerning differs from tracking (or “letter-spacing”), in that kerning only adjusts the amount of space between pairs of characters, while tracking effects the spacing of all letters in a piece of text.

examples of kerned an non-kerned text

Automatic Kerning with CSS

Professional typefaces contain automatic kerning for a range of character pairs. The pairs defined in a typeface are up to the type designer. In digital design tools such as Photoshop or Illustrator, it is possible to turn these automatic kerning pairs on or off. Using the “text-rendering: optimizeLegibility” property, it is also possible to do this in CSS. ((Note: The current version of Firefox automatically applies Optimize Legibility to all HTML pages without the need for adding the declaration to your CSS))

For example, using:

h1 {text-rendering: optimizeLegibility;}

will automatically improve the kerning in our heading text.

Take a look at the demo to see optimizeLegibility in action.

Known Issues with optimizeLebigility

Sadly, if this simple CSS fix sounds too good to be true, that’s because it is. There are several known issues with this CSS property that cause it to fall under the “use with caution” category.

  • Type not displaying or rendering properly in various Windows Browsers when used with Typekit or @font-face (and, presumably, other web font services)
  • Causes text to disappear completely on WebOS devices
  • Will cause text set to “small caps” not to render in recent versions of Chromium
  • Can negatively impact page load speed on slower machines
  • Causes Safari 5 to crash when mixed with “ex” as a unit of measure

Kerning with Javascript

Lettering.js is a jQuery plugin created to give you to the letter control type on the web. It does its magic by placing a <span> tag around each letter, word, or line in a selected block of text. With the span tags in place, you are free to use CSS to adjust styles such as color, rotation, line-height, or (in our case) letter spacing. When combined with the Kern.js bookmarklet, we can easily and visually kern web text.

Start out by downloading the Lettering.js plugin at letteringjs.com and installing the Kern.js bookmarklet at kernjs.com.

Link to jQuery and lettering.js within the head of your HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/</script>  
<script src="jquery.lettering.js"></script>  

Within the head of your document, select the class or ID that you would like to apply lettering.js to. I this example, I’m going to kern a heading with an id of “kern.” ((If you’re not familiar with jQuery, you may want to take a quick look at Getting Started with jQuery ))

<script>  
$(document).ready(function() {
  $("#kern").lettering();
});
</script>  

View your page in the browser, click the Kern.js bookmarklet, and select the block of text you would like to kern.

Kern.js in action

Click on the individual character to kern (it should highlight itself) and use the arrow keys to adjust the letter spacing.

Selected character in Kern.js

When you are done, click the “finished editing” button and copy and paste the new styles into your CSS.

Kern.js CSS output

Take a look at the demo to see Lettering.js in action.

Recommended Reading