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
| Value | Description |
|---|---|
normal | Specifies the default use of ligatures for the font |
none | Disables all ligatures for the font |
common-ligatures | Enables common ligatures, such as fi, fl, and ff |
no-common-ligatures | Disables common ligatures |
discretionary-ligatures | Enables discretionary ligatures, which are used for aesthetic or decorative purposes |
no-discretionary-ligatures | Disables discretionary ligatures |
historical-ligatures | Enables historical ligatures, which are used for traditional or classical typography |
no-historical-ligatures | Disables historical ligatures |
contextual | Enables contextual ligatures, which are used for specific sequences of characters |
no-contextual | Disables contextual ligatures |
all | Enables 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 |
initial | Sets the property to its default value |
inherit | Inherits 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |