15 jQuery Plugins To Improve Your Web Development
Being able to improve and manipulate web typography has always been one of the biggest changes for web designers. Typography is such an important element of beautiful design, yet when it comes to the web it is often overlooked. Thankfully there’s a range of jQuery plugins that give us some super useful features and allow us to manipulate our web text like never before
jFontSize
I like this plugin because I’m a fan of improving accessibility. Using this code, you can add the text resizer buttons to your site so your users can quickly change the font size of any text within a class you designate. You can also customize how quickly the font size increases per click.
Shuffle Letters
This is a cool looking text effect as well that can also work to add some movement to your page. At the source link below, you get the benefit of a detailed walk-through of the plugin, but also a really great example of creating your own jQuery plugin. The text you want to shuffle just goes in any tag that supports the “id” attribute (<div>, <span>, <p>, etc). The default setup is very easy to implement, but tweaking the look-n-feel is easy to do.
jQuery Glow
A nice rollover effect, the letters transition to various colors of your choosing. This can be nice for navigation bars or other elements you want you users to interact with. It’s lightweight and can be toned down to be a neat, subtle effect.
jqISOtext
This plugin adds an isometric effect to make your text warp from one letter to the next. You can control this on a letter by letter basis, if needed. This can be an excellent effect for titles/headers or just fun text styling.
jQuery Approach
While not only a typography plugin, you can use jQuery Approach to create a series of interesting rollover effects. You can control how any character-based elements within a tag grow/shrink and/or change colors. This could be a good navigation bar effect.
FitText
Here we have a slick effect for auto-sizing the text to fit the screen size of the user’s screen. Designed for titles and headers, this will scale your text to the size of the parent element. This makes your titles and headers dynamic and fluid. Don’t try to use this for paragraph text, though. It will scale it and can have unexpected results if used with a large block of text.
NewsTicker
This is a good old news ticker, which can be used to provide up-to-date information. I like that this is very lightweight and easy to use. Plus, the content is search engine readable.
Runloop Plugin
This is a deceptively robust plugin that does far more than what it appears to do on a surface level. You can chain multiple text effects and designate when you want the effect to start running. I would classify this as an advanced plugin as it takes some knowledge of code to get working properly. But once in place, there are a great many amazing effects you can pull off in a certain sequence.
Parallax (Scrolling)
I realize this isn’t a typography specific plugin, but it is so useful for dramatic text effects that it simply MUST be included in this list. You’ve probably seen those websites that have that amazing 3D effect as you scroll through the content. This is a simple, lightweight way to pull this effect off on your own. You can use images and text to make it work.
Bacon!
Cool name, cool plugin! Bacon allows you to wrap text around a bezier curve, giving you advanced desktop publishing abilities directly within your website designs. Manipulating text around an image is super easy in InDesign, but in HTML/CSS text simply flows in square blocks. You could achieve similar effects using some dirty HTML markup, but Bacon allows you to cleanly style up your text with a series of coordinates.
TypeButter
There’s plenty of jQuery plugins that allow you to tweak the kerning of your web type, but most require direct input to move each letter individually. If you’re looking for a quick and easy solution check out TypeButter. Simply spread it over your type and it will automatically override the browser’s default values with visually pleasing optical kerning. By default the plugin supports Arial, Georgia, Helvetica, Times and Verdana, but you can also roll your own if you need another font.
Kerning.js
Despite its name, Kerning.js allows you to do so much more than just set individual letter spacings. With features such as size adjustment, color and various transformations on a per-letter basis it allows you to create some really cool type effects. What’s more, this is all done via CSS without any additional spans or markup added to the HTML, which is nice!
Baseline.js
Achieving a nice vertical rhythm in your web designs is easy, right? Just set yourline-height and away you go! Unfortunately things soon start to fall apart when images get involved, but this is where the Baseline.js plugin steps in. With just one line of Javascript Baseline.js will scale your image dimensions to a multiple of your desired baseline figure, meaning your content will always stay perfectly aligned to your baseline grid.
Arctext.js
Setting lettering in an arc layout isn’t a requirement we run into every day but if you’re designing a page with an eye catching header, or recreating a vintage logo effect the Arctext.js plugin might just come in handy. Arctext.js does exactly what the name implies, it allows you to set your text along an imaginary arc of a given radius.
Originally posted 2014-06-30 17:38:32.