SPREAD IT OVER YOUR TYPE
We engineered this special artificial butter with a high smoke point for all your typographic kerning needs.

About

TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you! Also, don’t forget to check out delicious curved text using jQuery Bacon.

Why does TypeButter create its own kern element?
Because if it used a standard element like a span, your site’s CSS might adversely effect TypeButter. Remember: There is no “rule” against creating your own element. Really old browsers that don’t understand the new element will just ignore it.

Does TypeButter work with screen readers?
It works with some screen readers but not all. I’m working on this and it’s really close to being functional. Stay tuned!

Will TypeButter slow my site down?
That depends. If you have 200,000 words on your page and TypeButter is manipulating every letter… uhh yeah. If you have a normal site or blog, you should barely notice the difference.

Hasn’t this already been done with optimizeLegibility?
Nope. The optimizeLegibility declaration has limited support even among modern browsers. It also has plenty of other problems.

Download

We’re on GitHub. Hey, you should totally fork TypeButter!

BEFORE

LINFAMOUS ON GAMEDAY
The New York Knicks Are Famous
Unless you have been living in a hole, then you know the New York Knicks are back in the game due in no small part to having Jeremy Lin and Carmelo Anthony on the same roster.
Lin seldom played in his rookie season and was assigned to the NBA Development League (D-League) three times. He was waived by Golden State and the Houston Rockets the following preseason before joining the Knicks early in the 2011–12 season. He was again assigned to the D-League and continued to play sparingly. In February 2012, he unexpectedly led a winning streak by New York while being promoted to the starting lineup, which generated a global following known as Linsanity. Lin is one of the few Asian Americans in NBA history, and the first American player in the league to be of Chinese or Taiwanese descent.

AFTER

LINFAMOUS ON GAMEDAY
The New York Knicks Are Famous
Unless you have been living in a hole, then you know the New York Knicks are back in the game due in no small part to having Jeremy Lin and Carmelo Anthony on the same roster.
Lin seldom played in his rookie season and was assigned to the NBA Development League (D-League) three times. He was waived by Golden State and the Houston Rockets the following preseason before joining the Knicks early in the 2011–12 season. He was again assigned to the D-League and continued to play sparingly. In February 2012, he unexpectedly led a winning streak by New York while being promoted to the starting lineup, which generated a global following known as Linsanity. Lin is one of the few Asian Americans in NBA history, and the first American player in the league to be of Chinese or Taiwanese descent

How it works

  1. Download pluginand include the TypeButter core in your site head.
    <script type='text/javascript' src='/path/to/typebutter.jquery.min.js'></script>
  2. Now that the core is setup, include the TypeButter fonts you wish to use. TypeButter comes packaged with Arial, Georgia, Helvetica, Times and Verdana. If you need another font, you can just roll your own.
    <script type='text/javascript' src='/path/to/typebutter.fontname.jquery.js'></script>
  3. Create a jQuery selector to run TypeButter on (required) and set your default spacing (optional)
    jQuery('body').typeButter({
         'default-spacing' : '0em'
    });
  4. TypeButter will try and detect the font your browser is using on any given element. If the font being used is in the TypeButter library (including it’s weight and style), optical kerning will be set. That’s all there is to it.