Skip to main content

font-feature-settings vs font-variant

· 3 min read
Filip Tammergård
Filip Tammergård
Software Engineer at Einride

We recently did some font feature tweaks at work. For one thing, we changed the appearance of 0 (number zero) to include a slash (like 0), to make it easier to differentiate from capital letter O. I learned a few things in the process that I'd like to share!

Slashed zeros​

There are two main ways to configure slashed zeros.

  1. font-feature-settings: "zero" 1;
  2. font-variant: slashed-zero;
note

A prerequisite for this to work is that the font you are using supports slashed zeros.

font-feature-settings​

The font-feature-settings property is a bit strange. It accepts one or more font feature tags consisting of 4 ASCII characters. If a tag is followed by 1 or on, that font feature is enabled, and if followed by 0 or off, it's disabled. As mentioned, here's how to enable slashed zeros:

font-feature-settings: "zero" 1;
note

font-feature-settings: "zero"; works as well—if no value is provided, it defaults to 1.

In the case of slashed zeros, the tag "zero" is clear. But in other cases, it's pretty much gibberish. As an example, can you figure out what font features this enables?

font-feature-settings: "c2sc", "smcp";

Me neither!

The font-feature-settings property is also error-prone, since it sets every font feature that you don't explicitly list to it's default value.

Most font features can also be set with the font-variant property, which does not have the side effect of unsetting unlisted font features. For this reason, it's generally recommended to use font-variant instead of font-feature-settings whenever possible.

So let's explore font-variant instead!

font-variant​

The font-variant property is a lot easier to understand compared to font-feature-settings. No 4 ASCII characters here—but rather describing property values! Look at this beauty:

font-variant: slashed-zero;

Super clear!

font-variant is actually a shorthand for these properties:

  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric

These longhand properties can be used to target subsets of glyphs. As an example, font-variant-caps only targets capital letters.

In the case of slashed zeros, it will naturally only take effect on numbers. Therefore, it makes sense to use font-variant-numeric that only targets numbers.

font-variant-numeric: slashed-zero;

Conclusion​

  • Enabling font features can be done in many ways.
  • Prefer font-variant over font-feature-settings. Consider font-feature-settings to be a backup for when font-variant can't do the same thing.
  • Prefer being specific with what subsets of glyphs should be targeted instead of using the font-variant shorthand. For example, font-variant-numeric only targets numbers.

References​