Lettering.js – Complete Control on Web Typography

Lettering.js is a very simple, lightweight, easy-to-use jQuery plugin which gives you an ultimate control on your web typography. It was created by Dave Rupert and Trent Walton in late 2010. This superb script became very famous, well recognized by web design community and can be said that it brought the web typography a step forward.

It gives an option which CSS less gives. Yes, this wonderful script lets you to separate texts on your blog/website into individual words or letters, even allowing you to break lines up mid-sentence so that you can target them and style them separately. Look below for instructions on how to install this plugin and get to know how does it works really.

Individual Letter Control

Here is the sample basic markup code.

<h1 class="fancy_title">Bloggermint</h1>

And here are the js codes that need to be added before closing </head> in your theme.

<script src="files/jquery-1.4.2.min.js"></script>
<script src="files/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
  $(".fancy_title").lettering();
});
</script>

Shown here in the codebox below, is the way which the script separates/splits the characters in your text.

<h1 class="fancy_title">
  <span class="char1">B</span>
  <span class="char2">l</span>
  <span class="char3">o</span>
  <span class="char4">g</span>
  <span class="char5">g</span>
  <span class="char6">e</span>
  <span class="char7">r</span>
  <span class="char8">m</span>
  <span class="char9">i</span>
  <span class="char10">n</span>
  <span class="char11">t</span>
</h1>

So, you can customize the CSS of the text up to your creativity. For example, you can add different colors for each characters or capitalize the odd numbered characters or anything you wish! Look at the sample CSS below.

.fancy_title {
	font-family: Sans-serif;
	font-size:13px;
}
.fancy_title .char1 { 
	color: red;
}
.fancy_title .char2 {
	color: orange;
}
.fancy_title .char3 {
	color: yellow;
}

.   
.
.   /* A longggg...jump! Saving space! */
.
.

.fancy_title .char11 {
	color: cyan;
}

Individual Words Control

Now, here is an example showing the .lettering(‘words’) method which allows you to apply CSS by words.

<p class="word_split">We love Bloggermint!</p>

<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

This will generate:

<p class="word_split">
  <span class="word1">We</span>
  <span class="word2">love</span>
  <span class="word3">Bloggermint!</span>
</p>

Mid-sentence Line Breaks Control

Here is another application of this plugin where you can use it to break lines up mid-sentence, targetting each line and apply css effects accordingly. For that, you need to use <br/> tags to tell the script where should it breaks the sentence. lettering('lines') method will create breakpoints at <br/> tags.

<p class="line_split">We were<br/> born to<br/> rockkkk!</p>

<script>
$(document).ready(function() {
  $(".line_split").lettering('lines');
});
</script>

And this is resulting code.

<p class="line_split">
  <span class="line1">We were</span>
  <span class="line2">born to</span>
  <span class="line3">rockkkk!</span>
</p>

So, whatcha waiting for? Download the Lettering.js from Github and let your creativity run wild! For more informations, visit http://letteringjs.com.