A Guide to OpenType Features

by Renan Rosatti
Dinamo Take Notes 5 Hero Image WEB

What are OpenType Features?

OpenType is a modern font format and technology that allows designers to have more fine typographic control over a typeface. With the features programmed in the font file, the user can access alternate characters, ligatures, special numbers, small caps and much more. Using OpenType features is easy and they are supported by the vast majority of design software (and all web browsers 🙌).

How do they work?

Without getting too nerdy, the OpenType features work based on simple substitutions. So the ligatures feature, for example, just tells the font to substitute f+i for the fi “symbol” (we call these glyphs). There are also simpler substitutions, like substituting a for small caps A, and more complex ones, like changing 3/8 to a fraction, but only if there is no second slash like in 3/8/2024.

How to use them?

Most design software have a pretty good support of OpenType features these days. Unfortunately, each application implements it differently in their user interface, and it might take some tweaking until you find exactly in which menu to find them. We will cover how to find OpenType Features and how to activate them for Figma, InDesign and Illustrator below:

In Figma, you first have to open the Type Settings menu (the button with the three dots in the bottom corner of the Text panel). In the Type Settings pop-up window, navigate to the Details tab, where you will find a list of checkboxes you can play with to tweak the appearance of the type. Though not clearly labeled, most of them – for example Number Styles, Fractions, Ligatures, and Stylistic Sets – refer to OpenType features.

Video is loading ...

In Adobe InDesign, you can find the OpenType features in the Character window. Click the options button (the one with the menu icon) in the top right corner of this window and then navigate to the OpenType submenu. There you will find the whole list of available Opentype features, including Stylistic Sets, multiple number formats and more. Note that the “Ligatures” option can be found outside of the OpenType submenu, despite being a feature too.
You can also check out the alternates for each glyph by selecting it with the text tool. If a character has alternates, a small dropdown with thumbnails of the alternate glyph will apear under it. Selecting it won't activate the corresponding OpenType feature, though, and the appearance of the character won't change anywhere else in the text. So use this feature carefully!

Video is loading ...

In Adobe Illustrator, the OpenType features have their own dedicated panel window. There you will find dropdowns and buttons for the most commonly used features, that we'll explain in detail in the section below.
Just like in InDesign, you can check out the alternates for each glyph by selecting it with the text tool too. If a character has alternates, a small dropdown with thumbnails of the alternate glyph will apear under it. Selecting it won't activate the corresponding OpenType feature, though, and the appearance of the character won't change anywhere else in the text. So use this feature carefully!

Video is loading ...

Using OpenType on the web is dead simple: no need to look for menus and deal with frustrating interfaces! You just need to know this one simple piece of CSS below:

To activate stylistic sets and other features we use the CSS font-feature-settings attribute and specify the features we’d like to activate or deactivate with their four-letter feature tag. The code below not only activates the Stylistic Set 1 ("ss01"), but also deactivates Ligatures ("liga"):

font-feature-settings: "ss01" 1, "liga" 0;

The value 1 indicates that the feature is active.
The value 0 means the feature is not active.

Pro Tip: Using our Font Gauntlet, you can drop your font in and check which features are available for your font, along with their four-letter feature tags, in the OpenType features panel! You can also copy the CSS code for all the features you selected by clicking the Copy CSS Code button.

Video is loading ...

For a complete list of all the registered feature tag codes, visit the official specification website.

What are they capable of?

In the following sections, you will find examples of (more than) a few OpenType features present in our typefaces. We will also talk about where they come from and in what situations you can use them.

Now that you already know how to activate OpenType Features, you can download our trial fonts here and follow along in your design software of choice!

1. Ligatures

Ligatures are the most common type of alternate accessible through OpenType features. They have been a part of typography for centuries, and in modern font software they exist in 2 variants:

Standard ligatures ("liga") are the ones that the type designer intends to be active at all times. They will balance the white space and avoid collisions in tricky pairs like “fi”, and are active by default in most design software and browsers.

Discretionary ligatures ("dlig") are usually rooted in historical shapes and will add a more expressive or calligraphic touch to the typography. They will only appear when the feature is activated.

Standard Ligatures – ABC Synt

Refined

Discretionary Ligatures – ABC Gaisyr

Lovesick

2. Alternates

