Font variants
font-variant-ligatures
Utilities for controlling ligatures and contextual forms.
| Class | Properties |
|---|---|
common-ligatures
|
--ot-liga: common-ligatures; font-variant-ligatures: var(--ot-liga) var(--ot-dlig) var(--ot-calt); |
no-common-ligatures
|
--ot-liga: no-common-ligatures; font-variant-ligatures: var(--ot-liga) var(--ot-dlig) var(--ot-calt); |
discretionary-ligatures
|
--ot-dlig: discretionary-ligatures; font-variant-ligatures: var(--ot-liga) var(--ot-dlig) var(--ot-calt); |
no-discretionary-ligatures
|
--ot-dlig: no-discretionary-ligatures; font-variant-ligatures: var(--ot-liga) var(--ot-dlig) var(--ot-calt); |
contextual
|
--ot-calt: contextual; font-variant-ligatures: var(--ot-liga) var(--ot-dlig) var(--ot-calt); |
no-contextual
|
--ot-calt: no-contextual; font-variant-ligatures: var(--ot-liga) var(--ot-dlig) var(--ot-calt); |
¶Usage
Use the font-variant-ligatures utilities to enable ligatures and contextual forms in textual content. Each setting can be disabled by prefixing the class with no-.
¶Examples
¶Common ligatures liga
Most common ligatures mitigate spacing issues between specific combinations of letters within a typeface, often by connecting glyphs that might otherwise collide. Common ligatures are usually enabled by default in fonts that support them, and can be disabled if needed.
fi ff fl ffi Th
fi ff fl ffi Th
<p class="no-common-ligatures">fi ff fl ffi Th</p>¶Discretionary ligatures dlig
Discretionary ligatures’ defining characteristic is that they are available to enable at your discretion: they are disabled by default. Often, these are additional ligatures that might be considered too attention-grabbing or unconventional to be enabled in many situations.
ct sp st
ct sp st
<p class="discretionary-ligatures">ct sp st</p>¶Contextual alternates calt
Like ligatures (though not strictly a ligature feature), contextual alternates are commonly used to harmonize the shapes of glyphs with the surrounding context. This feature is also enabled by default, except in Chrome, and cannot be disabled in Safari.
The bloom has gone off the rose
The bloom has gone off the rose
<p class="contextual">The bloom has gone off the rose</p>¶Stacking multiple utilities
These utilities are composable so you can enable multiple font-variant-ligatures features by combining multiple classes in your HTML:
<p class="discretionary-ligatures no-contextual">Lorem ipsum...</p>