25th July, 2013

I enjoy developing for the web, and bringing designs to life, but my least favourite part of the process is typography.

Almost every designer I've met are horrified when I can't tell that their carefully chosen web font isn't loading properly and the first fallback is showing instead.

After a print masterclass with David Shaw at Rrex, I got the typographical bug and created a jQuery plugin for controlling DOM element kerning.

Meet Kernr - my open source font kerning solution for the web - hosted on GitHub under the MIT license.

Kernr is a fully chainable plugin that can be instantiated on any element that contains text. E.g. paragraphs, spans, but probably most usefully, on headings such as h1, h2, h3 etc...


Include the jquery.kernr.min.js file after the jquery library in your project.

<script src="/path/to/js/jquery.kernr.min.js"></script>

Apply kerning to an element on your page:


Use the data attribute "data-kernr" to add your spacing rules:

<h1 data-kernr='{"He":"-1px", "Wo":"-3px"}'>
  Hello World!

The data-kernr attribute should be an object as shown in the example above. Each pair of case-sensitive characters are searched for within the element used and, if matched, applies the spacing assigned to it between the two characters.

Spacings can be any positive or negative valid CSS length unit such as px, em, rem, etc.


This project as it's by no means a complete solution to kerning and I'd encourage you to fork and contribute if you fix a bug or create a new feature. Submit a pull request and I'll review it as soon as possible for inclusion.