1. css
  2. /properties
  3. /font-variant-ligatures

font-variant-ligatures

Definition

The font-variant-ligatures property controls the use of ligatures, which are typographic features that combine two or more letters into a single glyph, for a given font family and style.

Examples

Disable common ligatures for the h1 element:

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

Enable discretionary ligatures for the p element:

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

Enable all ligatures for the blockquote element:

blockquote {
  font-variant-ligatures: all;
}

Values

ValueDescription
normalSpecifies the default use of ligatures for the font
noneDisables all ligatures for the font
common-ligaturesEnables common ligatures, such as fi, fl, and ff
no-common-ligaturesDisables common ligatures
discretionary-ligaturesEnables discretionary ligatures, which are used for aesthetic or decorative purposes
no-discretionary-ligaturesDisables discretionary ligatures
historical-ligaturesEnables historical ligatures, which are used for traditional or classical typography
no-historical-ligaturesDisables historical ligatures
contextualEnables contextual ligatures, which are used for specific sequences of characters
no-contextualDisables contextual ligatures
allEnables all possible ligatures
<feature-value>Enables a specific set of ligatures for the font, such as common-ligatures, discretionary-ligatures, historical-ligatures, contextual, or historical-forms
initialSets the property to its default value
inheritInherits the property from its parent element

Best Practices

  • Use font-variant-ligatures to control the use of ligatures for better legibility and readability of text, especially for smaller font sizes and long blocks of text.
  • Choose ligature settings that are appropriate for the specific language and script used in your content, as different languages and scripts may have different typographic conventions and requirements.
  • Be aware that not all fonts support all ligature types or feature values, so test your font choices and settings on different devices and browsers to ensure consistent rendering.
  • Consider using fallback fonts and feature values for greater compatibility and consistency across different devices and platforms.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes