Now CSS stylesheets and browser implementations enable advanced typography properties. We can use in particular font ligatures. Theses font features are enabled in a lot of good quality web fonts and they allow us to use alternative and decorative styles on characters and on group of characters. This article is a quick tip with Sass mixins I’ve written and recently used on a lot of my projects to enable ligatures on web fonts.

Ligature types in CSS

There are several ligatures types in typography and available in CSS. In this article I’m going to cover only the three main types. Browser support is quite good, from Internet Explorer 10, Firefox 26, Chrome 31, Safari 7, and Safari on iOS 7. On other browsers they simply do nothing at all. So nothing is broken! It’s just progressive enhancement.

Common ligatures

Even if they are unnoticed by the untrained eye we can see a lot of common ligatures in print design. Basically they associate letters to smooth the global appearance of a text and enhance readability.

Common ligatures

The CSS keyword for this kind of common ligatures is liga. Notice how the letters f and i are linked.

Discretionary ligatures

I must say I love the esthetics of theses ligatures. They could add a distinctive and refined style to headings for example.

Discretionary ligatures

In CSS this kind of ligatures is dlig. Notice how the two letters f are linked and the special link between the c and the i.

Old style numerals

They preserve the rythm of a text block with numbers inside phrases and improve readability. I like using them on dates for example.

In CSS these ligatures are written onum.

Sass Mixins

If I give nothing as parameters the three ligatures types are enabled. This is a quick reminder in my own code. Otherwise I’ll set the arguments as font features. The argument $features... is used for a variable number of arguments in Sass mixins.

@mixin font-feature($features...) {
    $font-feature-settings: "liga", "dlig", "onum";

    @if length($features) > 0 {
        $font-feature-settings: $features;
    }

    -webkit-font-feature-settings: $font-feature-settings;
    -moz-font-feature-settings: $font-feature-settings;
    -ms-font-feature-settings: $font-feature-settings;
    font-feature-settings: $font-feature-settings;
}

Examples

Activate all ligatures:

.selector {
    @include font-feature();
}

Activate only old style numerals:

.selector {
    @include font-feature("onum");
}