Chaining with lettering()

After using lettering you will quickly ask yourself, "Can I split up words, then split up letters?" The answer is "yes" using jQuery's default chaining behavior.

<h1>My Three Sons</h1>
<script>
  $("h1").lettering('words').children('span').lettering();
</script>

This will split up the h1 into 3 .word# ordinal spans, then split those child spans by letter:

<h1>
  <span class="word1">
    <span class="char1">M</span>
    <span class="char2">y</span>
  </span> 
  <span class="word2">
    <span class="char1">T</span>
    <span class="char2">h</span>
    <span class="char3">r</span>
    <span class="char4">e</span>
    <span class="char5">e</span>
  </span> 
  <span class="word3">
    <span class="char1">S</span>
    <span class="char2">o</span>
    <span class="char3">n</span>
    <span class="char4">s</span>
  </span>
</h1>

As seen in the above example, we've injected 14 new spans into the h1 "My Three Sons" for maximum per-word, per-letter control.

Now in your CSS file you can style with a syntax like:

.word1 .char1 { font-size: 1.5em; }
.word2 .char4 { font-size: 0.8em; }

The full monty: lines + words + letters

In the most extreme cases you could even split up a block of text with:

$("#myelement").lettering('lines').children('span').lettering('words').children('span').lettering();

It can be done, but will take some time to render since lettering() would have to run 3 separate times.