Using jQuery to get your type on

Just the other day, I was thinking that we use javascript for a plethora of things from adding interaction to pages right down to changing and detecting content based on a users browser. This allows us to target specific devices and tailor the content that gets shown to users. I then wondered if we could also use jQuery to enhance the presentation of type on the web. The short answer was hell yes, in the form of plugins and scripts that help us address some basic issues and also let us have a little fun with typography as well.

Line Height Woes

This plugin helps you fix your line height problems. What line height problems you say? Although you may already be setting line heights, you will run into this problem when you start mixing in images, videos or embedded objects that have heights that are not multiples of the line height set. A simple solution would be to resize the image so that the height is a multiple of the chosen line height, however that’s not very practical for a production situation where you have no idea what the levels of computer literacy the end users may have and it is unacceptable to make end users jump over such hurdles. This is where jMetronome comes in and saves the day. This plugin is really simple to use and to understand. All it does is retrieve the line height and then based on that it adds padding to the top or bottom of the targeted element so that its height is a multiple of of the set line height. The only caveat with this plugin is that if you were to use unitless values to set the line height, then Internet Explorer will not be able to retrieve the line height, which means you will end up having to hack the script and hard code the value of the line height so that it works in Internet Explorer.

The author of this script, Filipe Fortes has a demo page on his site that you can refer to in order to get a feel of the problem space that this plugin fixes. Pay attention to how the text no longer aligns it self to the baseline of the page after the insertion of the first image.


Wi what? Widows are the age old nemesis of print designers. Many print designers have spent countless of hours fixing their copy so that there are no widows on the end of each paragraph. Widows is a term used to define the last straggling word that falls on to a new line at the end of a paragraph, leaving it the only word there at the very end on a new line. You’re probably thinking that it’s not a big deal and you can’t really control that on the web unlike the print world. Well think again! Salvation comes in the form of a plugin created by Dave Cardwell, aptly named Widont.

Special Characters & Ligatures

If you have used Microsoft Word before, you will notice that the program cleverly replaces little pieces of text to enhance its presentation; like when you enter a fraction. Print designers initially making the move to the web were perplexed with this problem and some are to this day still crying out for an elegant solution. The same applies to certain typefaces that have built in ligature support that make the type rendered just that more sexier. With a little jQuery plugin called Fancy Letter you can add all the small enhancements that you once thought were an impossibility on the Web. Of course now this is sometimes not required with fonts that are being released everyday with ligature support much like the one used to set the body text of this article (Corbel).

Font Detection

I have seen countless numbers of designers create some stunning designs on their computer only to plant their face in their palms when they view their designs on another computer because the use doesn’t have the font installed on their computer. Now this is no longer a problem with the release of Remy Sharps font detection script. Voila! Now you can append classes and target fonts and specific users that use specific operating systems to your hearts content, replacing the font so that the design still looks great.

With Great Power Comes Great Responsibility

As with all things, there are obvious pros and cons to using these plugins and scripts on your website.

Obviously the major wins for us is the fact that all of this enrichment is being added progressively, so the design does not break if they are not present.

Creatively speaking, the moment we start to think and play with things like typography, the designs that we start to produce are much more creative and attractive as well, so I guess the great advantage is that a whole lot of good concepts and ideas can crop up simply by experimenting with typography.

One of the major disadvantages is the fact that these plugins and scripts all need to be downloaded and this translates to extra processing time which may not be apparent on fast connections, but become a real pain when you are connecting to the Internet on a dial up connection. So bear this in mind as well.

Another disadvantage is the fact that when you play with fonts, if you don’t know what you’re doing, you could end up wrecking the font for everyone. This is especially true with things like ligatures and the kerning that the fonts have built into them already.

Lastly, one the most important things to take into account is the fact that although we (designers) are often impressed with things like ligature support, clients rarely bother about things like this and sometimes sweating over details like ligature support (which can be tedious to get right) can end up chewing up a large chunk of your time that you could use to enhance the design in other ways.


There are no comments yet! Be the first to post one using the form below.

Add Your Comment