20 Fantastic jQuery Web Type Plugins

In recent years, web typography has gone from an embarrassment to a point of pride. From CSS to JavaScript, we’re gaining great tools almost daily that help us implement awesome type.

Today we’re going to look at the best jQuery plugins around that are specially built to make web type more awesome. Download a few and take your type further.

Typographic Measure Manipulation

FitText – A plugin for inflating web type

FitText allows you to easily and automatically stretch a piece of text to the size of its parent container.


HATCHSHOW: a jQuery plugin for balancing measures

Hatchshow enables you to create columns of text with a uniform measure so that you get that hard edge, variable text size feel (a really popular effect).


slabText – a jQuery plugin for creating responsive headlines

Yet another plugin that lines up the measures for your separate lines. The nice thing about this one is that the lines reflow really nicely as you resize the viewport.



This plugin isn’t about making creative headlines, instead, it considers a few variables about your type and generates an ideal and responsive measure for your paragraphs. This is great for keeping type highly readable in responsive design.



BigText calculates the font-size and word-spacing needed to match a line of text to a specific width. There’s a cool wizard to play with here.




This does exactly what it sounds like: helps you kern your web type. Web designers typically skip out on kerning because it’s so complicated and messy, this makes the process an easy one.


TypeButter: Optical Kerning FTW!

Rather than manually tweaking the kerning for each letter, with TypeButter you can set up optical kerning that does the work for you. You can use one of the provided font setups or roll your own.


jKerny.js, jQuery plugin to make kerning easy

jKerny implements new CSS pseudo-selectors for letter spacing, word spacing, first letter, last letter and more.




Text wrapping to the extreme. Bacon allows you to wrap text around a bezier curve or a line. It’s actually pretty impressive and can create some really complex wraps.


jQSlickWrap – Slick text wrapping for jQuery

JQSlickWrap helps you wrap your text around an image, no matter how complex. You simply tweak a few settings and the rest is taken care of automatically.


Vertical Rhythm & Baseline Grids

jMetronome: Using jQuery to keep typographic rhythm

This script helps you maintain a vertical rhythm for your typography by adding padding to various non-text elements to ensure its total height is a multiple of the document’s overall line height.



This plugin displays lines based on your theme’s line height so that you can correctly set your vertical rhythm and line up all of your typography to a baseline grid.


Auto line-height: a jQuery plugin for flexible layouts

Auto line-height adjusts the line-height of a container (such as a div) in proportion to its width, relative to the font size. Another great tool to help with responsive type.


Super Practical

Lettering.js – A jQuery plugin for radical web typography

Lettering.js gives you what CSS doesn’t: the freedom to target every single letter individually. This opens up all kinds of amazing possibilities for creative styling on a per-letter basis.



Plug and play responsive text. Simply target a container or the whole page and the script will do the rest!


Cool & Crazy Effects

jqIsoText: jQuery Text Effect Plugin

A quirky text plugin that manipulates the size of individual letters to create a unique effect.


Arctext.js – Curving text with CSS3 and jQuery

Creating curved lines of text is pretty difficult when you’re working with live web type. This plugin makes it a lot easier and can even help you animate the change.



Textualizer builds a creative transition from one paragraph to another. The transition is a sort of jumbled, mixed up effect that grabs your attention.


Shuffle Letters Effect: a jQuery Plugin

This plugin gives you an animation that cycles through a bunch of random letters before landing on the piece of text that you typed in. A nice and interesting way to introduce a headline.



TextGrad creates a gradient and stretches it across a line of text. Simple and effective!


What Did I Miss?

These twenty jQuery plugins represent the best typography tools that I could find. I’m sure there are a ton more out there though so leave me a comment below and let me know what I missed!