@@Gunnar:

nuqneH

wie setzt du deine line-height?

calc(1.1em + 1vw) funktioniert in Chrome. Firefox wendet das bei margin, aber (noch?) nicht bei line-height an. Safari weder noch.

Hmmm ..., mal ganz davon abgesehen, dass das aktuell nur im Chrome funktioniert, berücksichtigt das in keinster Weise die 'line width' (sondern nur die Viewportbreite).

Dann könnte man ja bspw. lieber gleich schreiben:

p {  
   margin: calc(1.1em + 1%) 0;  
}  

Auch das funktioniert nur im Chrome.

BTW: Ich hätte erwartet, dass für das HTML-Element gilt: 1% = 1vw
Das scheint aber offensichtlich nicht so zu sein ...!?

Ich finde den Ansatz, die line-height (neben der font-size) auch von der line width abhängig zu machen, gar nicht so verkehrt.

Natürlich nicht.

Schön wenn du das auch so siehst, nur berücksichtigen tust du es nicht ...!?

Und leider ist calc() hier auch keine "Hilfe", denn abgesehen davon, dass aktuell nur Chrome eine entsprechende Angabe für 'line-height' unterstützt, ist das, was wirklich hilfreich wäre, nämlich z.B.:

div {  
   max-width: calc(1em / 1rem * 40rem);  
}  

generell nicht möglich, da der Divisor immer eine <number> sein muss!
Und auch bei Multiplikationen muss mindestens eine <number> enthalten sein.

Als derzeitiges (Zwischen-)Fazit frage ich mich, was in der Praxis nun besser ist:
Dein Ansatz, oder die Berechnung, die auf der Annahme basiert, dass die Basis-Schriftgröße ~ 16 px entspricht (und selbst bei abweichender Schriftgröße immer noch "brauchbare" Ergebnisse liefert)?

Und sich per JS dann auch noch entsprechend korrigieren lässt ...!

Gruß Gunther