Skip to main content

11 jQuery Plugins That Can Enhance Your Typography

 

Advertise here with BSA

There is an array of wonderful jQuery typography plugins that give web designers greater control over their sites’ web typography. At the hands of a capable designer, you can leverage the power of jQuery in web pages to reach a high level of typographic elegance and sophistication.

Below is a list of top jQuery plugins that serve a wide range of purposes related to web typography, from helping you implement @font-face to providing your users with better usability and functionality when it comes to your website’s fonts.

1. Lettering.js

View Demo

A jQuery plugin designed to facilitate "radical web typography," Lettering.js allows designers the ability to set dynamic and eye-catching typography that would be either prohibitively difficult or impossible to do using other methods. The goal of Lettering.js is to give you complete control over a web page’s type, right down to the manipulation of individual letters.

2. jMetronome

View Demo

A popular concept in typography that aids in the spacing and arrangement of beautiful, easy-to-read type is called typographic rhythm. This is the idea — well established in the typography world — that the relationship between text and space in a document creates a visual rhythm, which affects the overall aesthetic tone and readability of the document.

In web pages, when body text is interspersed with images, tables, blockquotes and other elements, it can become difficult to maintain vertical rhythm without sacrificing content editing and flexibility.

The jMetronome plugin for jQuery helps make it easier to maintain the typographic rhythm of a web page even with the addition of non-textual elements.

3. FitText

FitText helps you with typesetting, especially when crafting responsive web designs. The plugin automatically scales your text elements depending on the browser’s viewport size. An example scenario would be if you would like your headings to scale down when viewed in mobile devices to reduce the screen real estate they take up.

4. FontEffect

View Demo

FontEffect is a jQuery plugin that gives designers the ability to apply text effects such as outlines, shadows, gradients and mirroring onto normal HTML text elements. This means FontEffect applies the desired effects without the need for images. Though these text effects can be achieved using CSS3, FontEffect could be useful if you prefer or need to use JavaScript.

5. jQuery Approach

View Demo

This jQuery plugin provides web designers with the ability to make text objects change depending on the proximity of a user’s mouse cursor. For example, a designer can use Approach to configure a text element to grow smaller and lighter as the cursor approaches it, and to expand and become darker as it gets further away.

This is a great plugin for designers who want to provide users with an interactive experience upon visiting the site.

6. jqIsoText

View Demo

The jqIsoText jQuery plugin is a simple plugin that does one thing: It renders an arching effect whereby the characters of the target text element get bigger as you approach the center and then tapers off as you get to the last character. It mimics, to the best of its abilities, an isometric/reflective appearance. It’s an interesting, fun and single-purpose plugin that might be useful for calling attention to important text content using distinctive design principles.

7. Airport

The Airport jQuery plugin is a text-animation plugin that mimics the old, flickering schedule/information boards you used to see in airports, train stations, bus stations, etc.

This plugin provides you with the ability to creatively style and animate text that you’d like to garner attention.

8. jQuery Glow

View Demo

As the name implies, this simple jQuery plugin gives you the ability to make your text glow when you hover over them. Though a similar effect can be done with CSS3 (for ideas, see some interesting CSS3 experiments and demos), aside from the fact that many users still do not use CSS3-capable web browsers, using JavaScript allows you to bind the glow effect based on events outside of hover, trigger, focus, etc. that CSS can’t listen to.

9. jQuery sIFR Plugin

The jQuery sIFR Plugin allows for the easy implementation of sIFR (Scalable Inman Flash Replacement).

sIFR is an old method of rendering text that use non-web-safe fonts. It uses Flash. Though @font-face is now the popular way of composing web type using custom fonts, it might have limitations that might make you choose sIFR instead. (However, sIFR has its own downfalls that can steer you away from it as well.)

10. jQuery Text Resizer Plugin

View Demo

The jQuery Text Resizer Plugin gives your users a degree of control over font sizes. The plugin, by default, adds three user commands to a web page (increase font size, decrease font size and reset to the normal font size).

