macOS System Font Stylistic Sets for CSS
font-feature-settings: "ss01" onmakes the sides of 6 and 9 straight.
font-feature-settings: "ss02" onfor “open 4.”
font-feature-settings: "ss03" onmakes colon vertically-aligned, even in awkward positions.
font-feature-settings: "ss06" onadds 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" onmakes a one storey.
font-variant-numeric: tabular-numsmakes each number take up the same space. Good for using in tables.
font-variant-numeric: diagonal-fractionsturns “123/456” into a diagonal fraction.
Maybe there are more that I am not aware of, please leave a comment.
font-feature-settings, use a comma to combine:
font-feature-settings: "ss06" on, "ss07" on;
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:
font-feature-settings: "ss06" on;
This can make it easier to read tabular data.