In recent years we have seen a huge increase in the capabilities of web typography, from the release of the @font-face feature to the launch of web-font hosting specialists such as Typekit and Fontdeck, among others. We have also seen an exciting increase in web-fonts with OpenType features and increasing support for these across major browsers too, which is the main focus of this article.

This article expands on topics covered in two previous articles on the Type & Music website, Ligatures^[1] and Numerals, Capitals & Small Caps^[2].

OpenType features can be used to enhance web typography in the browser by enabling Ligatures, Numerals and Small Caps, which are the focus of this article.

It’s important to note that support for OpenType fonts and support for OpenType features are two different things. OpenType fonts are supported in more recent versions of all major browsers, whereas support for OpenType features is only available in FireFox v4+, ie 10 preview and Chrome 15+ as of the writing of this (7^th August 2013).

There are also two levels of control available in the CSS3 font specification, these are high level support font-variant and low level support font-feature-settings, but so far only the low level attribute is supported by the browsers mentioned above, but I will provide samples of both throughout.

OpenType CSS Specifications

There are many different features to implement with the latest specification^[3]. I’ll be covering the most common features that I’ve mentioned in previous articles, but the rest are in principle the same.

Ligatures

High-level Syntax

font-variant-ligatures: common-ligatures;
font-variant-ligatures: no-common-ligatures;

font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: no-discretionary-ligatures;

In samples above you can see the code to activate (common-ligatures/discretionary-ligatures) and to deactivate ligatures (no-common-ligatures/no-discretionary-ligatures).

Low-level Syntax

-moz-font-feature-settings: “liga=1”, “dlig=1”;
-web-kit-font-feature-settings: “liga” on, “dlig”;
-o--font-feature-settings: “liga”, “dlig”;
font-feature-settings: “liga” on, “dlig”;

This would enable standard (lig) and discretionary ligatures (dlig) on your website. At present we still need to rely on vendor prefixes and although Opera at present does not support such features, it is wise to include it anyway for when they eventually do begin to offer support.

Small Caps

To enable small caps on your website you can use the following code.

High-level Syntax

font-variant-caps: small-caps;

Low-level Syntax

-moz-font-feature-settings: 'smcp=1';
-ms-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
-o-font-feature-settings: "smcp";
font-feature-settings: “smcp;

Numerals

To enable Old-style numerals use the following code.

High-level syntax

font-variant-numeric: oldstyle-nums;

Low-level Syntax

-moz-font-feature-settings: “onum=1”;
-ms-font-feature-settings: “onum”;
-webkit-font-feature-settings: “onum”;
-o-font-feature-settings: “onum”;
font-feature-setting: “onum”

To enabling lining figures, use the following code.

High-level syntax

font-variant-numeric: lining-nums;

Low-level Syntax

-moz-font-feature-settings: “lnum=1”;
-ms-font-feature-settings: “lnum”;
-webkit-font-feature-settings: “lnum”;
-o-font-feature-settings: “lnum”;
font-feature-settings: “lnum”;

To enable tabular figures use the following code.

High-level Syntax

font-variant-numeric: tabular-nums;

Low-level Syntax

-moz-font-feature-settings: “tnum=1”;
-ms-font-feature-settings: “tnum”;
-webkit-font-feature-settings: “tnum”;
-o-font-feature-settings: “tnum”;
font-feature-settings: “tnum”;

As previously mentioned there is limited support for these features amongst browsers at present, but it would be smart to set everything in place now, so that when they do become available, you’ll already have everything you need in place.

At present there are alternatives to the lack of support. Monotype have released a beta version of their new cloud technology solution through fonts.com^[4]. This service takes information from the GSUB(glyph substitution table) table and complies it into javascript code that can be implemented by any browser with it enabled.