A ligature is the combination of multiple characters into a single glyph. Ligatures were originally employed when setting metal blocks of type as a means to deal with letters such as “f” that reach beyond their allotted space.
“F” ligatures in Adobe Caslon:
Additionally, some typefaces include discretionary ligatures, which though they do not serve a technical purpose, can add a decorative touch.
Discretionary ligatures in Adobe Caslon:
Ligatures & HTML Character Entities
It is possible to insert ligatures into a page using HTML character entities. Though it is *possible,* doing this is not really recommended, as you are replacing readable text with a symbol. This is less than ideal for both accessibility and SEO purposes.
For good measure, here are the ligatures with HTML character entities:
|HTML Character Entity||Ligature|
Use of the file is simple. Link to the external ligature.js file:
and call the function on page load:
Here’s a quick demo of ligature.js in action.
Issues with Ligature.js
Unfortunately there are a few issues with ligature.js that keep it from being a practical solution.
The variety of ligatures is up to the type designer. For ligatures unsupported by your typeface, the browser will display the ligature in your browsers default sans serif font. This could easily be fixed by deleting a line or two from the ligature.js file specific to those ligatures unsupported by your typeface (though this could get even stickier when we stop to consider font stacks).
Lastly, to be able to employ Caslon’s discretionary ligatures, I needed to publish the full character kit rather than Typekit’s “default” kit. This increased the download of the typeface from 280k to a 1320k. Yikes! This isn’t a problem specific to ligature.js, but a general problem with the use of ligatures on the web.
Ligature.js is a very cool tool and fun for experimentation purposes. It can give us a taste of how ligatures may be used on the web in the future.
CSS3 To the Rescue! (eventually)
The latest CSS3 working draft introduces a new property entitled “font-variant-ligatures,” which would allow us to control the use of ligatures via CSS. The property uses three values, common-ligatures, additional-ligatures, and historical-ligatures, each of which can be enabled or disabled.
As of this writing, the font-variant-ligatures tag is only supported in Firefox 4, though I expect it will quickly gain traction in other browsers.
I was able to replicate the ligatures found in the heading of my demo page by simple adding
to the body tag of my CSS.
View the demo of CSS3 Font-Variant-Ligatures
Here's an image of how Firefox 4 renders the page: