Hey revisiting this again! The biggest blockers for me still are two things:

1. I have no idea what happens when I change the numbers in the formula (round(max(min(2em - .5rem, 1em + .5rem, 2em / 3 + 1rem), 1em), 2px) — do you have any idea how we can get these to feel like labelled knobs that actually have an intuitive effect? It feels very opaque right now.
2. I'm worried about any potential performance impact of making the browser do all this math on every text element.

What are your thoughts?

Complexity

Yeah, I realise this is a magic function. It’s not designed for easy adjustments but rather to serve as a smarter default than, say, 1.5em. If specific line-height tweaks are needed for individual font sizes, --text-*--line-height will still be the way to go.

There is an alternative function that’s much simpler and easier to understand: min(2em - .5rem, 1em + .5rem). This approach yields even line heights without needing the round() trick.

The only downside is that it does change more line heights for larger font sizes (although you can still set the --text-*--line-height if you notice this causes issues when upgrading from v3 to v4):

Performance

To be honest, I'm not sure about the performance impact or even the best way to benchmark it. My intuition is that the function simply calculates a number, which likely isn't any more complex than the approach we're using with color-mix() to adjust background opacity.

What do you think about the simplified line height function?