Very Cool Idea: Lettering.JS

Four obviously talented dudes with much more time on their hands than I can seem to muster have a very slick and ingenious means of performing “radical Web Typography.” For those who don’t already know, typography is one of the new “IT” things right now, particularly since the availability of importing TTF typefaces and now Google Font Directory (and other competing service providers).

In any event, the gist of it is that in order to style individual characters within a single word or phrase, designers were often stuck having to do something like this:

<h1>
  <span>S</span>
  <span>o</span>
  <span>m</span>
  <span>e</span>
  <span></span>
  <span>T</span>
  <span>i</span>
  <span>t</span>
  <span>l</span>
  <span>e</span>
</h1>

Which is a real pain – it’s a lot of code and a lot of thinking just to inject the style.  Plus it makes future change very tedious (for example, what if each letter was downsized 1px – what if you change the word or skip one class ordering?).

Lettering Dot JS is a jQuery plugin (fortunately I use jQuery more than most of the other frameworks at this point) which extends a single class across each individual letter, so instead of the code above, you would have:

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
  $(".fancy_title").lettering();
});
</script>
<h1>Cool Title</h1>

Which would result in (output):

<h1>
  <span>C</span>
  <span>o</span>
  <span>o</span>
  <span>l</span>
  <span></span>
  <span>T</span>
  <span>i</span>
  <span>t</span>
  <span>l</span>
  <span>e</span>
</h1>

There are also .word# and .line# classes for word and line wrapping, plus kerning improvements, and reportedly works well with WordPres.

Check out the release page on Dave Rupert’s blog and the Github distro page.

Great job!

PS: And I learned a new term – FOUT: Flash of Unstyled Text. We see it all the time with the new, well styled typography, guess I just never thought anyone would put a term to it.  Dave’s post has a good explanation but an even better best practices commentary.