CSS font-variant-ligatures

<!doctype html>
<title>Example</title>
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<style>
  div {
    font-family: Lora, serif;
    font-size: 35vw;
    }
  
 .clig-off {
    font-variant-ligatures: no-common-ligatures;
    color: gray;
  }
  
 .clig-on {
    font-variant-ligatures: common-ligatures;
    color: orange;
  }
</style>
<div>
  <span class="clig-off">fi</span>
  <span class="clig-on">fi</span>
</div>

The font-variant-ligatures property is used for controlling ligatures on a font.

In typography, a ligature is a special character that binds two or more characters into one. Ligatures are most commonly used to improve the legibility of the text, but they can also be used purely to give the text a certain "look".

Types of Ligatures

CSS recognizes different types of ligatures. These are aligned with the OpenType format, which is one of the most widely used formats on the web (and computers in general).

Common Ligatures

Also referred to as "standard ligatures", common ligatures replace a sequence of characters with a single ligature glyph.

Common ligatures are typically used in cases where characters bump into each other (or just look plain ugly) when placed next to each other. Such cases can also make the text harder to read, especially at smaller text sizes.

For example, the combination of lowercase "f" and "i" often causes problems, due to the hook and/or crossbar of the "f", and the dot of the "i". The dot of the "i" tends to get in the way of the hook of the "f". Even if they don't actually collide, they can still reduce the legibility of the text. When ligatures are enabled, these two characters are joined into one, and together they become easier to read. But even in cases where legibility isn't an issue, common ligatures tend to improve the look of the text and give it a smoother, continuous feel.

Common ligatures are enabled by default in CSS. However, you can explicitly enable/disable them like this:

Discretionary Ligatures

Discretionary ligatures, also referred to as "decorative ligatures", are usually done for purely decorative purposes than for legibility. They're designed to be ornamental, and not specifically designed for readability.

You'll often see discretionary ligatures used on sequences such as "ct", "st", "Th", and "sp".

Example of discretionary ligatures. — Discretionary ligatures are sometimes applied to two or more characters to add a fancy touch whenever those characters meet.

Discretionary ligatures are an optional extra — you need to enable them if you want to use them. This is because, in most situations, discretionary ligatures aren't appropriate. Discretionary ligatures are typically used very sparsely. You should generally be careful with where you use decorative ligatures, as they can change the look of the text quite considerably. In other words, they are to be used at your discretion (hence the term discretionary ligatures).

As mentioned, discretionary ligatures are disabled by default in CSS. Here's the code for enabling/disabling them:

Historical Ligatures

Historical ligatures are obsolete ligatures to be applied at the user's discretion. Historical ligatures are designed to be historical, and not specifically designed for readability.

You can enable/disable historical ligatures like this:

Contextual Alternates

A contextual alternate is a glyph designed to work in the context of its adjacent glyphs. Contextual alternates are designed to enhance readability by providing better joining behavior between the characters that make up the ligature. They can be particularly useful when using connected scripts, as they can help the strokes connect properly from one character to the next, while keeping a natural, continuous flow.

You can explicitly enable/disable contextual alternates like this:

Syntax

The syntax of the font-variant-ligatures property is:

These values are explained in more detail below.

Possible Values

normal

Specifies that common default features are enabled. For OpenType fonts, common ligatures and contextual forms are on by default, discretionary and historical ligatures are not.

none

Specifies that all types of ligatures and contextual forms covered by this property are explicitly disabled.

common-lig-values

Specifies whether common ligatures (OpenType features: liga, clig) are enabled or not. This can be one of the following values:

common-ligatures: Enables display of common ligatures. For OpenType fonts, common ligatures are enabled by default.
no-common-ligatures: Disables display of common ligatures.

discretionary-lig-values

Specifies whether discretionary ligatures (OpenType feature: dlig) are enabled or not. This can be one of the following values:

discretionary-ligatures: Enables display of discretionary ligatures. Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary.
no-discretionary-ligatures: Disables display of discretionary ligatures.

historical-lig-values

Specifies whether historical ligatures (OpenType feature: hlig) are enabled or not. This can be one of the following values:

historical-ligatures: Enables display of historical ligatures.
no-historical-ligatures: Disables display of historical ligatures.

contextual-alt-values

Specifies whether contextual alternates are enabled or not (OpenType feature: hlig). This can be one of the following values:

contextual: Enables display of contextual alternates.
no-contextual: Disables display of contextual alternates.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: normal
Applies To: All elements
Inherited?: Yes
Media: Visual
Animatable?: No

Example Code

Official Specifications

CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.