CSS Stylistic Sets: How to Use ss01 and ss02

CSS stylistic sets are OpenType font features that allow web developers to swap default character glyphs for alternate designs provided by a typeface. This guide explains what stylistic sets (ss01 through ss20) are, why they are used, and the standard CSS methods required to enable and combine them on modern websites.

What Are Stylistic Sets?

OpenType fonts often contain alternative designs for specific letters, numbers, or punctuation marks. For instance, a font might include a double-story lowercase "a" by default, but offer a geometric single-story "a" as an alternative. Similarly, a typeface may feature stylistic alternates for ampersands, capital letters with swashes, or slashed zeros.

To organize these design variants, the OpenType specification defines twenty standardized tags named ss01 through ss20. Type designers group related alternate glyphs into these sets. Activating a set replaces the targeted characters throughout your text while leaving the rest of the typeface unchanged.

How to Check if a Font Supports Stylistic Sets

Not every web font contains stylistic sets. Before attempting to use them in CSS:

1. Check the font specimen or documentation provided by the type foundry.
2. Inspect the font file directly using online font inspection tools to see which OpenType features are mapped.
3. Identify which specific tag (ss01, ss02, etc.) corresponds to the desired visual alteration.

Enabling Stylistic Sets in CSS

There are two primary CSS properties used to control stylistic sets: the low-level font-feature-settings property and the higher-level font-variant-alternates property.

Method 1: Using font-feature-settings (Broadest Support)

The font-feature-settings property provides direct, low-level access to OpenType feature tags. It has near-universal browser support and is the most common way to toggle stylistic sets.

To turn on a single stylistic set:

.single-story-a {
  font-feature-settings: "ss01" 1;
}

To enable multiple stylistic sets simultaneously, pass them as a comma-separated list:

.custom-typography {
  font-feature-settings: "ss01" 1, "ss02" 1;
}

To explicitly disable a set that was inherited from a parent element, set its value to 0:

.reset-typography {
  font-feature-settings: "ss01" 0;
}

Note: The value 1 is equivalent to on, and 0 is equivalent to off.

Method 2: Using font-variant-alternates (Modern Standard)

The CSS Fonts Module Level 4 introduces a higher-level, more human-readable syntax using @font-feature-values and font-variant-alternates. This approach separates the technical OpenType tag from your styling rules.

First, define a custom alias for the stylistic set using the @font-feature-values at-rule:

@font-feature-values "Inter" {
  @styleset {
    open-digits: 1; /* Maps to ss01 */
    alt-lowercase: 2; /* Maps to ss02 */
  }
}

Then, apply the defined aliases using font-variant-alternates:

.modern-text {
  font-family: "Inter", sans-serif;
  font-variant-alternates: styleset(open-digits, alt-lowercase);
}

While this method improves code readability and maintainability, ensure browser compatibility meets your project's baseline requirements before relying on it exclusively.

Best Practices

• Avoid Overwriting Inherited Features: When using font-feature-settings, assigning a new value overwrites all previously declared OpenType features on that element (such as ligatures or kerning). Always declare all desired active features together if you are re-declaring the property.
• Provide Fallback Stacks: Ensure your text remains readable and properly aligned if the web font fails to load and the browser falls back to a system font, as system fonts may interpret or lack these feature tags entirely.