[css-values] Proposal: font-size-relative unit that gets preserved during inheritance (upm?)

[benface]

This was discussed previously in #2165 (and I'm sure in other places as well), but a different solution was agreed upon for that specific issue. However, I think there's still a need for a font-size-relative unit that inherits like percentages do, meaning that it gets preserved rather than resolved to an absolute value before being inherited. I am proposing upm (units per em) simply because it was mentioned by @fantasai here, but it could be anything. In some cases, percentages work exactly like that (e.g. in letter-spacing, as agreed upon in the aforementioned issue), but the issue with percentages is that they refer to different things depending on the property. There is a need for a unit that is always relative to the current, actual font-size being used on the element the value is applied to.

To give just one example, it is currently impossible to set line-height to a dynamic value based on the current font size, unless...

• font-size is set on the same element as the line-height (in which case you can use em or %), but that defeats the purpose of making it dynamic;
• you use unitless values, but those can't be used together with any other type in calc() and other math functions (min(), max(), clamp(), etc.).

Percentages would work, if it wasn't for the fact that line-height's use of percentages was "broken" (they exceptionally don't get preserved, just like em). To better explain why this is annoying, consider the following CSS / design intention:

.prose {
  font-size: 1.5rem;
  /**
   * Set the line height to 1.5em if the font size is <= 16px.
   * Make it tighter as the font size grows larger than that, but never less than 1em.
   */
  line-height: clamp(1em, calc(0.9em + 0.6rem), 1.5em);
}

.prose h2 {
  font-size: 3rem;
  /**
   * Uh oh. The h2's line height will be incorrect even though it is inherited, because the `em` values
   * in the calc() above are resolved using .prose's font-size of 1.5rem instead of the h2's 3rem.
   * It would be correct if we just copied the declaration here.
   */
}

I also made the following Codepen to show how none of the current font-size-relative units get preserved during inheritance: https://codepen.io/benface/pen/XWOVyJx

Thanks!

[Loirooriol]

I think it's strange to only have this for em and not other font-relative units. Could even make sense for container-query units.

And rather than adding a preserved variant of each unit, maybe we should consider a more general solution? #2749 is basically the same problem but with variables.

[tabatkins]

Yeah, this is a general issue where people want "late resolution" of something, so it inherits as-is and gets resolved immediately after.

If we want it for things other than variables, that'll point to a slightly different syntax than a variable-focused one.

[benface]

Awesome. I agree that a more general solution would be better. Should I close this issue and post about my line-height use case in #2749 instead?