4 jQuery Plugins for Superior Typography

by in CSS on 5th Apr 2013 · 0 Comment

Typography is such an important element of beautiful design, yet when it comes to the web it is often overlooked. Even if you pay meticulous attention to typography in your designs, barebones HTML and CSS often doesn’t give you the fine grain control you need to accomplish your vision.

4 jQuery Plugins For Superior Typography

jQuery Plugins for Superior Typography

Try using some of the following jQuery plugins if you’re looking for better control over the typography in your designs:

Lettering.js

Lettering.js is used to quickly give you fine grain control down to each letter of a headline by automatically adding span classes to each character. While the possibilities are only limited by your own creativity, here are some advantages of being able to quickly target individual letters:

  • Manipulate and control kerning of each individual letter
  • Colorize individual letters of headlines
  • Jumble rotation of individual letters to create a playful effect

Code example:
Here’s a quick example of how you can use the Lettering.js plugin to add some personality to your headings:

Use the lettering function to target the heading:

<script>
$(document).ready(function() {
$(".custom_title").lettering();
});
</script>

Then simply add use the custom_title class for the headlines you want to target:

<h1 class= "custom_title ">Headline</h1>

The lettering function will automatically add a span to each letter of the custom_title headline, like this:

<h1 class="custom_title">
<span class="char1">H</span>
<span class="char2">e</span>
<span class="char3">a</span>
<span class="char4">d</span>
<span class="char5">l</span>
<span class="char6">i</span>
<span class="char7">n</span>
<span class="char8">e</span>
</h1>

Now simply use standard CSS in order to target the individual spans within the headline:

h1.custom_title char 1 {
    /* change the first letter here */
}

Lettering.js

Required library: jQuery
Demo | Download

FitText

When you’re doing graphic design in Photoshop, making a line of text scale to fit the width of the parent element is a piece of cake. If you want to accomplish the same thing with your web typography, you need FitText.

FitText really shines if you’re building responsive websites – if you want a responsive text based logo for example, you can use FitText to create a text based logo that will scale to any screen.

Code example:
FitText is extremely easy to implement:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

In your style.css, make sure to give your headline a specified width:

#responsive_headline {
	display: block;
	width: 100%
}

Simply use the specified css element to implement fitText

<h1 id= "responsive_headline">Headline</h1>

FitText

Required library: jQuery
Demo | Download

ArcText

ArcText is a jQuery plugin which lets you wrap your words around a curved path. It uses Lettering.js to automatically calculate the rotation required for each letter in a word, and ensures that the rotated letters are distributed evenly around an imaginary curved path. The actual rotation is carried out using CSS3 transforms, and are calculated based on the radius as well as the width of the text.

Code example:
To achieve curved text:

$example1.arctext({radius: 300})

To modify the direction:

$example2.arctext({radius: 400, dir: -1})

To remove rotation but have the letters laid out over an arch:

$example3.arctext({radius: 500, rotate: false})

For more ArcText functionality, see the demo below.

ArcText

Required library: jQuery
Demo |Download Source

SlabText

SlabText is similar to FitText, except it works for multiple lines. SlabText allows you to create bold, attention-grabbing responsive headlines. SlabText allows you to create multi-line headlines that scale to fit any browser by splitting headlines into rows, then resizing each row in order to fill the window’s horizontal space.

You can allow SlabText to automatically create individual rows, or you can even specify the words you want to stay together on a line, with the calculated and preset word combinations feature.

Code example:
The plugin requires the following CSS rules:

.slabtexted .slabtext
        {
        display:-moz-inline-box;
        display:inline-block;
        white-space:nowrap;
        }
.slabtextinactive .slabtext
        {
        display:inline;
        white-space:normal;
        font-size:1em !important;
        letter-spacing:inherit !important;
        word-spacing:inherit !important;
        *letter-spacing:0 !important;
        *word-spacing:0 !important;
        }
.slabtextdone .slabtext
        {
        display:block;
        }

Add the slabtexed class to the body element and use slabtextdone for the headers you want to resize, this will dynamically resize the headline by default by automatically inserting span class= "slabtext".

You can also preset the words on each row by manually using the span class= "slabtext" wrapper around each row.

<body class ="slabtexted">
	<h1 class= "slabtextdone">The Rows Here Will Be Dynamically Resized Upon Browser Resize</h1>

	<h1 class= "slabtextdone">
<span class= "slabtext">The Rows Here</span>
<span class= "slabtext">Are Resized</span>
<span class= "slabtext">Based On The</span>
<span class= "slabtext">Span SlabText Markup</span>
</span>
</h1>
</body>

SlabText
Required library: jQuery
Demo | Download

A Final Word of Caution

When it comes to typography, don’t forget that form should follow function. While these plugins can give you enhanced capabilities and provide your typography with a much needed sizzle, your end-goal should be to give the visitor a fantastic experience. Remember, just because you have the capability to accomplish a certain effect – it doesn’t necessarily mean you should!

Simon (better known as SimonTheSorcerer online) is a digital renaissance man of many talents and an always curious part time adventurer of cyberspace. You can read his musings about the digital era on his website. He currently works for the really cool email marketing system provider Jangomail.