I wanted to share a challenge we’re currently facing in our design system: line-height flexibility. Our typography setups have served us well, but they’re starting to feel a bit rigid in certain design contexts.
After some brainstorming and debates, I’ve been contemplating a solution: introducing line-height variables. This idea draws inspiration from frameworks like tailwindcss, which offer classes like tight, snug, normal, relaxed, etc., allowing developers to adjust line-height dynamically based on the class applied.
Implementing line-height variables could offer the flexibility we need without cluttering our typography styles library. It’s a way to provide designers with more control without overwhelming them with excessive options.
However, I’m also open to exploring alternative approaches. So, I’d love to hear your thoughts and suggestions on how we could tackle this challenge together.
Totally agree with your proposal, i think this kind of approach could help us to be more scalable and not having to define each corner case or having multiple exceptions inside the system. Having different variables reusable for different text styles could let us provide just the more essential text styles and then let users tweak them with the proper variable of line-height (whatever fits better).
And now going a bit further, what do you think to apply the same solution for weights. Defininig 2 or 3 variables for the hierarchy that we want to provide for each type scale(for instance: “prominent/highlighted” and “default/core” variables) and then simplify text styles and just tweak to whatever you need.
it is also very important to have also a freedom with different languages and their specific characters. Therefore a country can us a differen line height and it does not collidate.
