During the latter part of the 20th century, as photo-typesetting and early digital type became popular, ligatures became much less common. This was due to their less-frequent inclusion in sans-serif typefaces that were becoming popular and to technical limitations in how font software worked. It wasn’t until the development of OpenType fonts and their widespread adoption in the early-to-mid 2000’s that ligatures came back into more widespread use. This was because the new format allowed for easier substitution of ligatures for separate glyphs at a software level. Now even on the web it’s far more common to see standard ligatures be on by default.
But seriously though, why do we care?
This is a reasonable question to ask. And the answer is not necessarily simple. One reason is spacing: the standard ligatures often even out spacing between letters, making the text feel more evenly spaced—therefore making it easier or more comfortable to read. Other reasons I’ve seen put forth relate to ‘making text look more historic’ or something to that effect. But I think that’s too simplistic.
As a designer and typographer, I want to choose type and make typesetting decisions that support the brand and the overall design direction chosen for the project. ‘Making it look more historic’ might be a criteria, but so could ‘make it feel familiar’ or ‘make it reminiscent of this time or place’. These are design goals, and typographic decisions will either support them or not.
My own feeling is that ligatures lend a bit of polish to a design, and help set it apart from so much of what I see every day. Not all of them should be used all the time perhaps (think historical ligatures)—but enabling them for headings and blockquotes could be a reasonable strategy if it supports the overall design.
My point is that all our decisions about typography and design should be in support of the content and the goals. The more care we take in doing so, the more it will show through in the final outcome. The more care the readers see put into that outcome, the more faith they will place in the content they are reading.
Let’s have a look at how to use them on the web. Note that all the example code showcases how to properly use progressive enhancement to display features with the proper attributes where they are supported. It doesn’t add much to the process, but the result will be a more future-friendly site.