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.
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.
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!)
Web typography at its finest: font-size and line-height based on element width.
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 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
Takes a single element and sizes the text inside of its child
<div>s to fit the width of the parent element.