5 JavaScript/jQuery plugins for better typography
Beautiful typography doesn’t have to be reserved for print design.
Here are a few helpful jQuery plugins that will make it easy to make your typography on the web just as beautiful as print.
FitText
FitText is perfect if you want the font-size of a line of text to scale to fit the width of its parent. This is for use by display text only i.e. not paragraph text. This will be very helpful if you’re designing a responsive website and want a text-based logo at the top of your page.
Required library: jQuery
Uses: Resize text to fit parent element, make text fit on one line
Demo: Try resizing the window on this page (or change the orientation of your screen if you’re on a mobile device).
Lettering.js
Lettering.js allows you to target individual letters in a title, headline or any other display text.
The advantages of targeting individual letters are endless:
- Control kerning of individual letters
- Colour individual letters of headlines (such as in the Lettering.js logo)
- Jumbled y-position of letters and rotation for a fun effect
Lettering.js works by adding spans to the targeted element.
Code Example
We start off with a normal heading such as this:
<h1 class="targeted_title">Test</h1>
Then target the heading with the lettering function like this:
<script>
$(document).ready(function() {
$(".targeted_title").lettering();
});
</script>
Then the function adds spans to every letter like this:
<h1 class="targeted_title">
<span class="char1">T</span>
<span class="char2">e</span>
<span class="char3">s</span>
<span class="char4">t</span>
</h1>
You can target the classes of the spans using plain, old CSS.
Required library: jQuery
Uses: Style individual letters
Demo: The Lettering.js logo uses its own script to individually colour and rotate the letters.
Kern.js
Kern.js is a handy companion to Lettering.js. It’s a bookmarklet that, when clicked, allows you to click and drag the letters of any heading element on the page. This tool can be used to adjust: kerning, letter positioning and rotation of individual letters. With the output CSS, you can use Lettering.js to target the letters.
Required library: jQuery, Lettering.js
Uses: control kerning of single letters, style letters individually
Demo: A working demo is available on the Kern.js website.
BigText
BigText is similar to FitText in that it scales text to fit a certain width. The difference between BigText and FitText is that BigText is used to achieve vertical alignment of multiple lines of text.
Code Example
Starting with a <div> with an ID and multiple child <div>s:
<div id="bigtext" style="width: 300px">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
Target the <div> in your jQuery and apply the BigText function (after including jQuery and BigText, of course).
$('#bigtext').bigtext();
Required Library: jQuery
Uses: vertically align multiple lines of text, resize text to fit parent element
Demo: BigText has an excellent Demo Wizard that shows that BigText even works on 3D-transformed text. It’s pretty fun to play with, too.
SlabText
SlabText might look similar to BigText, but there’s one important difference: BigText uses a constant number of lines and SlabText uses a variable number of lines. You can also specify which words go together on which lines if you need to.
SlabText works great for responsive layouts for this reason. Try resizing the window in the demo. The number of lines adapts to the window size so that headlines appear huge on all screen sizes.
One setback about this element is that the text doesn’t resize until the JavaScript has loaded, resulting in a flash of unformatted text (FOUT).
Required Library: jQuery, some extra CSS
Uses: vertically align multiple lines of text
Demo: View the demo (try resizing the window too)
Bonus: Extra jQuery Typography Plugins
- Arctext: Create beautiful, curved text with jQuery and CSS3. You can even animate the radius and directional properties of the text. Some nice additional features
