Lettering.JS Library Site

Lettering.JS

Lettering.JS.com is a jQuery plugin that gives you complete control of your typography. It was created around 2010 by Paravel. The plugin creates a span tag with a seperate class for each word and/or letter depending on how you choose to execute the plug-in. The creation of this plug-in has simplified as well as spead up the process of altering and formatting type for the web. In the past you would've had to tag each letter and/or word individually as well as assign an individual class to each one and now it’s done for you. This allows the developer/designer more time to do the enjoyable/tedious work of styling each word or character to perfection for that flawless piece typographical excellence.

At Lettering.JS.com you'll find several examples of what people have used this plugin to create. It is pretty interesting to see what has been created and the possibilities of what could be created, especially with new advancements in HTML5 and CSS3. Daverupert.com is also a good source of information on Lettering.JS.

The free plugin for Lettering.JS is available for download through GitHub. After you’ve downloaded Lettering.JS you need to download the minified version. Make sure you get v0.6.1.min.js, even though it says to use 0.6.min.js. After downloading I had some problems getting the files to link to each other. I found out that I had an error in the <link> tag. I’m not sure if it came like that or if I did it with out realizing it. I wanted to let you know in case you find yourself with a similar problem.

Share and Learn Through Examples

Lettering.JS is a great tool for adding a little flair and excitement through typography. The header on this page was created using the plug-in and along with some basic CSS-animation. I have provided a few examples of what others have created using the plug-in. If you have used Lettering.JS and would like to share your work with others complete the form below with a description of your work along with a review of your experience. Don’t forget to let me know who you are so I can give credit where credit is due.

Workspace uses Lettering.JS combined with a cool hover feature that realy gives the appearance that they letters are hanging on a hook. This work was created by Trent Walton.
Chocolate is for Girls is an article written by Jessica Hische at jasonsantamaria.com and it takes advantage of a basic color change of individual letters using Lettering.JS.
This is one of the more extravangant combinations of Lettering.JS and responsive design. The page folds and unfolds as you resize the window. It was created by Russ Maschmeyer from strangenative.com
This is another work by Trent Walton and another example of responsive design combined with Lettering.JS. With the large demand for responsive sites these days this could be useful info to get you headered in the right size.
This is a web poster for a Class Council Social Chair for Oliver Song at MIT. It shows a good use of Lettering.JS's abilities to seperate individual words as well as letters as well as the complete Typographical control you can achieve.
Great example of Lettering.JS combined with CSS-animation to create a movie like intro. This was done by Chris Coyier for an article about Animated Knockout Letters for CSS-Tricks.com

Lettering.JS

Share and Learn Through Examples

Contact and Share