Ligatures are an interesting OpenType feature, as they can help resolve potential issues that otherwise could exist within a font. However, OpenType defines five ligature features: standard (liga), discretionary (dlig), historical (hlig), contextual (clig), and required (rlig).
Ligatures aren’t always necessary — you can get away without them quite easily. But in some cases, they make things much easier on your eye. If you’re not sure which fonts use what kinds of ligatures, the best way is to actually test them with the actual text you’ll be using.
What Is a Ligature
A ligature is simply a single glyph representing multiple letters. This substitution isn’t just about spacing; it’s also about changing the shape of a letter in order to connect to another character, or perhaps both.
It’s important to understand that the substitution of multiple characters into one is different than adjusting spacing between characters and connecting handwriting, where two or more letters might look like one.
Kerning is about spacing between adjacent letters, while the CSS letter-spacing property adds additional spacing between characters. Touching outlines alone may not suffice either; if you need to distinguish between touching and non-touching, you’ll have to consider the components inside the ligature, too.
In this case, I’ll show you some familiar combinations inside ordinary words and how their shapes can resolve neighboring-letter collisions. The result depends on the font that you use.
The fi ligature
In “finish,” the hook on the f can collide with the dot over the i. A fi ligature can merge the hook and dot into a single shape.
The fl ligature
In “flower,” the hook on the f can collide with the top serif on the l. A fl ligature can join those parts neatly. In “office,” an ffi ligature can handle the two neighboring f letters and the dot over the i together.
Some common Latin combinations include ff, fi, fl, ffi, ffl, etc. You will probably see all of these in many fonts. Whether you can take advantage of them or not depends on the font you choose. In most cases, you won’t want to replace the fi ligature with a discretionary ligature, because it’s better to let the browser do the work, so to speak.
In this example, we’ve used several standard ligatures that address possible collisions or connections among letters. Some ligatures are “optional,” meaning that they’re chosen only optionally, according to taste, rather than for functional reasons. You should judge based on the actual results you’re getting from the rendering application rather than the decorative appearance of the typeface itself. For example, in this case, we’re comparing a few choices:
Standard Ligatures (liga)
Discretionary Ligatures (dlig)
Both are part of separate OpenType features, but I think it’s worth noting that liga ligatures tend to appear first, followed by discretionary options. It’s entirely possible that certain fonts may work well without any ligatures at all, though you’d need to consult applicable style-guides for recommendations.
Note: These feature categories are independent of the decorative appearance of a given font. There’s no guarantee that your favorite serif typeface would necessarily benefit from having a discretionary ligature, although you may find one that does.
Drawing Ligatures and Making Them Appear
So why would I draw a combined shape within an original font and have it appear automatically? Because that task involves two different aspects: drawing the ligature within a particular font, and making it appear in applications that support such behavior. Both involve preserving the underlying letter sequence, too. Let’s explore both scenarios.
The first is fairly simple: You can create a corresponding combined glyph, and whenever the exact combination appears, the ligature will be substituted instead of individual letters. To preserve the text, it’s important that the substitution information remains attached to the font. In practice, the font needs to include the substitution information, and the rendering application needs to support it. Even with that information in the font, application support isn’t guaranteed. Standard OpenType substitutions, such as replacing the word “finish” with its ligature, change the visual representation of the text. They don’t affect the underlying sequence of letters, which means the text remains searchable.
CSS ligatures
You can compare documented ligatures via CSS, such as the common ligatures below.
font-variant: common-ligatures;
font-variant: no-common-ligatures;
font-variant: discretionary-ligatures;
font-variant: no-discretionary-ligatures;
Of course, each browser supports different ligatures in the selected font, and it doesn’t hurt to know whether the substitutions in the font are available. In general, the key is that the rendering application needs to support substitutions, too. If you don’t see any changes when you apply ligatures, then it’s either missing substitutions or the application doesn’t support the feature. Or maybe you just set the letter-spacing value to something other than zero, which suppresses optional liga and clig substitutions, for example. Fortunately, you can override that with font-feature-settings.
Note that I wasn’t required to use a precomposed Unicode ligature. My preference was dictated by how the ligatures appeared and behaved within the intended application.