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";

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

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.