Adjusting Kerning in CSS

Question

Is it possible with CSS to adjust kerning in CSS? I\'d like to be able to kern a block of text such that it will actually look like a block of text (both left and right edge

Answer 1

Check out my project Jerning.com [see below] for kerning text.

Usage is very simple and is based of pairs of characters, for example:

Hello World

The W and o will look weird without kerning.

Simply do:

$('h1').jerning("Wo", -0.1);

which will apply kerning between all upper case Ws and lower case os in h1 tags.

---

I retired the Jerning project but please find the minified source code below for inclusion in your project if you wish:

(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return''+a+""};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f,
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery);

Unfortunately I don't have the non-minified version any more; the above comes with no guarantees of all cases working!