Ligatures in OpenType Fonts: A Web Developer’s Guide

Using ligatures in CSS: An Overview

A ligature is a combination of one or more letters into a single glyph. A type designer will create ligatures when specific letter combinations collide into each other.

For example, with the combination fi, the dot of the lowercase i will often collide with the terminal at the top of the lowercase f. Many typefaces have ligatures that combine these two letters.

Common ligatures (OpenType feature liga) and contextual alternates (calt) are turned on by default in web browsers, but they can be turned off if you have the need. Common ligatures can include fi, fl, ft, ff, Th, and more, depending on the typeface.

There are also other types of ligatures that are considered discretionary and could used for decorative purposes. Some ligatures are archaic and would be useful for reproducing historical texts.

How to turn on ligatures in CSS

Whatever your typographic needs are, the CSS property to control the display of ligatures is font-variant-ligatures. Common ligatures and contextual alternates are activated by default in most browsers, while other ligatures are off by default. The initial value of this property is normal.

This property allows you to turn on and off different types of ligatures by combining different values separated by spaces. For example, font-variant-ligatures: no-common-ligatures discretionary-ligatures will turn off common ligatures and enable discretionary ligatures.

The one exception to the features in this article is case-sensitive forms, which uses the font-feature-settings property.

Common or standard ligatures

CSS property: font-variant-ligatures: common-ligatures or no-common-ligatures
OpenType property: liga

Common ligatures – also referred to as standard ligatures in OpenType – are enabled by default. A large number of typefaces include ligatures, although they may be less obvious at small font sizes. Many ligatures involve the lowercase f, such as fi, fl, ff, ft, and fj. Occasionally, typefaces might have ligatures for pairings with uppercase characters, such as Th and Qy.

If you prefer the look of a particular typeface without ligatures, you can disable them with no-common-ligatures.

List of fonts with standard ligatures

Contextual alternates

CSS property: font-variant-ligatures: contextual or no-contextual
OpenType property: calt

Contextual alternates aren’t really a type of ligature, but rather alternate glyphs or spacing that depend on the context of the characters. For example, take a look at how Barrio, a playful display typeface, changes the shape of these pairs with contextual alternates enabled:

Another example is Cormorant, which substitutes an elongated tail in uppercase Q when paired with certain letters. (Notice how the extended tail appears when paired with lowercase u, but not i.) The hyphen in Cormorant also has a different position when placed between uppercase letters.

Contextual alternates is a relatively rare feature that is generally enabled by default in browsers. Note: the font library in CSS Type Studio lists families that support contextual alternates, but does not show the actual substitutions because parsing the context-dependent rules that enable their display is complicated.

List of fonts with contextual alternates

Discretionary ligatures

CSS property: font-variant-ligatures: discretionary or no-discretionary
OpenType property: dlig

Discretionary ligatures are often more decorative in nature and are not enabled by default in browsers. EB Garamond has several examples:

Baskervville has an unusual discretionary ligature for the letter combination “www”:

List of fonts with discretionary ligatures

Case-Sensitive Forms

CSS property: font-feature-settings: 'case' 1
OpenType property: case

The case-sensitive forms feature makes various adjustments to improve the appearance of glyphs alongside uppercase text. This can involve position changes or switching from oldstyle to lining figures.

With Baskerville, lining figures are substituted for oldstyle figures. The position of hyphens and dashes is also shifted to better align with the vertical midpoint of the uppercase characters.

Note that the low-level CSS property font-feature-settings is used to activate case-sensitive forms. As with contextual alternates, the CSS Type Studio library will list when a typeface supports this feature, but does not show you the glyphs that are changed. One practice you can use is to enable case on your classes or elements with which you plan to use uppercase characters. For example:

h1 { font-feature-settings: 'case' 1; }

List of fonts with case-sensitive forms