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

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

Kerning

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

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

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.

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.

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.

Exercises

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

• In one of the examples above, toggle OpenType features off. Next, continue on CodePen and add relevant features manually. Refer to the lesson as needed.
• In one of the examples above, toggle OpenType features on. Next, continue on CodePen but try using a different typeface. Make sure that whichever font you’re using has the OpenType features you need. Here’s more information on using Typekit with CodePen. Share what you make on CodePen.
• Try implementing OpenType features in your own work. Focus on features that are appropriate for your typographic needs. Remember to make sure the features exist, are enabled, and are supported in browsers you care about. Ask us anything, on Twitter or by sending us a note.