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.

WebResourcesDepot Feed