Paravel developed a lightweight, easy to use Javascript span injector for radical Web Typography. They are calling it “lettering-jay-ess”, and has been released for free over on Github.
We’ll start with some really basic markup:
<h1 class="fancy_title">Some Title</h1>
After including jQuery 1.6.2+, download and include the minified version of Lettering.js, then a script block with the magical .lettering() method:
<script>
$(document).ready(function() {
$(".fancy_title").lettering();
});
</script>
The resulting code will churn your .fancy_title and output the following:
<h1 class="fancy_title"> <span class="char1">S</span> <span class="char2">o</span> <span class="char3">m</span> <span class="char4">e</span> <span class="char5"></span> <span class="char6">T</span> <span class="char7">i</span> <span class="char8">t</span> <span class="char9">l</span> <span class="char10">e</span> </h1>
Magical. Now the text is easy to manipulate in your CSS using an ordinal .char# pattern. This plugin assumes basic counting skills, but it’s a pretty fast and easy way to get control over every letter.
There you have it, but Lettering.js does even more! If you want more information on how you can get radical with text, please read the Lettering.js Wiki
Best Practices
Be smart and use sparingly. You’ll probably break your browser if you try to wrap every letter on your page in a span tag, so don’t do that. Look to use this in your Headings, Blockquotes, Asides, etc.
Kern Well
If you’re going through the trouble to load a fancy font and that word or phrase is the largest on the site, then it’s important for it to be kerned well. With Lettering.js, kerning is a breeze. You can simply use $(“#id-of-what-i-want-to-kern”).lettering(); and then on each .char#, you can set relative position or left/right margin. Works like a charm.
