Guide to using OpenType Features

Ok so what are OpenType features? Inside a font file, type designers will often place alternate characters that enhance the experience of using a font. For example, having fractions (½ instead of 1 / 2), or superior or inferior numbers. We use ‘case-sensitive’ forms a lot too, which are forms that change if you’re writing in all caps. Glyphs like a hyphen, or the @ sign will probably look too low when letters are all caps, so we use the case-sensitive opentype feature to raise them so they’re centered with the capital letters.

There are also things like contextual alternates, where if you put two glyphs next to each other, we’re able to program into the font to change one or both of those glyphs depending on the context. A nice example is an arrow; if you type a hyphen - and then a greater than symbol > next to each other it’ll automatically swap to the proper arrow glyph ->.

Those are the more basic and often ‘invisible,’ turned on by default, OpenType Features. But what about design alternates? Nestled inside what’s called ‘stylistic sets’ are alternate designed characters that when turned on can really change the overall feeling of the font. Let’s look at some examples.

OpenType features provide so much potential to be able to really customize your typography. But how do you use OpenType features? We’ve got you covered, we’re going to break down how to use OpenType features in Adobe Illustrator, Adobe InDesign, Adobe Photoshop, Figma, and on the web using CSS.

How to use OpenType Features in InDesign

1. Select the Text You Want to Modify
Click and drag over the text you want to modify, or simply click the text box.

2. Open the Character Panel
If the Character panel is not visible, go to Window > Type & Tables > Character to open it.

3. Apply a Stylistic Set
In the Character panel, you will see a dropdown menu labeled “Stylistic Sets.” Click on it to reveal a list of available sets, typically named “Set 1,” “Set 2,” and so on. Choose the stylistic set you want to apply by clicking on it in the dropdown menu. The text you’ve selected or will type will now display in the chosen stylistic set style.

How to Use OpenType Features in Illustrator

1. Contextual Alternates are alternate glyphs that change based on the context. So for example, maybe your the typeface you’re design with has a y with a long tail. The y looks good almost all the time except for when it’s next to a g. The typeface designer probably saw that combination and made an alternate ‘y’ with a slightly shorter tail for the instances when the y appears next to the g. This is a contextual alternate. Having Contextual Alternates off means you could be affecting the beauty of your typography and not accounting for things the typeface designer has already taken into account and fixed.

1. Select the Text You Want to Modify
Click and drag over the text you want to modify, or simply click the text box.

2. Open the OpenType Panel
Go to Window > Type > OpenType to open the panel

3. Explore OpenType Features
In this inital menu you will see along the bottom of the panel various options to access features like ligatures, swashes, fractions and more. We highly recommend that you click second button (italic O) to turn on Contextual Alternates.1 These are off by default in Illustrator but on by default in most other design software.

4. Access Stylistic Sets
To access stylistic sets click on the ‘a’ inside two boxes. This will give you a drop down with options you can choose from.

How to Use OpenType Features in Photoshop

Unfortunately photoshop does not support using stylistic sets, but you can still access other OpenType features like swashes, oldstyle figures, and more. If you would like to access other special characters, you can still do so by opening the ‘Glyphs’ palette by going to Window > Glyphs. In the Glyphs Palette you’ll be able to see all the available glyphs inside a typeface, and you can add any glyph to your text by double clicking it in the Glyphs window.

1. Select the Text You Want to Modify
Click and drag over the text you want to modify, or simply click the text box.

2. Open the Type Settings Palette
In the text palette on the right side of the screen, click the three dots in the bottom right section of the palette. A ‘Type Settings’ palette will appear.

3. Open the Details tab
Click on the middle tab ‘Details’ for access to available OpenType features. From here you can toggle on and off the available OpenType features

How to Use OpenType Features in Figma

1. Select the Text You Want to Modify
Click and drag over the text you want to modify, or simply click the text box.

2. Open the Type Settings Palette
In the text palette on the right side of the screen, click the three dots in the bottom right section of the palette. A ‘Type Settings’ palette will appear.

3. Open the Details Tab
Click on the middle tab ‘Details’ for access to available OpenType features. From here you can toggle on and off the available OpenType features

How to Use OpenType Features in CSS

Using OpenType features on the web is easy with CSS. You just need to know the name of the feature (like ss05) and you can use the following code to activate it with ‘font-feature-settings’.

1. Choose Your Text Selector
Select the class or ID of the text you would like to alter.

2. Activate Your Selected OpenType Feature
You can activate the OpenType feature by using the OpenType feature name (always a 4 letter code), followed by a 1.


.text {
  font-feature-settings: “liga” 1, “ss01” 1, “dlig” 1;
  }