What are font ligatures?

MonoLisa — Tue, 22 Apr 2025 11:29:12 +0000

Font ligatures are a type feature where two or more glyphs are joined together. The resulting glyph, the ligature, replaces the matched glyphs. In this post, we will explore this type feature and explain its pros and cons while showing how to enable the feature. Some developers find ligatures useful in their workflow as they can improve the legibility of their code, so it is worth it to understand what the feature is about.

When are ligatures used?

If you look closely, you might notice that many fonts do something special with combinations of fi and ft. You might notice how letters are subtly joined together. Historically speaking, early typesetters would model the replacement letter as a single block for their printing machine, as mentioned by I love typography. Another interesting tidbit is that ampersand (&) started as the combination of E and t and was a ligature before being formalized as an official letter. Similar examples can be found from Nordic letters of Æ,Œ, and the German letter ß, which started as ligatures to improve legibility. The example below showcases several common ligatures from the MonoLisa typeface.

How are ligatures visible in the OpenType font specification?

If you look at the OpenType font specification carefully, you can notice it contains liga and dlig features. Both groups are meant for ligatures, and liga contains combinations that should be used in normal conditions, while dlig has been reserved for discretionary usage, and it is up to the user’s preference per the definition.

MonoLisa typeface includes both, and the idea is that liga contains more radical replacements while dlig has been reserved for spacing-related tweaks, making it more subtle. It is possible that typefaces interpret the rules for your convenience like this, and it is a good idea to check what OpenType features they offer and how if you want to get the most out of the typefaces you use.

What are coding ligatures?

Now that you understand what ligatures are and why they are used, it is good to consider how they can be used for programming. Several coding fonts contain these combinations as ligatures to improve the legibility of common combinations, such as !=. In other words, after replacement, the combination would stand out on its own, and often, you end up with a more mathematical look for your code that some programmers prefer. Given it is not a look all programmers like, it is possible to toggle the feature using liga and dlig OpenType flags, and even if a typeface contains ligatures, they aren’t enabled by default. Consider the figure below to get a better idea of what kind of coding ligatures are possible.

From the type designer’s point of view, providing ligatures for a coding font comes with some challenges. There is limited space to use since coding fonts are monospaced by definition and, therefore, take a fixed width. The key issue is to get the spacing and proportion right so that the resulting glyphs fit their context well.

Conclusion

Ligatures are a type feature that many typefaces contain to improve the legibility of certain letter combinations. Coding fonts provide ligatures specific to the task. In coding fonts, ligatures are an optional feature you can enable if you prefer the more math kind of look.

What are serifs?

MonoLisa — Mon, 17 Feb 2025 08:44:56 +0000

You may have noticed that some typefaces have tiny legs or bars attached to their glyphs. These visual elements, serifs, have a specific purpose, and in this post, we will discuss the history of serifs, when you might want to serifed fonts, and when to avoid them in your designs.

Why were serifs invented?

It has been speculated that the first serifs were invented out of necessity. Suppose you look at statues from the Roman era. In that case, you might notice their usage of serifs as the visual elements were used as terminators to allow easier cutting of characters into stone. You would cut the serif end first so that the remaining cuts would terminate neatly. In other words, serifs likely exist because of practical reasons. Since then, the original characters used by the Romans were modeled as a typeface called Trajan pictured in the image below. Trajan borrowed the characters from a roughly 2000-year-old column in Rome commemorating emperor Trajan's victory in the Dacian Wars.

Baskerville is an example of a transitional serif typeface from the 1750s.
It modernized older shapes, and the typeface is still prevalent in book design.

Further evolution of serifs occurred in the 19th century as Slab Serif was introduced. The development of Slab Serif was motivated by the prevalence of printing press technologies and typewriters where each character had to be modeled on its own leading to monospaced fonts.

If you want to see a sans serif font vs. a serifed font, consider comparing Publica Sans and Publica Slab. The mood of the fonts is quite different and you can use this to your benefit especially in design work.

Why are serifs still in use?

The simple answer is that serifs are still in use as they may be more legible given they provide hints for readers to allow faster comprehension. A classic example is to pick up a typeface and consider characters, such as "l", "I", "1". Leaving serifs out leads to a design challenge in communicating the difference between the characters. Unfortunately, it is not always this straightforward as other studies imply that sans serif (read: "without serif") can be the more legible option for children. The same applies to people with low vision, and the same applies even to digital displays.

Serifs have their uses, especially in print and programming. The main benefit is that serifs allow a font designer to effectively address differences between characters when designing a monospaced font. It is even possible to selectively apply ideas from serifs to sans serif fonts to address specific design problems related to specific characters (i, j, r, and l are good examples). In monospaced fonts, serifs allow occupying space to avoid creating too large gaps between characters since the available space is fixed to a certain width.

Bonus serif - flare serifs

Although it is not considered a real serif, the so-called flare serif is an interesting special case as it achieves a similar effect by varying width without introducing a serif. Optima is a good example of a typeface implementing this technique.

Conclusion

Serifs go way back, and they still have their uses even today. Even if you might not use serifs fonts always, they have specific strengths, and they can be instrumental in monospaced typefaces to improve the legibility of characters through additional hints to allow faster character recognition, not to mention the space-filling benefits of serifs. Now that you know what serifs are, it isn't easy to unsee them.

If you want to discover more serif typefaces, see Wikipedia's serif-related categories.

DEV Community: MonoLisa

What are font ligatures?

When are ligatures used?

How are ligatures visible in the OpenType font specification?

What are coding ligatures?

Conclusion

What are serifs?

Why were serifs invented?

Why are serifs still in use?

Bonus serif - flare serifs

Conclusion