Typography Tutorial: A Primer on Ligatures

    written by Nick Cox

    A ligature is the joining together of one or more glyphs into one continuous glyph. This is commonly seen in continuous typesetting of book-length works. The typographic ligature has a vast and storied history, and today they can be used to lend an elegant or classic feel to type.

    We’ll look at the history of ligatures, describe how to use them in various applications for the Mac, and we’ll end by looking at a few examples of typefaces with particularly beautiful ligatures.

    History

    A typographic ligature is derived from the running together of letters in written manuscripts. Just as our handwriting naturally joins letters together today, this was a common practice employed by scribes to save time in hand copying. For the scribes, time was money, given that they had to hand copy entire texts. Anything they could do to save time in the process of writing was employed. In the image below, from the amazingly complex handwriting font Dear Sarah by Umbrella Type, we see an example of the joining of the t and h into one character, “th,” in continuous writing.

    Ligatures In Typography

    When moveable type became the norm, ligatures were included into type alphabets to mimic the writing of the scribes, the writing people read most. This continued into the age of digital typesetting, when many of the fonts we have are digitizations of renaissance text faces (Garamond, Bodoni, etc.), and the ligatures remain in the glyph coverage of the fonts we buy today.

    Why ligatures?

    There are currently two types of ligatures, standard and discretionary. In current typesetting, there are many combinations of letters that risk running together if the tracking or kerning of the type is too close. To combat this, ligatures are employed to make the text more readable. Below is an example of common ligatures as we see them today.

    Ligatures In Typography

    Particularly in the case of the “fi” ligature, the hood of the “f” would impinge upon the elevated dot of the “i,” so the ligature helps to smooth this out.

    Many fonts you buy today will contain these standard ligatures, which typically include those above: ff, fi, ffi, fl, Th, and sometimes ffl. Fonts that are intended for use in languages other than English, and which contain a wider range of typographic possibilities, require different ligatures. For example, “fj” runs the same typographic risks as “fi,” but is not a common letter pairing in English. In Norwegian, however, a word like fjörd is more commonplace, and thus there is a greater need for the “fj” and other ligatures.

    Standard vs. Discretionary Ligatures

    As we already mentioned, the standard ligatures are ff, fi, ffi, fl, ffl, and Th. Discretionary ligatures can include ch, ck, st, sp, and others. This becomes complicated by the fact that there is not necessarily a uniform set of standard ligatures that every set contains, and what one font considers standard may be discretionary on another.

    For our purposes, let’s consider the ff, fi, ffi, fl, ffl, and Th as standard and anything else discretionary.

    Enabling Ligatures

    Fonts that include ligatures typically do so by way of OpenType features. A thorough discussion on OpenType features is outside of the scope of this article; there is a great resource by FontFont here. All we need to know for our purposes is that an OpenType font can dynamically substitute contextual ligatures. In other words, when a “fi” is typed, the font automatically substitutes the “fi” ligature, provided OpenType features are turned on. Let’s take a look at how to do that in several common layout applications.

    Adobe Illustrator

    In Illustrator, open the Type palette by selecting Window in the menu bar and choosing Window > Type > OpenType.

    Ligatures In Typography

    When the OpenType Palette appears, the options for ligatures should look like what you see below.

    Ligatures In Typography

    Adobe Photoshop

    As you can imagine, the process for finding ligatures in Photoshop is similar to that of Illustrator. In the menu bar, click Window > Character. In the upper right hand corner of the resultant window, click the drop down menu (pictured in pink below), then go to OpenType and choose your ligatures. (Note: If the ligature options are greyed out, your font is not capable of these glyphs.)

    Ligatures In Typography

    Adobe InDesign

    In InDesign, go to Window > Type & Tables > Character (or click Cmd + T). The image below shows the palette that appears, and as in Photoshop, the dropdown menu that results when you click the upper right hand corner.

    Ligatures In Typography

    Apple Pages

    In pages, find the inspector window (typically visible by default) by pressing the Inspector button on the toolbar. Then go to the document inspector (farthest left option, shown below), and click “Use Ligatures”.

    Ligatures In Typography
    Ligatures In Typography

    MS Word

    Microsoft has enabled the use of OpenType ligatures in Word 2010. You can read an excellent tutorial here.

    CSS

    Ligature placement is in the current CSS3 specification, but it lacks browser support. So currently, ligatures are not possible using solely CSS.

    When to Use Ligatures

    Because of their heritage in ancient writing, ligatures can add class, style, and a sense of refinement to otherwise boring text. Many logotypes have been create simply by adding ligatures to a string of text. Here are a couple examples.

    Ligatures In Typography

    Ligatures In Typography

    When considering adding especially discretionary ligatures, ask yourself if they’re appropriate. Is the text you’re setting historical? Is it meant to reference the human touch of handwriting? If you’re going for a modern, precise look, for example, they might not be necessary.

    TOP 5 FONTS FOR BEAUTIFUL LIGATURES

    Finally, let’s consider a few notable fonts with a great ligature repertoire. These glyphs are an art, and you can tell that a great deal of design and thought went into these faces.

    Calluna

    I’ve always been a fan of Jos Buivenga’s fonts, and Calluna is no exception. It’s a gorgeous font and has lovely ligatures. Discretionary ligatures include fl, three versions of ff, OO, ip, it, ck, gi, fj, sp, ffi, ffl, qu, cb, ch, cp, sb, sh, sk, fb, fh, fk, ffb, ffh, ffk, and ffj!

    Ligatures In Typography

    Mrs. Eaves

    Emigre‘s Mrs. Eaves is a typeface with tons of character. The standard package includes a roman, italic, bold, and small caps fonts. But for an extra $59, you can tack on the “just ligatures” package and go to town. Take a look at these beauties.

    Ligatures In Typography

    Esta Pro

    This font by DS Type is an excellent and inexpensive all-around serif, but the ligature list is expansive.

    Ligatures In Typography

    Requiem Italic

    You’re in good hands when you go with type from Hoefler & Frère Jones. Requiem, other than being a gorgeous and widely used book face, flaunts a beautiful and elegant italic with great ligatures, pictured here.

    Ligatures In Typography

    Mantinia

    Matthew Carter always deserves mention, particularly given that he just won the MacArthur Genius Grant. His Mantinia is an excellent titling face that provides an alternative to Trajan with many great ligs.

    Ligatures In Typography

    Final Thoughts

    You may have more access to ligatures than you thought. Fire up Font Book (which comes bundled with OS X), and choose a font. Press Cmd + 2 to open the complete repertoire. If you move the point size down enough, you scroll through the glyphs and find the ligatures. You might be surprised to find what a font contains. In the screenshot below, Jonathan Hoefler’s Hoefler Text contains a great set.

    Ligatures In Typography

    Looking for a particular ligature? MyFonts has an excellent tool for this. Choose an advanced search and choose “tags” from the first dropdown. Then type ligatures in the next search box and let ‘er rip. Finally, there’s a great hidden tool that gives you access to OpenType features in the preview. Click the ff ligature in the tool bar and check the boxes with the ligatures you want. Then type your sample text and see which fonts appeal to you.

    Ligatures In Typography

    That’s all there is to it. Enjoy this typographic beauty and remember: Use ligatures subtly and sparingly for maximum effect.

    Recommended Reading

    I Love Typography: Decline and Fall of the Ligature
    http://ilovetypography.com/2007/09/09/decline-and-fall-of-the-ligature/

    Wikipedia: Ligature
    http://en.wikipedia.org/wiki/Typographic_ligature

    Mark Boulton: Five Simple Steps to Better Typography
    http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-3

    Authored by

    Nick Cox is a freelance designer from Seattle, WA. A typography maven and Wii Tennis champion, Nick blogs about found type, web type, and type tutorials at everydaytype.com.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

5 Comments
ADD COMMENT
  • sri ganesh.M says:

    February 28, 2011

    Wow, That was a huge article. I better Bookmark and read it latter :D

  • Duncan Long says:

    February 28, 2011

    Fantastic article that has now put me behind schedule after I followed the links and explored the various typefaces mentioned. Some are truly beautiful. And your “how-to” with the ligatures is right on the mark as well. It is so amazing how many truly beautiful and artist typefaces are out there, waiting for book designers and artists to rediscover and enjoy — thanks for pointing some of them out to us.

    Well done.

  • Tutorial Lounge says:

    March 1, 2011

    excellent idea.

  • designi1 says:

    March 1, 2011

    Fantastic article about ligatures. Im pretty sure they can be very exciting using them more on quotes and titles.

  • Ali Qayyum says:

    March 1, 2011

    thanks for wounderful tutorial