Lettering.js: Radical web typography with jQuery

Even with the improvements @font-face brings to typography, web designers still don’t have quite the control as their print counterparts. Basic tasks like per-letter or per-word styling involves a lot of <span>’s and stupid markup tricks.

Dave Rupert aims to help with Lettering.js, a jQuery plugin for “radical web typography.”

How it works

In this example, Lettering.js takes over the tedious task of creating all of those per-letter <span>’s:

$(document).ready(function() {
  $(".fancy_title").lettering();
});

… which yields

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

You’re now free to style each individual letter with the resulting CSS classes.

Don’t need that fine-grained control? Lettering.js can handle per-word options as well:

$(document).ready(function() {
  $(".word_split").lettering('words');
});

[Source on GitHub] [Blog post]