Caring about OpenType features

In this lesson, we’ll learn what OpenType features are, when to use them, and why they matter.

More than fancy swashes and superfluous ligatures, OpenType features are font superpowers. The best, most capable typefaces are full of sophisticated reasoning and delightful surprises — things that are often integral to the design of the type itself, or that help it work better for specific typesetting tasks. Using OpenType features is easy when you know they exist, are enabled, and are supported in browsers and applications.

The real challenge is knowing when (and why) to care about features, and deciding which ones matter most for the work you’re doing. There are more than 100 OpenType features! But you needn’t worry about all of them, all of the time; instead, care about the important ones at the right times. Let’s check out a few features that should be enabled by default, and then look at scenarios (body text, display text, and data) where specific features can help make our work more successful.

Features that always matter

Some OpenType features matter so much that they should be enabled by default in browsers and applications. But because browser and application support is not perfectly consistent, we need to make sure that these features are on by explicitly enabling them: kerning, common/standard ligatures, contextual ligatures, and contextual alternates.

font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
-moz-font-feature-settings: "kern", "liga", "clig", "calt";
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
font-feature-settings: "kern", "liga", "clig", "calt";
Apply these features to every bit of text. Remember to account for inheritance so the values aren’t overridden.

But why do these features always matter? What do they do?

Kerning

Above: There’s too much space between the ‘T’ and ‘r’, and not enough between the ‘r’ and ‘y’. Below: OpenType kerning is enabled, so the space between letters looks good.

Kerning is an adjustment to the amount of space between two specific glyphs. Type designers often put these adjustments (called kerning instructions) into the OpenType kerning feature, so it is very important that this feature be enabled. Spacing adjustments are as much a part of the design of a typeface as the glyphs themselves.

You might know kerning as something graphic designers do, and it is. Manual kerning done by graphic designers should be additive, using a font’s built-in kerning as the starting point. Make sure that any manual adjustments you make don’t break a font’s built-in kerning. (For example, be careful when styling individual characters.)

Common/standard ligatures

Left to right: Bookmania, Futura PT, and Source Sans, each showing ‘f’ and ‘i’ glyphs without – and then with – common/standard ligatures enabled. Note that Bookmania’s ligature resolves the spacing tightness between the ordinary ‘f’ and ‘i’ glyphs. Futura PT’s ligature does not resolve any such spacing issue, and could even be characterized as unnecessary (or discretionary). Source Sans, like Futura PT, needs no ‘fi’ ligature — so its common/standard ‘fi’ ligature looks identical to the ordinary ‘f’ and ‘i’ glyphs.

Common/standard ligatures (the liga feature) exist to resolve spacing problems in a sequence of glyphs (for example, when an ‘f’ crashes into the dot of an ‘i’) by replacing the glyphs with a single glyph — a more elegant combination of the letterforms. Contextual ligatures (the clig feature) do this in the context of specific surrounding glyphs. These features are absolutely necessary for good typography, and should be enabled by default. That said, it should also be possible to disable them (this is currently not possible in some browsers), because some typefaces have unnecessarily distracting common/standard ligatures that should be discretionary.

Contextual alternates

Caflisch Script. Above: Default glyphs. Below: Contextual alternates — ‘o’ alternates with connecting strokes, and an ‘r’ and ‘m’ that feel more appropriate for the beginnings and ends of words, respectively.

The contextual alternates (calt) feature replaces default glyphs with alternate glyphs that perform better in specific situations. This feature is particularly useful in script typefaces, where glyphs are often meant to join. Consider it critical, because it indicates the contexts in which the designer of your typeface decided the default glyphs don’t work as well. Decisions like these are as much a part of the design of a typeface as the shapes of the default glyphs themselves.

Features for body text

Readers don’t like to be interrupted. It can be very distracting when certain shapes dominate body text, like strings of tall numbers or capital letters, and it can be jarring when glyphs crash into other glyphs. By implementing common (standard) ligatures, small caps, and proportional, oldstyle figures, we can reduce interruptions to the reading flow and improve the look and feel of body text.

Wait a minute! You’re not seeing everything...

The example below illustrates OpenType features (common/standard ligatures number styles small caps) that your browser doesn’t yet support. You may want to switch to a different browser. You may also want to ask the folks who work on this browser for better OpenType feature support.

Features for display text

Display typography is designed to attract attention. It invites readers in, encourages people to take action, and has a strong effect on brand awareness. In these situations, we welcome more exuberant OpenType features and pay close attention to the shapes of specific glyphs.

Wait a minute! You’re not seeing everything...

The example below illustrates OpenType features (discretionary ligatures swashes number styles stylistic alternates stylistic sets) that your browser doesn’t yet support. You may want to switch to a different browser. You may also want to ask the folks who work on this browser for better OpenType feature support.

Features for data

Data demands its own kind of typesetting, easily scannable and with a focus on legibility. Make sure that numbers align properly by enabling tabular figures. Provide background information with superscript footnotes. Use other features like fractions, ordinals, stylistic alternates, and stylistic sets to save space and make a variety of data evident at a glance.

Wait a minute! You’re not seeing everything...

The example below illustrates OpenType features (number styles fractions superscript subscript) that your browser doesn’t yet support. You may want to switch to a different browser. You may also want to ask the folks who work on this browser for better OpenType feature support.

Exercises

Let’s practice. Here are a few things to try: