• Vanilla

Blast: Typographic Manipulation

Blast separates text in order to facilitate typographic manipulation. It has four delimiters, including character, word, sentence and element. Alternatively, Blast can match custom regular expressions and phrases.

Blast’s uses include typographic animation, juxtaposition, styling, search and analysis.

The plugin is highly accurate; it neither splits words at spaces nor splits sentences at periods. All Latin alphabet languages and UTF-8 characters are supported. Features include:

  • By only traversing text nodes, all HTML, event handlers, and spacing are preserved. Thus, you can safely apply Blast to any part of your page.
  • Automatic class and ID generation make text selection simple.
  • Blast can be fully undone with a single call.

The elements Blast generates can be accessed through both CSS and JavaScript by referencing auto-generated class names or iterating via jQuery/Zepto’s eq() function.

Blast is a cool little plugin that will make designers rejoice with additional text controls and manipulations for a variety of uses and website design options. It is a robust plugin that functions well while preserving some text specific styling such as bold and italics.



TextTailor: Responsive Text jQuery Plugin

You’ll never have to worry about a parent element lacking the right text fill again with TextTailor. This jQuery plugin is designed to make text fill the height of a parent element or create ellipses when it does not fit.

The plugin is a simple way to make sure text, especially for elements that change frequently such as blog post previews, is used in the best way possible. The plug supports text fill for different post types including post not justified, post with images and fixed font justified.

TextTailor also comes with a variety of other options that you can adjust and customize. You can set a minimum and maximum font size, determine the amount of wrapping between elements, set the line height, determine resizing on different windows, fit to the parent container element, use ellipsis when needed, center or justify text within the frame.

The only requirement for using this responsive text tool is that the parent element needs to have a set height specification; it can be fixed or percentage-based.

  • Spotlight

fontFlex: Lightweight Extension for Changing Font Sizes

This lightweight jQuery extension is designed to create dynamically changing font sizes according to container and/or browser width. It is intended for use with responsive or adaptive CSS layouts. This is a great tool for helping the text your site look great at any size.

Installation of fontFlex just takes just one step: include the latest version of jQuery and the fontFlex code in the head of the HTML. Then you are ready to configure.

This plugin takes a little code understanding. You’ll need to define a default base setting in the CSS for the font size and line height for the body or intended element to start. (Declaring a font size is recommended.) Then you have to call the plugin on the element.

You can control a few custom parameters such as the minimum and maximum allowable font sizes and a mid-range buffer. The developers of this plugin recommend a buffer value of 60 to 70 for the best results, with lower numbers resulting in larger text and higher values resulting in smaller text.

fontFlex is tested and compatible with Chrome, Safari, IE 8+ and Firefox.


LetterFx: Animated Visual Effects to Text

This plugin allows you to apply animated visual effects to text, including individual letters, words or custom patterns. The jQuery plugin is simple and light.

LetterFx works by temporarily injecting markup into the text of an element and sequentially adding and removing transition-based CSS classes. This is a developer-level plugin and should be used by those who feel comfortable altering CSS classes only.

The resulting animations created with the plugin are simple but quite impressive. Use this tool to help add emphasis to certain text in the design.

Options for text animation include backward or forward motion, timing changes, duration of the animation, starts and stops, sorting, patterns, letter replacements and selection of text elements.

Unique effects included in this plugin include spin, fad, grow, smear, fall, swirl, wave, fly top, fly bottom, fly left and fly right. What’s especially nice about each animation style with LetterFx is that movement is simple, consistent and unobtrusive. Take a close look at each animation demo to see exactly how each moving letter or word style works.

One more bonus with LetterFx is that the code is designed so that you can even create your own custom animation with the plugin, using the provided actions or something you come up with on your own. (Have fun!)


Responsive Text

Set font sizes responsively based on its’ container width.

  • Spotlight


Web typography at its finest: font-size and line-height based on element width.


Flat Shadow

Automatically casts a shadow creating depth for your flat UI elements.



Quickly fits single and multi-line text to the width (and optionally height) of its container.



A lightweight, extensible syntax highlighter.

  • Spotlight


A plugin for fitting heading text to its container



A typesetting plugin for balancing measures.


Responsive Measure

A simple script that allows you to pass in a select which generates the ideal font size needed to produce the ideal measure for your text