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.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
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.
Responsive-Measure
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
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.
Kerning
Kerning.js
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.
Wrapping
Bacon
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.
SimonFairbairn/Line-In-Typography
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.
KarlRoos/jQuery.responsiveText
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
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
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!