rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Font-Variant-Ligatures Enhancing Typography

Discover CSS font-variant-ligatures for enhancing text aesthetics.

Control common, discretionary, historical ligatures, and more for professional web design.

Introduction

The CSS font-variant-ligatures property controls the use of ligatures and contextual forms in text. It is widely supported across browsers and devices, making it a reliable tool for web developers and designers to create polished and professional-looking text.

Specification

The font-variant-ligatures property is part of the CSS Fonts Module Level 4, which standardizes the use of ligatures and contextual forms in web text.

Syntax

/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;
font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: no-discretionary-ligatures;
font-variant-ligatures: historical-ligatures;
font-variant-ligatures: no-historical-ligatures;
font-variant-ligatures: contextual;
font-variant-ligatures: no-contextual;

/* Multiple keyword values */
font-variant-ligatures: no-contextual common-ligatures;
font-variant-ligatures: common-ligatures no-discretionary-ligatures historical-ligatures contextual;

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

Values

normal: Activates usual ligatures and contextual forms.
none: Disables all ligatures and contextual forms.
common-ligatures: Activates common ligatures like fi, ffi, etc.
no-common-ligatures: Deactivates common ligatures.
discretionary-ligatures: Activates specific ligatures defined by the font designer.
no-discretionary-ligatures: Deactivates discretionary ligatures.
historical-ligatures: Activates historical ligatures.
no-historical-ligatures: Deactivates historical ligatures.
contextual: Activates contextual alternates.
no-contextual: Deactivates contextual alternates.

Global Values

inherit: Inherits the value from the parent element.
initial: Sets the value to its initial default.
revert: Reverts the value to the default specified by the user agent.
revert-layer: Reverts the value to the default for the current layer.
unset: Resets the value to its natural value.

Examples

Common Ligatures vs. No Common Ligatures

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            font-size: 2em;
            font-family: serif;
        }
        .off {
            font-variant-ligatures: no-common-ligatures;
            color: rgb(83, 241, 21);
        }
        .on {
            font-variant-ligatures: common-ligatures;
            color: rgb(96, 153, 4);
        }
    </style>
</head>
<body>
    <h1>Common Ligatures Example</h1>
    <div>
        <span class="off">wifi</span>
        <span class="on">wifi</span>
    </div>
</body>
</html>

CSS

div {
    font-size: 2em;
    font-family: serif;
}
.off {
    font-variant-ligatures: no-common-ligatures;
    color: rgb(83, 241, 21);
}
.on {
    font-variant-ligatures: common-ligatures;
    color: rgb(96, 153, 4);
}

Discretionary Ligatures

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            font-family: serif;
            font-size: 1.5em;
        }
        .discretionary {
            font-variant-ligatures: discretionary-ligatures;
        }
    </style>
</head>
<body>
    <h1>Discretionary Ligatures Example</h1>
    <p class="discretionary">
        discretionary-ligatures<br />
        if fi ff tf ft jf fj
    </p>
</body>
</html>

CSS

p {
    font-family: serif;
    font-size: 1.5em;
}
.discretionary {
    font-variant-ligatures: discretionary-ligatures;
}

Font Variant Ligatures Examples

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
    <style>
        p {
            font-family: Lora, serif;
            font-size: 1.5em;
        }
        .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;
        }
    </style>
</head>
<body>
    <h1>Font Variant Ligatures Examples</h1>
    <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>
</body>
</html>

CSS

p {
    font-family: Lora, serif;
    font-size: 1.5em;
}
.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;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            font-variant: small-caps;
            font-variant-ligatures: common-ligatures;
        }
        p {
            font-variant-caps: petite-caps;
            font-variant-numeric: oldstyle-nums;
        }
        .emoji {
            font-variant-emoji: emoji;
        }
    </style>
</head>
<body>
    <h1>Small Caps with Ligatures</h1>
    <p>Petite Caps with Oldstyle Numbers: 1234567890</p>
    <p class="emoji">Emoji Characters: 😊 👍 🎉</p>
</body>
</html>

CSS

h1 {
    font-variant: small-caps;
    font-variant-ligatures: common-ligatures;
}
p {
    font-variant-caps: petite-caps;
    font-variant-numeric: oldstyle-nums;
}
.emoji {
    font-variant-emoji: emoji;
}

Browser Compatibility

The font-variant-ligatures property is widely supported across modern browsers.

Supported Browsers

Google Chrome: Since version 34
Firefox: Since version 34
Safari: Since version 9.1
Opera: Since version 21
Edge: Since version 79

Browser Compatibility Table

Browser	Version
Google Chrome	34+
Firefox	34+
Safari	9.1+
Opera	21+
Edge	79+

`font-variant`

A shorthand property for setting multiple font variant properties.

font-variant: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | initial | inherit;

`font-variant-caps`

Controls the use of small capitals and other capitalization styles.

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | initial | inherit;

`font-variant-emoji`

Controls the rendering of emoji characters.

font-variant-emoji: normal | text | emoji | unicode | initial | inherit;

`font-variant-east-asian`

Controls the rendering of East Asian text.

font-variant-east-asian: normal | jis78 | jis83 | jis90 | jis04 | simplified | traditional | full-width | proportional-width | ruby | initial | inherit;

`font-variant-numeric`

Controls the rendering of numeric characters.

font-variant-numeric: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions | initial | inherit;

`font-variant-position`

Controls the positioning of characters, such as subscript and superscript.

font-variant-position: normal | sub | super | initial | inherit;

`font-feature-settings`

Allows you to enable or disable specific OpenType font features.

font-feature-settings: normal | "feature-tag" on | "feature-tag" off | initial | inherit;

Conclusion

The font-variant-ligatures property is a powerful tool for controlling ligatures and contextual forms in text. Along with related properties like font-variant, font-variant-caps, and font-variant-numeric, you can enhance your typography to create polished and professional web designs.

By understanding and using these properties effectively, you can ensure your web design projects are visually appealing and functional across different devices and browsers. Keep testing and stay informed about updates to make the most of these typographic features.

Happy coding!