Charming Lettering With jQuery – Lettering.js

CSS3 boosted the use of custom fonts and styles in websites. However, it still doesn't offer a complete down-to-the-letter control.

Lettering.js, a lightweight and easy to use Javascript <span> injector for radical web typography aims to fill this gap.


It simply divides any given element into pieces of <span>s wrapping each letter with a custom class.

Just like <h1 class="fancy_title">WRD</h1> into:

<h1 class="fancy_title">
  <span class="char1">W</span>
  <span class="char2">R</span>
  <span class="char3">D</span>

After that, we just need to create the styles for each letter on the CSS side to create dynamic awesome outputs.

P.S. Lettering.js can also split words besides the letters.