CSS Font-Variant-Alternates Enhance Web Typography

Learn how to use CSS font-variant-alternates to enhance web typography.

This property allows you to control alternate glyphs such as stylistic sets, swashes, ornaments, and annotations.

Introduction

The font-variant-alternates CSS property lets you control alternate glyphs in your text. It’s a new feature available since March 2023 that enhances text appearance by enabling specific typographic features like stylistic sets, swashes, ornaments, and annotations. You don’t need to know specific index values for each font; just use this property with the @font-feature-values at-rule to apply complex typographic styles easily.

Specification

The font-variant-alternates property is defined in the CSS Fonts Module Level 4 specification. It works with the @font-feature-values at-rule to map human-readable names to numeric indices for OpenType font features. This makes applying typographic styles simpler and more intuitive.

Syntax

/* Keyword values */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* Functional notation values */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* Global values */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

Keyword Values

normal: Deactivates alternate glyphs.
historical-forms: Enables historical forms.

Functional Notation Values

stylistic(user-defined-ident): Enables stylistic alternates for characters.
styleset(user-defined-ident): Enables stylistic sets for characters.
character-variant(user-defined-ident): Enables specific stylistic alternatives for characters.
swash(user-defined-ident): Enables swash glyphs.
ornaments(user-defined-ident): Enables ornaments.
annotation(user-defined-ident): Enables annotations.

Global Values

initial: Sets the property to its initial value.
inherit: Inherits the value from the parent element.
unset: Resets the property to its natural value.
revert: Resets the property to the value established by the user agent’s stylesheet.
revert-layer: Resets the property to its value in the previous cascade layer.

Values

The font-variant-alternates property supports various values to control alternate glyphs.

Keyword Values

normal: Deactivates alternate glyphs.
historical-forms: Enables historical forms.

Functional Notation Values

stylistic(user-defined-ident): Enables stylistic alternates.
styleset(user-defined-ident): Enables stylistic sets.
character-variant(user-defined-ident): Enables character variants.
swash(user-defined-ident): Enables swash glyphs.
ornaments(user-defined-ident): Enables ornaments.
annotation(user-defined-ident): Enables annotations.

Global Values

inherit: Inherits the value from the parent element.
initial: Sets the property to its initial value.
unset: Resets the property to its natural value.
revert: Resets the property to the user agent’s stylesheet value.
revert-layer: Resets the property to its value in the previous cascade layer.

Examples

Enabling Swash Glyphs

Use the @font-feature-values at-rule to define a name for the swash feature of a font, then apply it with font-variant-alternates.

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: SwashFont;
      src: url("swashfont-regular.woff2");
    }

    @font-feature-values "SwashFont" {
      @swash {
        fancy: 1;
      }
    }

    p {
      font-family: "SwashFont";
      font-size: 2rem;
      margin: 1rem;
    }

    .swash {
      font-variant-alternates: swash(fancy);
    }
  </style>
</head>
<body>
  <p>Normal Text</p>
  <p class="swash">Swash Text</p>
</body>
</html>

Using Historical Forms

Enable historical forms using the font-variant-alternates property.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-family: "HistoricalFont";
      font-size: 2rem;
      margin: 1rem;
    }

    .historical {
      font-variant-alternates: historical-forms;
    }
  </style>
</head>
<body>
  <p>Normal Text</p>
  <p class="historical">Historical Text</p>
</body>
</html>

Applying Stylistic Sets

Use the @font-feature-values at-rule to define a name for the styleset feature of a font, then apply it with font-variant-alternates.

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: StylisticFont;
      src: url("stylisticfont-regular.woff2");
    }

    @font-feature-values "StylisticFont" {
      @styleset {
        set1: 1;
      }
    }

    p {
      font-family: "StylisticFont";
      font-size: 2.5rem;
      margin: 1rem;
    }

    .stylistic {
      font-variant-alternates: styleset(set1);
    }
  </style>
</head>
<body>
  <p>Normal Text</p>
  <p class="stylistic">Stylistic Text</p>
</body>
</html>

Using Ornaments

Enable ornaments using the font-variant-alternates property.

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: OrnamentalFont;
      src: url("ornamentalfont-regular.woff2");
    }

    @font-feature-values "OrnamentalFont" {
      @ornaments {
        orn1: 1;
      }
    }

    p {
      font-family: "OrnamentalFont";
      font-size: 2rem;
      margin: 1rem;
    }

    .ornaments {
      font-variant-alternates: ornaments(orn1);
    }
  </style>
</head>
<body>
  <p>Normal Text</p>
  <p class="ornaments">Ornamental Text</p>
</body>
</html>

Applying Swash Glyphs

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: MonteCarlo;
      src: url("montecarlo-regular.woff2");
    }

    @font-feature-values "MonteCarlo" {
      @swash {
        fancy: 1;
      }
    }

    p {
      font-family: "MonteCarlo";
      font-size: 3rem;
      margin: 0.7rem 3rem;
    }

    .variant {
      font-variant-alternates: swash(fancy);
    }
  </style>
</head>
<body>
  <p>A Fancy Swash</p>
  <p class="variant">A Fancy Swash</p>
</body>
</html>

Browser Compatibility

Current Browser Support

As of the latest updates, the following browsers support the font-variant-alternates property:

Google Chrome: Supported in the latest versions.
Mozilla Firefox: Supported from version 34.
Apple Safari: Supported from version 9.1.
Microsoft Edge: Supported in the latest versions.

Partial or No Support

Older versions of these browsers, and some less commonly used browsers, may not support this property. Always test your web designs across multiple browsers and versions.

Best Practices

Fallback Options: Provide fallback options for browsers that don’t support font-variant-alternates.
Feature Detection: Use feature detection techniques to check if the property is supported.
Graceful Degradation: Ensure your web design degrades smoothly in older browsers.

For the most up-to-date information on browser compatibility, refer to resources like Can I Use and MDN Web Docs.

`font-variant`

A shorthand property that controls several font-variant features at once, like font-variant-caps, font-variant-ligatures, and font-variant-numeric.