Ligatures on the Web

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:

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:

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
Æ Æ
æ æ
Œ Œ
œ œ
ß ß
ff
fi
fl
ffi
ffl
ſt
st

Ligature.js

Ligature.js is a simple javascript file by Wyatt Allen designed to go through the text of a web-page and insert the appropriate ligatures.

Use of the file is simple. Link to the external ligature.js file:

<script type="text/javascript" src="ligature.js"></script>

and call the function on page load:

<script type="text/javascript">
     <body onload="ligature();">
</script>

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).

Image of unsupported ligatures created with ligature.js

While using javascript rather than HTML character entities will solve our SEO woes, in my tests, screen readers will still view the ligatures as a single character rather than individual letters. Sadly, this is the deal breaker, as the use of ligatures would make our page inaccessible to users who require a screen reader.

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

font-variant-ligatures: common-ligatures;

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:
Image of Firefox 4 rendering a page with CSS3 Ligatures

Recommended Reading