In our design system we have different styles that are connected to variables. We are using a variable font and we can apply number variables to font-weight (300, 400, 500, 700 etc.).
We could also use string variables, which works if we used the standardized font-style and weights (“Bold italic”, “Semibold Italic” etc.). However, we don’t.
I’ve noticed that when I’ve picked “Italic” and set a numbered font-weight (variable font axes) the dropdown shows the font-style (“Italic”) and the weight (550) separated by a comma.
I was hoping and thinking that perhaps if I made a variable that matched the text in the dropdown “Italic, Weight: 550”, it would work. Nope, it didn’t.
Proposed solution
So, we would like if the font-weight could accept this type of combined variable or a more semantically correct solution: separate font-style and font-weight into two inputs in the UI and let us use separate variables for them.
Screenshot: Font style and irregular numbered font-weight
