OghmaOsiris asked how would one decide on what is the proper kerning, “Kerning: My Xylophone is off key” and since I have started the transition of designing in the browser I was curious to know how would someone adjust the kerning?
Of these, the best I’ve seen is the memorably-named kerning.js, which lets you target characters by pairs (e.g.
ss pairs), number (e.g. the 6th character in a heading) and patterns like every nth letter. It even has conditions on fallbacks so if you were really keen, you could have kerning rules for your primary font and seperate rules for your backup font. You put these rules right in your CSS file, and it finds and applies them.
As well as setting kerning by number of pixels it can also apply colours, rotations, baseline shifts, etc etc. Pretty nifty.
(Note that it includes lettering.js and requires jQuery)
Another option is older kern.js and lettering.js: lettering.js simply turns every character into a numbered
<span> which you can then target with CSS rules, and kern.js is a site/bookmarklet with a nifty interface for playing around, generating copy & paste rules for you.
This makes it startlingly easy to create some serious keming monstrosities:
…but while it’s kinda fun, the fact it’s all about number of characters means it’s a bit limited in real life applicability. Fine for creativity with things like CSS posters, but if your goal is to make, say, all your sites’ headings as neatly kerned as possible, you’ll probably want something that works by patterns so you don’t need to re-do everything with every copy change.