Bring your web typography to life with these jQuery plugins.
What’s a web design without some beautiful typography? Nothing at all! Designers and developers all over the world would agree as well! Every web designer is looking for ways to enhance typography on his page with the help of effects, animations, and other useful features that allow us to mold and manipulate the text. Previously, print typography was believed to have more flexibility and control. But now, thanks to CSS and JavaScript resources, we can have that much-needed control over our web text as well.
Let’s skip to the part where we present you with a list of jQuery plugins that use modern web typography techniques to create mesmerizing text! You were all waiting for this!
FitText.js
Fit text will make your text fit on a page nice and wide. Basically, it inflates your web type to any size you like. Font sizing is made flexible through fit text to achieve scalable headings and subheadings. Use this on your fluid, responsive layouts to avoid any orphans or widows. Just like a responsive image, fit text will “fit in” just where you would like it to.
FlowType.js
If you are looking for some more control, you may use Flowtype.js. This plug-in will adjust your font size based on parent element width. No matter which device is being used to browse your website, flowtype.js will ensure that each sentence has the ideal character count per line (45-75 characters). This will ensure responsiveness and text readability. If you are looking for more control you can also adjust thresholds, line-heights, and font sizes.
Textillate
Here’s a cool text effect you might want to try. Textillate is an easy-to-use plug-in that will make your text jump, roll, fall, swing, and do other crazy moves. Combinations of libraries have been used to apply the CSS3 animation to the text. This will add a unique effect to a specific text you want to highlight.
Slab Text
Inspired by fittext, Slab Text is another jquery plugin that is perfect for producing big and bold headings on your responsive web design. The plugin splits headlines into two rows and then resizes each row to fill the horizontal space. The ideal number of character is calculated based on the parent element width and font size to set the perfect big and bold text for your responsive design. Slab text lovers, this one’s for you!
Type Rendering Mix
Type Rendering is the perfect tool for your text rendering problems when Core Text (iOS and OSX) is used. The result is more consistent text across all platforms. Instead of applying “–webkit-font-smoothing” and other such techniques which disable sub-pixel anti-aliasing and blur text, use this plug-in for more accuracy.
FunnyText.js
Here’s another animated text effect tool available as a jQuery plugin. Funny Text will move and replace the letters of your text in cool ways. If you’d like to spice up your text headlines, here’s something fun you can use!
Lettering.js
Lettering.js is a plug-in for your “radical web typography” needs. What’s that? Put simply, lettering will offer you cool effects, but with complete “down-to-the-letter control” unlike CSS.
Kerning.js
Kerning will allow you to take control of your typography by enabling kerning, transforming, and scalability on your web typography. You may use CSS rules to do this in a snap. Using the plugin is a simple one-liner job on your script page. Just add the single-sentence script and you’re done! On the advance side of things, you can also adjust font conditionals, pairing, repeats, vendor prefixes, and other augmented properties.
Jumble
Authored by Von Kristoff, Jumble is a funky jQuery animation that will jumble up the colors of your text and animate it. This is perfect for black background websites that have adopted the “funky” look. You may choose from a range of colors if you are following a theme. You can also set what the shuffle will be based on (brightness, saturation, etc).
Arctext.js
Just as the name suggests, Arctext will let you adjust your text in an arc. With the help of CSS3 and jQuery, Arctext allows easy text curving or rotation. It is generally difficult to arrange letters in a curved path. But with the help of arctext.js, you can do this in a jiffy.
Animated Text and Icon Menu
To be honest, I don’t like my icons doing too many fancy tricks. It’s just an icon! If you’re looking for something more professional-looking, this icon should do! Learn how to create a slick menu with a cool animated hover feature. The inspiration of these coot icons came from the Pelican Miami Beach Hotel Website. With 8 different effects to choose from, you’ll be amazed at the possibilities of this plug-in.