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

eleventyConfig.addPlugin(
pluginTypeset({
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.