CSS - font-variant-ligatures Property

The font-variant-ligatures property in CSS is used to control the use of ligatures in text. Ligatures are artistic letter combinations used in some typefaces to improve legibility and aesthetics. This property allows you to enable or disable specific types of ligatures in text.

Possible Values

  • normal: Default value, allowing ligatures to be used as defined by the font.

  • none: All ligatures and contextual forms are disabled.

  • <common-lig-values>: Enables commonly required ligatures, such as fi, ffi, th or similar. Corresponds to OpenType values liga and clig.

    • common-ligatures: Activates the above mentioned ligatures.

    • no-common-ligatures: Deactivates the above mentioned ligatures.

  • <discretionary-lig-values>: Controls specific ligatures. Corresponds to OpenType value dlig.

    • discretionary-ligatures: Activates the above mentioned ligatures.

    • no-discretionary-ligatures: Deactivates the above mentioned ligatures.

  • <historical-lig-values>: Controls the historical ligatures. Corresponds to OpenType value hlig.

    • historical-ligatures: Activates the above mentioned ligatures.

    • no-historical-ligatures: Deactivates the above mentioned ligatures.

  • <contextual-alt-values>: Enables contextual ligatures, which depend on the surrounding characters. Corresponds to OpenType value calt.

    • contextual: Activates the above mentioned ligatures. Keyword normal also activates these ligatures.

    • no-contextual: Deactivates the above mentioned ligatures.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariantLigatures = "normal | none | <common-lig-values>";

CSS font-variant-ligatures - Basic Example

Here is an example:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto Mono">
<style>
   p {
      font-family: "Roboto Mono", serif;
   }
   .normal {
      font-variant-ligatures: normal;
   }

   .none {
      font-variant-ligatures: none;
   }

   .com-lig {
      font-variant-ligatures: common-ligatures;
   }

   .no-com-lig {
      font-variant-ligatures: no-common-ligatures;
   }

   .disc-lig {
      font-variant-ligatures: discretionary-ligatures;
   }

   .no-disc-lig {
      font-variant-ligatures: no-discretionary-ligatures;
   }

   .hist-lig {
      font-variant-ligatures: historical-ligatures;
   }

   .no-hist-lig {
      font-variant-ligatures: no-historical-ligatures;
   }

   .context {
      font-variant-ligatures: contextual;
   }

   .no-context {
      font-variant-ligatures: no-contextual;
   }
</style>
</head>
<body>
   <p class="normal">
      normal - if fi ff tf ft jf fj
   </p>
   <p class="none">
      none - if fi ff tf ft jf fj
   </p>
   <p class="com-lig">
      common-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="no-com-lig">
      no-common-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="disc-lig">
      discretionary-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="no-disc-lig">
      no-discretionary-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="hist-lig">
      historical-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="no-hist-lig">
      no-historical-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="context">
      contextual - if fi ff tf ft jf fj
   </p>
   <p class="no-context">
      no-contextual - if fi ff tf ft jf fj
   </p>
</body>
</html>

Note: Change the font-family to another value and observe the change.

Advertisements