CSS font-variant-ligatures Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-variant-ligatures CSS property is used to control the rendering of ligatures in text. Ligatures are special character combinations that are designed to improve the appearance of certain letter pairs in certain typefaces. This property allows you to enable or disable ligatures in fonts that support them. By setting this property to values like normal, none, or common-ligatures, web developers can fine-tune the typographic presentation of text, ensuring that ligatures are used appropriately to enhance readability and aesthetics or disabled when they are not desired for specific design purposes.

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontVariantLigatures

Interactive Demo

font-variant-ligatures: normal;

font-variant-ligatures: no-common-ligatures;

font-variant-ligatures: common-ligatures;

Difficult waffles

Syntax

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

Values

normalA value of '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.
noneSpecifies that all types of ligatures and contextual forms covered by this property are explicitly disabled. In situations where ligatures are not considered necessary, this may improve the speed of text rendering.
<common-lig-values> = [ common-ligatures | no-common-ligatures ]common-ligatures - Enables display of common ligatures (OpenType features: liga, clig). For OpenType fonts, common ligatures are enabled by default.
no-common-ligatures - Disables display of common ligatures (OpenType features: liga, clig).
<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]discretionary-ligatures - Enables display of discretionary ligatures (OpenType feature: dlig). 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 (OpenType feature: dlig).
<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]historical-ligatures - Enables display of historical ligatures (OpenType feature: hlig).
no-historical-ligatures - Disables display of historical ligatures (OpenType feature: hlig).
<contextual-alt-values> = [ contextual | no-contextual ]contextual - Enables display of contextual alternates (OpenType feature: calt). Although not strictly a ligature feature, like ligatures this feature is commonly used to harmonize the shapes of glyphs with the surrounding context. For OpenType fonts, this feature is on by default.
no-contextual - Disables display of contextual alternates (OpenType feature: calt).

Example

HTML

<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />

<p class="normal">

  normal<br />

  if fi ff tf ft jf fj

</p>

<p class="none">

  none<br />

  if fi ff tf ft jf fj

</p>

<p class="common-ligatures">

  common-ligatures<br />

  if fi ff tf ft jf fj

</p>

<p class="no-common-ligatures">

  no-common-ligatures<br />

  if fi ff tf ft jf fj

</p>

<p class="discretionary-ligatures">

  discretionary-ligatures<br />

  if fi ff tf ft jf fj

</p>

<p class="no-discretionary-ligatures">

  no-discretionary-ligatures<br />

  if fi ff tf ft jf fj

</p>

<p class="historical-ligatures">

  historical-ligatures<br />

  if fi ff tf ft jf fj

</p>

<p class="no-historical-ligatures">

  no-historical-ligatures<br />

  if fi ff tf ft jf fj

</p>

<p class="contextual">

  contextual<br />

  if fi ff tf ft jf fj

</p>

<p class="no-contextual">

  no-contextual<br />

  if fi ff tf ft jf fj

</p>

CSS

p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

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

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

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

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

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

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

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

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

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

Result

Editor