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;
}

Example Usage with Related Properties

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+

Related Properties

`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!

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-background-color.png

CSS Background-Color Enhance Your Web Design Learn how to use CSS background-color to enhance your web design. Discover available options like named colors, hexadecimal values, RGB, RGBA, HSL, HSLA, and more.

css_property_cover/css-property-color.png

CSS Color Enhancing Web Design with Colorful Text Learn about CSS color property, its use cases, and available options such as named colors, hexadecimal, RGB, and HSL values. Simplify and enhance your web design.

css_property_cover/css-property-font-kerning.png

CSS Font-Kerning Enhancing Text Readability CSS font-kerning improves text readability and visual appeal by adjusting character spacing. Available options include auto, normal, and none for better typography.

css_property_cover/css-property-font-size.png

CSS Font-Size Mastering Text Sizes Learn how to use CSS font-size to control text sizes on webpages. Explore available options like pixels, ems, rems, and percentages for responsive design.

css_property_cover/css-property-font-stretch.png

CSS Font-Stretch Adjust Text Width Easily Discover the CSS font-stretch property to adjust text width. Use keywords like normal, condensed, or expanded, and percentages from 50% to 200%.

css_property_cover/css-property-font-variant-alternates.png

CSS Font-Variant-Alternates Enhance Web Typography Learn how to use CSS font-variant-alternates to enhance web typography. This property allows you to control alternate glyphs such as stylistic sets, swashes, ornaments, and annotations.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms