How to correctly calculate line-height for different headings?

Question

css

Hello.
Tell me how to correctly calculate the line-height for the headings h1 ... h6 and in general in rem
How can I correctly format this in scss?
for example:

html{
font-size:16px
}
body{
font-size:1rem
}
h1{
font-size:3rem;
line-height:??????
}
h2{
font-size:2.5rem;
line-height:??????
}

I just use this build

$base-font-size:16px;
@function rem($px, $base: $base-font-size) {
    @return ($px / $base) * 1rem;
}
p{
font-size:rem(14px);
}

But how to calculate the line-height again

Answer 1

I use

* {
    line-height: 1.5;
}

html,
body {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

it is convenient, i.e. 1rem will be considered as 10px and based on this you already calculate
, but as for line-height, it seems like 1.4 - 1.6 is considered optimal for reading, I use 1.5

Answer 2

There is no universal value.
It has its own for each specific font.
I recommend reading: https://iamvdo.me/en/blog/css-font-metrics-line-he...