Semi Bold vs SemiBold

[neatlittlemacapps]

Hi,
I'm working on a multi-brand design system.

I have a set of tier 01 tokens (the same for every brand) to reference font weights from.

Like this:

"fontWeight": { "thin": { "value": "Thin", "type": "fontWeights" }, "extraLight": { "value": "ExtraLight", "type": "fontWeights" }, "light": { "value": "Light", "type": "fontWeights" }, "regular": { "value": "Regular", "type": "fontWeights" }, "medium": { "value": "Medium", "type": "fontWeights" }, "semiBold": { "value": "Semi Bold", "type": "fontWeights" }, "bold": { "value": "Bold", "type": "fontWeights" }, "extraBold": { "value": "ExtraBold", "type": "fontWeights" }, "black": { "value": "Black", "type": "fontWeights" }

The issue I run up against is this: some fonts use "Semi Bold" and some use "SemiBold".
So my tier 01 tokens won't work in some cases depending on the font used.
Is there a way to use values like "100", "200",...?

[six7]

Unfortunately not, as Figma itself doesn't parse fontWeights that way.

You'd have to create a new font weight token to pair with the font change. I usually keep a fontFamily and fontWeight token for each type decision so I can change them as needed.

[neatlittlemacapps]

That's basically my workaround today. In the Tier 02 level typography I did not reference the Tier 01 fontweight token but simply entered the final one for that specific brand tokenset.

[six7]

I'm wondering if we should combine the fontFamily/fontWeight into one token that always has to change in pairs. Makes it harder to swap from family A to family B though as you'd have to create various combination tokens.

[neatlittlemacapps]

I'd prefer not to. having them separate allows me to simply swap out the font family and all typography tokens keep working including the defined font weight (unless, in the example I encountered or if you're choosing a font family that does not carry the weight you defined in the typo tokens.

[avendiart]

Having them in one token sounds reasonable as in Figma they are always coupled together anyway, precisely because of the fact that you can't really use font weights of Font A with Font B, unless they are accidently named the same.

Something else to throw in here as well: converting from weights used in Figma to CSS weights is a pain and I think having them go together would at least help with that somewhat.

[neatlittlemacapps]

OK, I follow. It would mean I have to create a bunch more fontfamily tokens to cover all possibilities. But it is feasible.