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.

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.

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 ligaturesnumber stylessmall 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.

At the University of Michigan’s Hatcher library, the latest expansion to the collection is happening within a 12 × 20 windowless room housing several servers. The digital archivists on the Digital Map Library team are working to scan the library’s entire extensive collection of maps, in order to “bring geographical history into a more modern perspective,” says lead archivist Natalie Bond. “We want the Michigan DML to become the first and best resource for historical maps, and we want it to be accessible to any library in the world.”

High resolution scans create enormous files, usually in the realm of 4,500 megabytes for just the initial layer. The DML team then adds additional layers of metadata and imagery to make the maps interactive — and searchable. “By the time we’re done, each map is made up of hundreds of separate files. If you had to load it all at once on your browser, you’d be waiting all day; it’s around 1,500,000 kb even after some of the image compression. So we’ve developed a way to load the data in a way that’s much easier for people to actually use.”

The library’s collection of over 30,000 original maps is about 40% scanned at this point, by Bond’s estimate. The project is on its second year of funding, with four years approved in total. Bond is already looking beyond that, though. “We’re also talking to groups like the National Archives and NDIIPP (National Digital Information Infrastructure and Preservation Program) about how to make this a wider effort, beyond just the university.”

Enable / disable all features

As you change which features are enabled, the code sample below changes accordingly. Continue on CodePen to edit other aspects of the example, and you’ll pick up right where you left off here.

Common/standard ligatures

Ligatures, which should always be enabled, combine two or more glyphs into one letterform. Common (also called standard) ligatures are designed to resolve spacing issues, like when two glyphs overlap. Enabling ligatures should reduce awkward moments in body text and help readers maintain focus. Toggle this feature on/off.

Small caps

Capital letters in body text draw unnecessary attention. Small caps are small versions of capital letters — proportioned, weighted, and spaced to blend in well with body text. Toggle this feature on/off.

Oldstyle figures

Like strings of capital letters, lining figures stick out in running text. Oldstyle figures may look a little funny on their own, but having the numbers ascend and descend like lowercase letters makes them fit much more naturally in body text. Toggle this feature on/off.

Proportional figures

Many fonts default to tabular figures — meaning the numbers are evenly spaced, horizontally. This is great for tabular data, because columns of numbers line up neatly, but proportional figures are better for body text. The spacing feels more natural. Toggle this feature on/off.

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.

Enable / disable all features

As you change which features are enabled, the code sample below changes accordingly. Continue on CodePen to edit other aspects of the example, and you’ll pick up right where you left off here.

Discretionary ligatures

Discretionary ligatures are unnecessary (unlike standard ligatures) but can be used at your discretion. Like swashes, discretionary ligatures often draw attention, so they can be useful in display situations. Be careful when you adjust letterspacing (as designers often do for display type), because this does not affect the space within ligatures. Toggle this feature on/off.

Swashes

Swashes are amplified versions of glyphs, meant to look stylish. They’re best used in large headings. Swash capitals often look great, and an occasional lowercase swash glyph might be just the touch your heading needs. Try applying swashes on a character-by-character basis, and look to see if there are multiple options for each character. Toggle this feature on/off.

Proportional figures

Proportional figures are shaped and spaced so that numbers look balanced in most settings, and this is especially noticeable in display typography. Be sure that you’re using proportional figures, not tabular figures — which are often enabled by default. Toggle this feature on/off.

Lining figures

Lining figures stand tall like capital letters, and are all aligned on the baseline. They may not always be what you want for display text, but you can see in this example that they work very well in the beauty salon’s all-caps tagline. Toggle this feature on/off.

Stylistic alternates and sets

The way a single glyph looks can be a big deal in display situations. The look of an alternate lowercase ‘a’ in your main heading typeface could make your company or product more memorable. Know which alternate glyphs are available in your font by experimenting with Stylistic Alternates and Stylistic Sets. Toggle this feature on/off.

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 stylesfractionssuperscriptsubscript) 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.

Enable / disable all features

As you change which features are enabled, the code sample below changes accordingly. Continue on CodePen to edit other aspects of the example, and you’ll pick up right where you left off here.

Tabular figures

Tabular figures occupy the same amount of horizontal space, so that numbers in tables will align vertically and make data easier to scan. This is especially helpful when place separator punctuation is involved. See also, Bram Stein’s jQuery Text Alignment Plugin. Toggle this feature on/off.

Tabular figures

Tabular figures occupy the same amount of horizontal space, so that numbers in tables will align vertically and make data easier to scan. This is especially helpful when place separator punctuation is involved. See also, Bram Stein’s jQuery Text Alignment Plugin. Toggle this feature on/off.

Fractions

Fractions clearly and succinctly express parts of a whole number. When it makes sense to express tabular data as fractions, rather than decimals, enable the fractions OpenType feature. This feature turns strings like "1​/2" into proper-looking fractions like "1/2", which make spotting them in the data much easier. Toggle this feature on/off.

Superscript / Subscript

Footnotes are helpful when data needs further explanation, but indicating that they are available should be subtle — like a small number, letter, or symbol that indicates supplementary information. Superscript and subscript glyphs are weighted and spaced to look much better than shrunken-and-repositioned glyphs for this purpose. Toggle this feature on/off.

Typekit Practice is made by Adobe Typekit and friends. Subscribe to the RSS feed. If you have questions, ideas for topics to explore, or resources to recommend, please email us or say hello on Twitter. Thanks for being part of Typekit Practice.