Skip to content
optical kerning for the web
Latest commit 51258b8 Apr 23, 2013 @hudsonfoo Resolved object has no method 'toLowerCase' error (closes #8). Added …
…letter spacing check (closes #5) THANKS 3rd3!
Failed to load latest commit information.
demo Adding a demo Apr 23, 2013 Update master Jul 12, 2012
typebutter.georgia.js First commit Jul 12, 2012
typebutter.helvetica.js First commit Jul 13, 2012
typebutter.jquery.js Resolved object has no method 'toLowerCase' error (closes #8). Added … Apr 23, 2013
typebutter.jquery.min.js Resolved object has no method 'toLowerCase' error (closes #8). Added … Apr 24, 2013
typebutter.times.js First commit Jul 13, 2012


Optical kerning for the web

@_davidhudson | @richardson_joel


TypeButter allows you to set optical kerning for any font on your website. If you're longing for beautifully laid out text that today' 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' 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' 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.

Something went wrong with that request. Please try again.