: When designing in the browser how would someone use kerning? OghmaOsiris asked how would one decide on what is the proper kerning, "Kerning: My Xylophone is off key" and since I have started

@Kaufman565

If you want to do serious kerning, there are a few Javascript libraries out there that let you write up kerning rules using something a little like CSS.

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.

Vote Up Vote Down

@Merenda852

Apply letter-spacing over spans you set in the HTML. Unfortunately, there's no nth-character rule in CSS yet. It will be a humongous task to have your kerning correction degrade gracefully, especially when your font stack is large.

Vote Up Vote Down