Lettering.js a jQuery Plugin for radical Web Typography

Basically CSS is used to style the web page. Just imagine if you are given to style each letter of the page then what will be the case. But no problem at all here is the a nice jQuery plugin which given you control to style each letters.

Yes you have read it correctly to control over each letters of the webpage. Lettering js is the plugin which do this trick.

Note: You can control the letters in three different ways. Like character, words and lines.

From where to get Lettering JS?

You can download lettering Js from their site.

How to use Lettering JS?

You need to include the jQuery js prior to use this plugin. I am about to start the MooTools version of this plugin. After including the jQuery you have to include the lettering.js, see below:

<script type="text/javascript" src="path_to_jquery.js"></script>
<script type="text/javascript" src="path_to_lettering.js"></script>

Style by character:

For example we have a below H1 tag in out web page and you want to style each character with lettering js.

Original Markup:

Expert Developer

<h1 class="letter_h1">Expert Developer</h1>

JS Code:

$(document).ready(function() { $(".letter_h1").lettering(); });
$(document).ready(function() {
  $(".letter_h1").lettering();
});

Resulted HTML:

E x p e r t D e v e l o p e r

<h1 class="letter_h1">
  <span class="char1">E</span>
  <span class="char2">x</span>
  <span class="char3">p</span>
  <span class="char4">e</span>
  <span class="char5">r</span>
  <span class="char6">t</span>
  <span class="char7"></span>
  <span class="char8">D</span>
  <span class="char9">e</span>
  <span class="char10">v</span>
  <span class="char11">e</span>
  <span class="char12">l</span>
  <span class="char13">o</span>
  <span class="char14">p</span>
  <span class="char15">e</span>
  <span class="char16">r</span>
</h1>

Style by Words:

Original Markup:

Expert Developer

<h1 class="word_h1">Expert Developer</h1>

JS Code:

$(document).ready(function() { $(".word_h1").lettering('words'); });
$(document).ready(function() {
  $(".word_h1").lettering('words');
});

Resulted HTML:

Expert Developer

<h1 class="word_h1">
  <span class="word1">Expert</span>
  <span class="word2">Developer</span>
</h1>

Style by Lines:

This plugin will consider <br /> as a line break indicator.

Original Markup:

This is
good Site.

<h1 class="line_h1">This is <br/> good Site.</h1>

JS Code:

$(document).ready(function() { $(".line_h1").lettering('lines'); });
$(document).ready(function() {
  $(".line_h1").lettering('lines');
});

Resulted HTML:

This is good Site.

<h1 class="line_h1">
  <span class="line1">This is </span>
  <span class="line2">good Site.</span>
</h1>

Share This Article