Style individual letters with jQuery plugin – Lettering.js

With CSS3 advancements and font embedding techniques such as @font-face it’s getting easier to manipulate the styles of web typography. We can now add many great effects to our web typography including drop shadows, strokes, embossing, rotations and various other transformations. But what if we want to style individual letters or words? A simple jQuery plugin called Lettering.js let’s us do just this!

Lettering.js is a simple jQuery plugin created by the clever guys at Paravel. It basically allows you to separate text on your website into individual words or letters so that you can target and style them accordingly. This gives web designers much more flexibility in controlling and styling web typography.

How it works:

This simple little plugin uses jQuery to dynamically inject spans around your web typography to help you target and style it more effectively. Let’s say that you would like to make each letter in your website heading a different colour. Lettering.js basically splits up your heading into individual letters and wraps spans with unique class names around each letter. You can then quite easily target each letter and style the span with different colours accordingly. e.g.

<h1 class="heading">

  <span class="char1">T</span>
  <span class="char2">i</span>
  <span class="char3">t</span>
  <span class="char4">l</span>
  <span class="char5">e</span>

</h1>

Features and uses:

• Lettering.js offers complete down to the letter control.
• Great for styling headings and feature text.
• Text stays selectable.
• Style and control individual letters.
• Style and control individual words.
• Wrap lines of text and control styles of each line.
• No added mark-up required so mark-up stays clean.
• Use sparingly as wrapping all letters on your website is not a good idea!

Get Lettering.js

Download the Lettering.js plugin and don’t forget that you will also need jQuery too.

1. Equal height columns using jQuery
2. Reset your style sheet with a CSS Reset
3. How to create clickable links in sIFR3
4. IE6 PNG fix – Transparent PNG image support for IE6
5. How to create a favicon for your website

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!