Dublin Library

The Publishing Project

Open Type Features in CSS

  • 3 min. read

 

I've been playing a little with Open Type font variations (and their CSS equivalents) for a few weeks now and I've revisited a few areas I had played with before and left because, at the time, I didn't see the need or usefulness.

That said, there are projects where good typography is just as important than size, line height, and other basic elements. In this essay, we'll look at some less common features of OpenType fonts and how to use them in CSS, both the original specification using font-feature-settings and the newer version using font-variants-*. We'll also look at ways to DRY our code and keep ourselves from repeating code.

CSS Fonts Module Level 3 defines the set of OpenType features supported by spec-compliant browsers

Older browsers may support a font-feature-settings, a lower level syntax to control access to the OpenType features.

To cover all our bases we'd have to do something like this:

.liga {
  @supports not (font-variant-ligatures: common-ligatures) {
    font-feature-settings: "liga";
  }

  /* IE doesn’t support @supports; explicitly use the prefixed version. */
  -ms-font-feature-settings: "liga";

  /* Best case scenario, just use `font-variant-*`. */
  font-variant-ligatures: common-ligatures;
}

We test if the browser does not support font feature settings. If it doesn't we fall back to font feature settings for ligatures.

Because neither Edge nor IE supports the @supports command. Because of this, we need to add the Microsoft specific version.

The final case uses font-variant-ligatures.

A more elegant, and effortless, solution is to use the Utility OpenType library from Kenneth Normandy that takes a slightly different approach to use the different supported way of doing things.

It sets up the default values and then tests if either the webkit- or the regular value for font-variant-ligatures are not supported and if the tests fail (meaning they are supported) it changes the support to use font-feature-settings and the WebKit prefixed version.

.liga {
  -ms-font-feature-settings: "liga";
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
}

@supports not ((-webkit-font-variant-ligatures: common-ligatures) or
              (font-variant-ligatures: common-ligatures)) {
  .liga {
    -webkit-font-feature-settings: "liga", "liga", "clig";
    font-feature-settings: "liga", "liga", "clig";
  }
}

Wakamaifondue provides both a visual demonstration of all the features a font supports, whether they are Variable Font Axes or Open Type features and a CSS stylesheet that you can incorporate into your own projects to take advantage of these features.

Utility OpenType provides classes for OpenType features reducing the cognitive load of having to know how to use each feature. You're still required to know if the font supports the features you want to use.

Using these features in combination with variable fonts that support the OpenType features we need gives us a lot of flexibility when it comes to typography.

Edit on Github