Though most mainstream web browsers do offer text-resizing functionality, many Internet users aren’t aware that these features exist and might appreciate an in-page way to resize text.

The plugin works in tandem with the jQuery Cookie plugin so that it’s able to remember the user’s settings when they next visit (if they have cookies enabled, of course).

Another similar plugin to check out is Font Resizer.

11. BigText

View Demo

The BigText jQuery plugin is simple: It automatically sizes your text to fit inside its parent element. This results in, among other things, perfect justified alignment (though typically justified alignment is achieved by altering the spacing of characters and words, not through font size). What’s great about this plugin is that it works in dynamic, editable text areas so that as the user types, the font resizes.

Conclusion

One thing to note is that the widely regarded best practice in web design is to use CSS to deal with the presentation/visual layer (such as web typography) if possible. However, CSS has limitations that JavaScript can solve.

The sheer number of plugins for jQuery is staggering, and the items on this list are only a handful of the most interesting and powerful plugins available.

The development of new jQuery plugins continues to proceed at a breakneck pace. From manipulating the style of individual letters to facilitating responsive web design, if there is a typographical tool that can be imagined, there’s probably a jQuery plugin that can realize it. So if you know of a good jQuery plugin that can improve web typography, please share it in the comments below.

Related Content
About the Author

Ken Hattori is a technology writer at onlinegraphicdesigndegree.com based in Seattle. He has a passion for design, photography, letterpress, and just about anything that is appealing to the eye. Having spent some time living in Japan, he has developed a fascination with minimalistic and clean designs.

11 jQuery Plugins That Can Enhance Your Typography
Jacob Gube
Wed, 21 Sep 2011 10:00:11 GMT

Popular posts from this blog

Apple Launches Web Tool to Deregister Phone Numbers from iMessage

Apple today released a new web tool for users to deregister their phone number from iMessage in the event they switched to a non-Apple device. To deregister a phone number from iMessage, users simply enter their phone number in Apple's web tool, receive a free text message containing a code, and submit the code to complete the process. Users who still have their original iPhone can also transfer their SIM card back to the device and go to Settings -> Messages to turn iMessage off. 


Users switching from an iPhone to another device were often unable to receive SMS messages from another iPhone due to their phone number still being linked to iMessage. These specific errors with iMessage have been a well-known issue since 2011, which is when the messaging service debuted with iOS 5. They were also made even more apparent this past May, where a server glitch caused widespread message delivery problems. Apple was even sued over the matter in a California court, although the company cla…

Microsoft acquires iPhone email app Acompli

After accidentally announcing it a little early, Microsoft is officially confirming it has acquired email startup Acompli. The surprise acquisition means Microsoft is picking up a powerful email client for iPhone and Android in another move that further cements CEO Satya Nadella’s focus on cross-platform technologies. The Verge’s Casey Newton called Acompl "the Outlook for iPhone that Microsoft hasn’t yet built," and it seems Microsoft was equally impressed with the powerhouse email app. "We’re excited about what’s possible as we build on the app’s success and bring it together with work currently in progress by the Outlook team," the company said in a statement. "Our goal is to deliver fantastic cross-platform apps that support the variety of email services people use today and help them accomplish more." Recode first reportedthat Microsoft would make its latest acquisition official today; the company is said to be paying over $200 million for Acompli. A…

Apple will disconnect ‘obsolete’ first-gen Apple TV from iTunes in May

Apple has announced today it will drop iTunes support for some older devices from May 25. This includes the first generation Apple TV, and also any PC running Windows XP or Vista. The company is introducing new security changes which will prevent those devices from using the latest version of iTunes.
Apple says that the original Apple TV is an "obsolete Apple product" and will not be updated to support security changes. Only those with the second generation of Apple TV or later will be able to access the iTunes store.
Windows XP or Vista users won't be able to use the latest version of iTunes, but older Windows computers can still use previous versions without support from Apple. Those who do so, however, won't be able to make new purchases or re-download previous purchases on that computer. If you're on on XP or Vista, you'll need to upgrade to Windows 7 or later to continue using iTunes normally.
The writing was already on the wall for these devices: Wi…