CSS 3 adds some awesome new tools to web designers' toolkit – the ability to rotate, transform and tweak elements means complex layouts can be done with nothing more than some style sheet rules.
Combine that with some of the fancy new fonts available through web services like Typekit and Fonts.com and you're well on your way to replicating the kind of fine-tuned typography control print designers have long enjoyed. However, targeting individual letters and words can still be tricky.
That's where Lettering.js comes in. The JQuery plugin can wrap your text with span tags, allowing you to target CSS rules to individual letters, words or sentences.
If you wondered how the designers behind the Lost World's Fairs CSS experiment did it, well, look no further than Lettering.js. The other showcase examples on the Lettering.js website are no less impressive.
The library, which requires JQuery, can be downloaded from Github. Using it is as simple as selecting the element you want to target and applying the appropriate function – basically, whether to wrap the letters, words or lines of your target element.
One thing to note, the developers recommend putting Lettering.js in your head tags to avoid the unsightly flash of unstyled content that can occur if you include it at the bottom of your page.
See Also:
