Beautify Your Text with CSS Rules - Kerning.js

Kerning.js is a small and smart Javascript Library that makes it easy to beautify your text with some CSS Rules.

How to use it:

1. The CSS

p {
visibility: hidden;
-word-transform: -transform-group(rotate(10deg)) -transform-group(rotate(-10deg));
font-size: 5em;
color: #bd4932;
text-shadow: 0 3px 5px rgba(189, 75, 50, 0.5);
margin: 200px 0 0;
}
h1 {
visibility: hidden;         
/* You can skip -transform-groups if you don't use spaces in the transforms,
           and limit each letter to a single transform. */
 -letter-transform: -letter-repeats(even: rotate(5deg), odd: rotate(-5deg));
 -letter-color: if-font('Helvetica Neue': -letter-repeats(even: #db9e36, odd: #bd4932));
 -letter-kern: -letter-pairs('Ke': 2px, 'g.': 1px, '.j': -13px);
/* Try removing "Helvetica Neue" from the body selector above and see what happens. */
font-size: 9em;
font-size: if-font('Helvetica Neue': 10em);
font-weight: 700;
font-weight: if-font('Helvetica Neue': 400);
text-shadow: 0 3px 5px rgba(189, 75, 50, 0.5);
}

2. Markup

<p>This is</p>
<h1>Kerning.js</h1>

3. Include jQuery Library and Kerning.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script src="kerning.js"></script>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.