CSS font-variant-ligatures Property

The font-variant-ligatures property controls the ligatures and contextual forms that produce more harmonized forms.

This property is specified by the following values:

  • normal
  • none
  • <common-lig-values>
  • <discretionary-lig-values>
  • <historical-lig-values>
  • <contextual-alt-values>
Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.fontVariantLigatures = "normal";

Syntax

font-variant-ligatures: normal | none |  <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;

Example of the font-variant-ligatures property:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div {
      font-family: Lora, serif;
      font-size: 35vw;
      }
      .gray {
      font-variant-ligatures: no-common-ligatures;
      color: #ccc;
      }
      .blue {
      font-variant-ligatures: common-ligatures;
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-ligatures property example</h2>
    <div>
      <span class="gray">fi</span>
      <span class="blue">fi</span>
    </div>
  </body>
</html>

Result

Types of ligatures

There are multiple types of ligatures recognized by the CSS. These ligatures are aligned with the widely used OpenType format. We are going to go through each one.

Common ligatures

These ligatures are mostly used when the characters "hit" each other. This makes the text harder and uncomfortable to read. As an example, we can take the combination of the lowercase "i" and "f" letters. Enabling the ligatures will join these two letters together making them easier for reading. The CSS enables common ligatures, by default. But you can manually enable or disable them like this:

/* Enable common ligatures */
font-variant-ligatures: common-ligatures;
​
/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;

Discretionary ligatures

Discretionary ligatures, also called decorative ligatures, are more used as decoration. In fact, they are not designed for reading them. These ligatures are disabled by CSS, by default, and are extra optional. This means that you can enable them when you want. Enabling or disabling the discretionary ligatures is done like this:

/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;
​
/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;

Historical ligatures

Historical ligatures are designed for decoration purposes, too. You can enable or disable them using the code below:

/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;
​
/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;

Contextual alternates

Contextual alternates are useful for improving the legibility. They provide better joining behaviour the characters making up the ligature. The contextual alternates are especially useful in the case of connected scripts.Due to them, the strokes connect correctly from one character to another, keeping a continuous flow.

Values

Value Description
normal Activation of forms and ligatures depends on the font, language and the kind of script. This is the default value of this property.
none All the ligatures and contextual forms are disabled.
<common-lig-values> Controls all the ligatures.
<discretionary-lig-values> Controls specific ligatures.
<historical-lig-values> Controls ligatures that are used in old books.
<contextual-alt-values> Controls the adaptation of the letters to their context.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

34.0+
31.0 -webkit-
x 21.0+
19.0 -webkit-
9.1+
7.0 -webkit-
21.0+
19.0 -webkit-


Do you find this helpful?

Related articles