Ligatures are go!

Elliot Jay Stocks is publishing a series of articles at the moment on web typography. Recently he published: Tomorrow’s web type today: The fine flourish of the ligature which, as the name suggests talks about ligatures.

I won’t explain what a ligature is, if you don’t already know read Elliot’s post (which you should do anyway). Since I changed this entire site to use the Sorts Mill Goudy font and wanted it to look like a book, ligatures are naturally something that I wanted to add.


This site currently uses Typekit to render the fonts, and as Elliot’s article points out, the only way to get Typekit to use the ligature set of the font in question is to include the entire character set. I have done this, and the font file has increased from 95k to 206k, which is a bit of an irritant, but there is no way around it for now.

CSS settings

The article also mentions a number of CSS settings that can be used, such as font-feature-settings and its various vendor prefixed companions. These I have also added to the site to facilitate users who have turned off JavaScript and therefore won’t be served with the Typekit font.

It also mentions the popular text-rendering:optimizeLegibility; which is often used to turn on ligatures and kerning. I also added this to my CSS, completely forgetting about how buggy Android is with this rule, and have since removed it.

When this rule is present, Android adds random characters where there are none, including random spaces and strange things sometimes happen with standard hyperlinks. There is a short bug report on this, but I have no idea of the status.

For now

So for now ligatures are on, but the increased file size worries me, especially considering the font change flash that appears to occur with Typekit anyway. I do like the look of the ligatures, and they ease readability so I would like to retain them. We’ll see.