Powerful Web Typography Plugin For jQuery – lettering.js

A jQuery plugin designed to facilitate “radical web typography,” Lettering.js allows designers the ability to set dynamic and eye-catching typography that would be either prohibitively difficult or impossible to do using other methods. The goal of Lettering.js is to give you complete control over a web page’s type, right down to the manipulation of individual letters.

Live Demo

Rainbow

Hi, Multi Color

This is an amazing
Revolution in Typography.
The possibilities are endless:
Coloring, Vertical spacing, and Kerning.

Double Rainbow

WOOOoo!

How to Use

Add the css below to your html page

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</link>
<style type="text/css" media="screen">
    .demo {
        padding: 50px;
        border: 1px solid #ccc;
        font-weight: bold;
        color: red;
        background: #d0d0d0;
        font-size: 20px;
        line-height: 1.5;
        text-align: center;
    }

    .demo h1 {
        font-size: 72px;
        text-transform: uppercase;
        margin-bottom: 0px;
    }

    .char2,
    #demo2 .word2,
    .line2 {
        color: orange;
    }

    .char3,
    .word3,
    .line3 {
        color: yellow;
    }

    .char4,
    .line4 {
        color: blue;
    }

    .char5 {
        color: green;
    }

    .char6 {
        color: indigo;
    }

    .char7 {
        color: violet;
    }
</style>

Create a container where you want to render Typography

<h4 class="widget-title page-header">1. Letters</h4>
<div id="demo1" class="demo">
    <h1>Rainbow</h1>
</div>

<h4 class="widget-title page-header">2. Words</h4>
<div id="demo2" class="demo">
    <h1>Hi, Multi Color</h1>
</div>

<h4 class="widget-title page-header">3. Lines</h4>
<div id="demo3" class="demo">
    <p>This is an amazing<br /> Revolution in Typography. <br /> The possibilities are endless: <br /> Coloring,
        Vertical spacing, and Kerning.</p>
</div>

<h4 class="widget-title page-header">4. Advanced #1: Chaining 2 Methods</h4>
<div id="demo4" class="demo">
    <h1>Double Rainbow</h1>
</div>
</div>

<h4 class="widget-title page-header">5. Advanced #2: Chaining and Styling</h4>
<div id="demo5" class="demo">
    <h1>WOOOoo!</h1>
</div>

Load jQuery library together with the Powerful Web Typography library into your code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../jquery.lettering.js"></script>
<script>
    $(document).ready(function () {
        $("#demo1 h1").lettering();
        $("#demo2 h1").lettering('words');
        $("#demo3 p").lettering('lines');
        $("#demo4 h1").lettering('words').children("span").lettering();
        $("#demo5 h1").lettering().children("span").css({
            'display': 'inline-block',
            '-webkit-transform': 'rotate(-25deg)'
        });
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.