macOS System Font Stylistic Sets for CSS

San Francisco, macOS’ System Font, comes with several “stylistic sets” to be used in different contexts. They can be activated from CSS using these properties:

• font-feature-settings: "ss01" on makes the sides of 6 and 9 straight.
• font-feature-settings: "ss02" on for “open 4.”
• font-feature-settings: "ss03" on makes colon vertically-aligned, even in awkward positions.
• font-feature-settings: "ss06" on adds a slash to 0 (to distinguish itself from O), and some serif to I and l, making it easier to tell them apart. Also enables straight-sided 6 and 9, and open 4.
• font-feature-settings: "ss07" on makes a one storey.
• font-variant-numeric: tabular-nums makes each number take up the same space. Good for using in tables.
• font-variant-numeric: diagonal-fractions turns “123/456” into a diagonal fraction.

Maybe there are more that I am not aware of, please leave a comment.

For font-feature-settings, use a comma to combine:

font-feature-settings: "ss06" on, "ss07" on;

For font-variant-numeric, use a space to combine:

font-variant-numeric: diagonal-fractions tabular-nums;

They work on Chrome and Safari. They don’t work in Firefox yet (as of writing, Firefox 57).

On websites that use the system font, e.g. Facebook, GitHub, and Qiita, I like to use this userstyle:

:root {
  font-feature-settings: "ss06" on;
  font-variant-numeric: tabular-nums;
}

This can make it easier to read tabular data.

Before:

Some digits are not aligned.

After:

Digits are perfectly aligned now!