Ligatures are not a good fit for the web.

I talk about ligatures in typography and why I had to disable them on my site.

Typeset.js is a small library that aims to improve typography on the web — by bringing it closer to its written word counterparts i.e. newspapers and magazines.

I use @liamfiddler’s typeset plugin on my Eleventy site. Overall, it’s a small difference that not many readers will notice until shown two content pieces side by side. At least, that’s how I realized how much of a difference it makes.

However, when I sent a webmention to Kev Quirk on his latest article about SSGs this evening, I saw how broken my comment looked in a couple of places:

The ligatures on my comment on Kev's site cause the combination of the alphabet f and i to be invisible in both the words 'affiliated' and 'find' -- causing them to render as 'a iliated' and ' nd'

It’s missing a couple of fis because Typeset ate them. The alphabet f followed by the alphabet i is a common ligature apparently — and Typeset converted the plain-text fi into , which made it harder for machines to read it.

What are ligatures? This is how Wikipedia introduces them:

In writing and typography, a ligature occurs where two or more graphemes or letters are joined as a single glyph. An example is the character æ as used in English, in which the letters a and e are joined. The common ampersand (&) developed from a ligature in which the handwritten Latin letters e and t (spelling et, from the Latin for “and”) were combined.– Wikipedia as on 11 September 2020

Because this makes it harder or impossible for machines to read, it’s also a bad fit for the web and might even affect your search results (and therefore SEO) as discussed on the English StackExchange community above.

I updated the configuration to exclude ligatures while typesetting and now my comment appears properly:

const pluginTypeset = require("eleventy-plugin-typeset")

disable: ["ligatures"]
The ligatures on my comment on Kev's site are gone, and the combination of the alphabet f and i appear correctly in both the words 'affiliated' and 'find'

I had noticed this issue in other places but never figured out why this weird behaviour was present at all, until looking at the raw HTML now.

If you use Typeset and/or its Eleventy plugin, please be wary of this and update your Eleventy configuration.


Comment via email.