Typeset.js is a small li­brary that aims to im­prove ty­pog­ra­phy on the web — by bring­ing it closer to its writ­ten word coun­ter­parts i.e. news­pa­pers and mag­a­zines.

I use @liamfiddler’s type­set plu­gin on my Eleventy site. Overall, it’s a small dif­fer­ence that not many read­ers will no­tice un­til shown two con­tent pieces side by side. At least, that’s how I re­al­ized how much of a dif­fer­ence it makes.

However, when I sent a web­men­tion to Kev Quirk on his lat­est ar­ti­cle about SSGs this evening, I saw how bro­ken my com­ment looked in a cou­ple 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 miss­ing a cou­ple of fis be­cause Typeset ate them. The al­pha­bet f fol­lowed by the al­pha­bet i is a com­mon lig­a­ture ap­par­ently — and Typeset con­verted the plain-text fi into , which made it harder for ma­chines to read it.

What are lig­a­tures? This is how Wikipedia in­tro­duces them:

In writ­ing and ty­pog­ra­phy, a lig­a­ture oc­curs where two or more graphemes or let­ters are joined as a sin­gle glyph. An ex­am­ple is the char­ac­ter æ as used in English, in which the let­ters a and e are joined. The com­mon am­per­sand (&) de­vel­oped from a lig­a­ture in which the hand­writ­ten Latin let­ters e and t (spelling et, from the Latin for and”) were com­bined.

– Wikipedia as on 11 September 2020

Because this makes it harder or im­pos­si­ble for ma­chines to read, it’s also a bad fit for the web and might even af­fect your search re­sults (and there­fore SEO) as dis­cussed on the English StackExchange com­mu­nity above.

I up­dated the con­fig­u­ra­tion to ex­clude lig­a­tures while type­set­ting and now my com­ment ap­pears prop­erly:

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 no­ticed this is­sue in other places but never fig­ured out why this weird be­hav­iour was pre­sent at all, un­til look­ing at the raw HTML now.

If you use Typeset and/​or its Eleventy plu­gin, please be wary of this and up­date your Eleventy con­fig­u­ra­tion.