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.
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. 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;
}