2

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?

3

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)

enter image description here

enter image description here


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:

enter image description here

...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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.