If we want to get more creative than just combining two glyphs, we have to look into alternates. There are a few OpenType features that will let you, the user, select different shapes for certain letters and symbols. These can range from the usual single-storey a to ABC Maxi’s geometric heavy alternates, and beyond!

The most common of these features is called Stylistic Alternates. Every font can have up to 20 Stylistic Sets ("ss01"–"ss20"), each offering different options to swap the font's glyphs to achieve a different look. It's also possible to mix and match the stylistic sets for the ultimate level of customization.

Stylistic Alternates – ABC Maxi

Heavily Young

Stylistic Alternates – ABC Honeymoon

Yours
Forever
A
nd Ever

Stylistic Alternates – ABC Camera

Hey, darling!”

Who is there?

I dont know

Stylistic Alternates – ABC Oracle

Giant Jays

Swashes – ABC Gaisyr

The Black
Swan Waltz

3. Numbers

Numerals can also have stylistic variations just like letters — think of Diatype with options for alternate 1, 3, 4, 6 and 9 😅. But they also have a number (no pun intended) of dedicated OpenType Features for all possible use cases and preferences.

Traditionally, the numerals were drawn to blend nicely with lowercase letters in text, and they did so by aligning the heaviest, most important part of the digit with the letters, and pushing the rest to the ascenders and descenders. These numbers, which are now called "oldstyle", are more common in serif fonts and text-heavy layouts (or as a classical touch), and can be accessed through the Oldstyle Figures ("onum") feature.

Later, with advertising, it became more common to align the numbers with the capital letters for more compact and punchy headlines. These numbers, which we know from most modern sans-serif fonts, are called "lining" and, if not set by default, can be accessed through the Lining Figures ("lnum") feature.

Oldstyle Figures – ABC Laica

H0123456789

n0123456789

Another useful feature for numbers is Tabular Figures ("tnum"). In this variant, all the numbers occupy the same width, which is especially useful for tables, lists, and UIs with variable data, where you want to keep the same width no matter what the numbers are.

Have you ever tried to read a code or password and couldn't figure out if that round symbol was a zero or an uppercase O? That's what the Slashed Zero ("zero") feature is for. Check your password manager (you should use one) or code editor and see it in use.

Tabular Figures – ABC Social

$8.342,64

$6.587,09

$1.274,13

Slashed Zero – ABC Monument Grotesk

Old Password:
01dl0v3r5Bd4y

New Password:

H34rtBr0k3n90

And for the number geeks out there, there are still other useful OpenType Features to talk about. Fractions ("frac") are useful for cake recipes and non-metric DIY tutorials (but not for birthdays). Subscript ("subs") numbers are useful for your chemistry homework; and Superscript ("sups") is the perfect feature for math formulas and referencing footnotes in a book or Wikipedia article.

Fractions – ABC Arizona

20/9/24 Birthday cake:

2/3 cup unsweetened cocoa powder
1 1/2
teaspoons baking powder
3 1/3
cups confectioners’ sugar
1/2
teaspoon fine sea salt

Subscript / Scientific Inferiors – ABC Repro

CH4 + 2O2 → CO2 + 2H2O

Superscript – ABC Diatype

(x + y)3 = x3 + 3x2y + 3xy2 + y3

4. Advanced Typography

Not only numerals have special forms to adjust to the typographic context they are used in. Just like the Oldstyle Figures we mentioned above, Small Caps ("smcp") are capital letters designed to blend in nicely with lowercase text. They are great when you want to use all caps without looking like you're shouting, for example in abbreviations and acronyms, or for that running title on top of your book page. If you've been using fonts for a long time, you might remember there were separate font files (usually with a "SC" suffix) for them, but nowadays you can comfortably access them through the OpenType panel.

If you want to be louder and use the true big capitals though, make sure you're using Uppercase Punctuation ("case") to go with it. This much forgotten feature makes sure your hyphens, brackets and upside down question marks—which are otherwise designed to be used with lowercase letters—line up nicely with the capitals.

Small Caps – ABC Marfa

Herman Melville
Moby-Dick; or, The Whale

Chapter 129

Uppercase Punctuation – ABC Gravity

[LARGE-SCALE!]
(¿
RELATIVIDAD?)
«ESPACE-TEMPS»

Final tip: the Dinamo Font Customizer™

You have found the perfect combination of OpenType features for you project and want to lock them in as default? You can easily do so using our Font Customizer™, so you never have to worry about activating these features again and again in all your design documents!