Additive Type Styles

In CSS you can have multiple classes added together to create a style. In Figma, you need to make a type style for each variation you might need ie:

font-size: 14px;
font-weight: 400;
line-height: 20px;

font-size: 14px;
font-weight: 400;
line-height: 24px;

It would be incredible to be able to have some form of additive styles in design, controlling a single attribute—That way you can macro edit those attributes across styles, but gaining flexibility of mixing and matching.

One style that declares font size, one that declares line-height, one that declares font-weight. Could be similar to variants on a component how you can create combinations that are commonly used. Thoughts?

please this. requiring unique styles for each weight at each size of each face is hugely cumbersome. we use 2 faces, with 4 weights, at 14 different sizes. so we have to maintain 112 different styles, for what should be do-able in 20.

thankfully we do not use different line-height, character spacing, paragraph spacing, cases, decorations, etc for any of these.

1 Like

Thats what some design-software is solving with paragraph-styles and character-styles. Character-styles are able to overwrite some properties but reuse the not-overwritten paragraph-styles, without loosing connection!

You see a disappointed typography-nerd using your software to build up a design-system for different digital-platforms. We do not want to confrontate building up all thinkable variant-combinations as own styles, that will rather need hundreds of styles, that could be less then 30!

2 Likes

One plugin I’ve been using to help simplify this is the Utopia Batch Type Style editor. It is a workaround, and I’m hoping for a first party solution to this, but it helps address styles in batches at least.