Lettering.js – A Jquery Plugin for Web Typography

Is it Time to forget simple or advanced text animations? Just Imagine, How superb it will be if you are able to animate every single character of your website individually in your own fashion. Yeah..! It is possible with Lettering.js – A simple jQuery Plugin. Lettering.js gives you complete control over your website typography in a very fashionable way. Previously, we have already written great tutorials on other javascript libraries like typed.js, animate.css, bounce.js, textillate.js to style your web pages and interact with them amazing.

Web Typography seems to be everything for a website to look decent. So looking at this uprising demand a very lightweight, easy to use jQuery plugin for radical web typography came to existence.

Lettering.js is an Open source, Free to use jquery plugin that is also known as “lettering-jay-ess“. So, let’s not waste any time further and Get’s started with using the Lettering.js on websites.

Lettering.js jquery plugin

How to Use Lettering.js?

Step 1: Download the source file of lettering.js from Github

Step 2: Include the downloaded file and also the Jquery file or Jquery CDN in the <head> section of your website.

After including the script files, now it’s time to start with some basic markup, here’s how:

Now the Javascript Code:

This will give a default effect to your custom class element as seen below:

The Resulted HTML for your custom class element.

If you want to style words of your website.

The Javascript code:

The Resulted HTML for your custom class element.

Recommended Readings:

Animate.CSS – How to Add CSS3 Animations with CSS3 Library Perfectly

How to Create QR Code Generator Using jQuery Library

If you want to style lines of characters

The Javascript code:

The Resulted HTML for your custom class element.

Now this was simple, let’s try something a bit more interesting and exciting:

Now if you want to split words as well as letters in the words:

Here’s how:

The Javascript Code:

The Resulted HTML for your custom class element.

Now, this was something cool which I think you must also try.

Basically, we learned that using Lettering.js you can easily style each and every single character as per your choice.

Just choose the character with the exact class and you can style with CSS, animate with animations and much more.

Let’s see this:

For instance, let’s say we want to color zz in Tuluzz, let’s do this:

choosing the class:

Before applying CSS:

After applying CSS in lettering.js

tuluzz lettering js after

This is how we can animate and style each and every character of our website.

(Visited 522 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply