variable-fonts.css

[argyleink]

all sorts of important typography design decisions can be named and distributed via props for variable fonts. give name to those mysterious key/values or just share premade good decisions.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings

[WebMechanic]

almost 1 year in the thinking process :)

https://wakamaifondue.com/ has a nice solution in their CSS sample how to handle the many variations and layout features and how to enable/disable them for a font. It's similar to how box-shadows are constructed.
You need to drag one font in and scroll all the way down to see the Stylesheet.

For readers' convenience, here's their rendered style sheet for Spartan (a Futura clone) by The League of Moveable Type.

• league-spartan-variable-wakamai-fondue.css.txt
  Note that League Spartan only provides some variations, which is reflected by the amount or available props.

An excerpt:

/* @font-face declaration removed, see example file */

/* Set custom properties for each layout feature */
:root {
    --league-spartan-variable-aalt: "aalt" off;
    --league-spartan-variable-frac: "frac" off;
    --league-spartan-variable-ordn: "ordn" off;
    --league-spartan-variable-salt: "salt" off;
    --league-spartan-variable-ss01: "ss01" off;
    --league-spartan-variable-ss02: "ss02" off;
    --league-spartan-variable-sups: "sups" off;
}
/* If class is applied, update custom property and
   apply modern font-variant-* when supported */
.league-spartan-variable-aalt {
    --league-spartan-variable-aalt: "aalt" on;
}

.league-spartan-variable-frac {
    --league-spartan-variable-frac: "frac" on;
}

@supports (font-variant-numeric: diagonal-fractions) {
    .league-spartan-variable-frac {
        --league-spartan-variable-frac: "____";
        font-variant-numeric: diagonal-fractions;
    }
}
/* 
  and so on more for the remaining features 
 */

/* Apply current state of all custom properties
   whenever a class is being applied */
.league-spartan-variable-aalt,
.league-spartan-variable-frac,
.league-spartan-variable-ordn,
.league-spartan-variable-salt,
.league-spartan-variable-ss01,
.league-spartan-variable-ss02,
.league-spartan-variable-sups {
  font-feature-settings: 
    var(--league-spartan-variable-aalt), var(--league-spartan-variable-frac),
    var(--league-spartan-variable-ordn), var(--league-spartan-variable-salt), 
    var(--league-spartan-variable-ss01), var(--league-spartan-variable-ss02), 
    var(--league-spartan-variable-sups);
}

This would make a great addition whether variable (web) fonts are used or not, as this concept is not limited to variable fonts. Classic TTF/OFT fonts may also provide variations and feature settings such as "small-caps" or "kerning". However, users need to know which gimmicks the font of their choice supports.

The wakamaifondue custom properties are namespaced per font, but I believe this is not necessary. A full generic set of property names can be declared, i.e. --font-variant-frac-[on|off] --font-variant-ordn-[on|off] etc. Then use them into your own style rules. That's sort of what I did anyway :D
Also check the diagonal-fractions example in the Spartan CSS sample.

Not sure how practical the human readable standardised values of font-variant would be as an alternative to the abbreviations.
Some fancy variable fonts will certainly provide custom axis that need to be "merged" with a standard setup.

---

I also have a .spartan setup if the font is available and where the big chunk of font-feature-settings: ... lives with all possible css props for Spartan.
In the style rule for "numeric table data cells" I then enable --fvs-ordn instead of having another large set of supplemental utility class names for each feature to be added to the markup.
I'm old school and don't like having a buttload of cryptic atomic design classes in our markup a dev may use at will and risk they've not consulted the Style Guide in advance.

[argyleink]

awesome, thank you for sharing your setup and thoughts, this is definitely in the vein of what this Idea was created for! it's even complete with support checks, nice. i'll need to really sit down and think these out and try to come up with meaningful names. i agree, since they work across fonts, it'd be nice to not have them scoped to a font name. thanks again for this walk through and sharing of your setup 💯