Is it possible to have letter-spacing relative to the font-size and inherit properly? (original) (raw)

My question is basically the same as this one, but replace "line-height" with "letter-spacing": When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative?

My use case is like this:

body {
    font-size: 18px;
    letter-spacing: 1.2em; /* I would like letter-spacing to be relative to the font-size across the document, at least until I override it */
}

.small {
    font-size: 14px;
    /* letter-spacing is 1.2em of 18px instead of 14px */
}

I know that the reason it doesn't work is that the computed value, and not the specified value, is inherited, so I have to re-specify the letter-spacing every time the font-size changes. But I'm hoping there's something similar to how unitless values in line-height work.

Sure I can do this:

* {
    letter-spacing: 1.2em;
}

But then I can't stop the cascading at some element, like I would be able to with line-height:

body {
    font-size: 18px;
    line-height: 1.5;
}

.normal-line-height {
    line-height: normal;
    /* all the descendants of this element will have a normal line-height */
}

I mean, SURE, I could always do this...

.normal-letter-spacing, .normal-letter-spacing * {
    letter-spacing: normal;
}

But it's still not as elegant as I would like. I don't think there's an elegant solution to this problem, but I'm asking in case I'm missing something.