Powerful Web Typography Plugin For jQuery - Lettering.js

Lettering.js is a powerful jQuery web type plugin for kerning type, editorial design and complete down-to-the-letter control.

With this plugin, you can tweak your kerning or create some cool effects by adding various CSS styles to each individual letter, words or line.

The vanilla JavaScript version is now available here.

How to use it:

1. Include jQuery Library and the LETTERING.JS plugin on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.lettering.js"></script>

2. Attach the plugin to your text.

<div id="demo" class="demo">
  <h1>jQueryScript</h1>
  <h1>.net</h1>
</div>

$(function(){
  $("#demo h1").lettering();
});

3. And the plugin breaks down your text into characters as follows:

<h1>
  <span class="char1">j</span>
  <span class="char2">Q</span>
  <span class="char3">u</span>
  <span class="char4">e</span>
  <span class="char5">r</span>
  <span class="char6">y</span>
  <span class="char7">S</span>
  <span class="char8">c</span>
  <span class="char9">r</span>
  <span class="char10">i</span>
  ...
</h1>

4. Split your text into words instead:

<h1>jQuery Script</h1>

$(function(){
  $("h1").lettering('words');
});

<!-- Output -->
<h1>
  <span class="word1">jQuery</span>
  <span class="word2">Script</span>
</h1>

5. Split your text into lines instead:

<h1>jQuery<br>Script</h1>

$(function(){
  $("h1").lettering('lines');
});

<!-- Output -->
<h1>
  <span class="line1">jQuery</span>
  <span class="line2">Script</span>
</h1>

---

This awesome jQuery plugin is developed by davatron5000. For more Advanced Usages, please check the demo page or visit the official website.