jQuery plugins are, these days, a part of everyday life for website developers – it is hard to imagine the industry without them now as there are just so many available for every conceivable use. Typography, however, has been around since way before there were any website developers.
The use of jQuery plugins to produce beautiful typography is becoming more and more fashionable in web development. These plugins help to negate the need for typography to be uploaded in image-form, which helps with search engine optimization and page loading times. Here is a selection of some of the best and most useful text effect jQuery plugins we could find. Most are free of charge, however, a couple do carry a small price tag.
FitText
FitText makes font sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
WideText
This plugin is based on the FitText plugin, it adjusts the size of the text and elements, along with the kerning for different screen sizes.
slabText
This script splits headlines into rows before resizing each row to fill the available horizontal space.
Capital Letter
With this jQuery plugin you can create fancy capital letters to start each paragraph.
Simple Text Rotator
A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little or no markup. See a tutorial for this plugin here.
Kerning.js
Kerning.js is a small, single script and has no dependencies. Add it to your page, add some CSS rules, and your text will be beautified.
Lettering.js
A lightweight, easy to use JavaScript <span> injector for radical web typography. There is a tutorial for using this plugin here.
Arctext.js
This plugin allows you to arrange letters along a curved path. It calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.
Text Effect jQuery Plugin
With this plugin you can apply various effects to text, letter by letter.
Approach
Approach works by animating over distance. The closer you get to the object, the more the style will be applied.
Circle Type
A jQuery plugin for setting type on a circle.
funnyText.js
Create funny and crazy moving text easily.
Words Rotator
A simple elements rotator plugin with various different settings.
Texillate.js
Texillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.
Flipping Text
Create a ticking text intro animation for your typography. See a tutorial for this plugin here
jQSlickWrap
This is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.
Animated Opening Type
This is a tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions.
jqIsoText
With this plugin you can change the size of letters within text. Starting from one font size, it will increase or decrease the size and can be applied for a whole block of text or for some words in the text.
Rainbows
Rainbows allows you to effortlessly apply gradients, shadows and highlights to text using no images.
Textify
Textify is a jQuery plugin that allows you to automatically create an attractive and modern layout for your content. This plugin is available at a cost of $6.
Shuffle Letters
This plugin shuffles the text content of any DOM element – an interesting effect that can be used on headings, logos and slideshows.
Textualizer
A plugin that allows you to transition through pieces of text. When transitioning to a new text, any letter that is common to both pieces of text stays on the screen and is moved to it’s new position.
CurvedText
This plugin will align text on any curve to spice up your web typography.
jQuery Airport
Airport is a simple text effect plugin for jQuery. It emulates the style of those flickering information boards you sometimes see at airports and train stations.
AngularJS – Typewrite
An AngularJS directive that simulates the effect of typing on a text editor.
jQuery TypeWriter.js
This plugin is similar to the one above – a typewriter psuedo-Matrix-like text effect.
LetterFx
A jQuery plugin to apply animated visual effects to text: letters, words and custom patterns. 7 different effects.
Wave Text Effect
This plugin creates a ‘wave effect’ out of an HTML header. Waving text will be friendly for search engines, editable, selectable. Works best with monospace fonts. This plugin costs $3.
Conclusion
Hopefully we have shown you some plugins that you hadn’t previously encountered in this list. Do you know of any other text effect plugins that you think should have been included here?
Have you used any of these jQuery plugins in your projects? Or, in fact, any other text effect plugins that didn’t make this list? Please share your links and opinions with us in the comments section below.
