20 Fantastic jQuery Web Type Plugins

by on 10th December 2012 with No Comments

screenshot

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.

screenshot

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).

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

KarlRoos/jQuery.responsiveText

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

screenshot

Cool & Crazy Effects

jqIsoText: jQuery Text Effect Plugin

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

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

TextGrad

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

screenshot

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!

Comments & Discussion

No discussion just yet... Get things started!

Leave a Comment

Subscribe
Membership
About the Author