How to correctly calculate heading indents in CSS?

Question

css

I'm sorting out two typographic parts of two libraries: Foundation 5 and Bootstrap 3.
I need to put h1-h6 in order.
What do you need:

• adaptability
  
• When changing the base font size, change relative to other headings.
  
• The line height and indentation also changed.
  
• Moreover, everything was displayed correctly, without errors, there was no feeling of illiteracy in the indents (which is the most difficult, how they are mathematically calculated).
  

Bootstrap 3 - compartment, because everything is in pixels.
Foundation 5 - set html { font-size:16px; }
Rest rem: font-size, line-height, margin-top, margin-bottom.
Also in stylus (or SASS) I will set the basic sizes h1-h6 :

$base_size = 16;
font-size: (44/$base_size)rem.

Needs to be put in order line-height, margin-top, margin-bottom.
Trying to combine both practices, I don't understand....
Bootstrap is strupped: h1,h2,h3 headings have only margins. h2,h3,h4 - others.
In Foundation - Same for all h1 -h6 : margin-top: 0.2rem;margin-bottom: 0.5rem;font sizes are different. But it is achieved at the expense of a large line-height. Because if h6 becomes a lot of lines there will be a clear display problem.
How to make such a typographic layout correctly and best-practice?
To set (changing in realtime) html font-size to have an adequate and correct display.
Leaving at the same time it is possible to change the sizes of individual h (1-6) through variablesto adjust the indentation and line height.
Naturally, IE8 does not need to be supported and there is no desire.
Thank you!
Current result:

h1 {
    font-size: (44/$base_size)rem;
    line-height: (44*1.25/$base_size)rem;
}
h2 {
    font-size: (37/$base_size)rem;
    line-height: (37*1.25/$base_size)rem;
}
h3 {
    font-size: (27/$base_size)rem;
    line-height: (27*1.25/$base_size)rem;
}
h4 {
    font-size: (24/$base_size)rem;
    line-height: (24*1.25/$base_size)rem;
}
h5 {
    font-size: (18/$base_size)rem;
    line-height: (18*1.25/$base_size)rem;
}
h6 {
    font-size: (16/$base_size)rem;
    line-height: (16*1.25/$base_size)rem;
}

Answer 1

You are trying to solve the problem head-on, not realizing that there is no general solution. How many documents I have retyped - everywhere the indents are different. A lot depends on the font, the document itself or the site, the direction of the site. You can set indents in different ways, and which one is better also depends on the situation. And a purely mathematical approach to the question is fundamentally wrong. As a technically minded person, I came to the conclusion with great difficulty that one way or another, a lot of design has to be decided by eye. Fonts have different weights, a point can occupy a different area relative to the pin area, and it can be located with an offset up or down.
The same goes for relative heading sizes. In some projects, h1 may differ from regular text only in style.

Answer 2

You should learn more about modular scale and vertical rhythms. A visual representation of their work is here: www.gridlover.net/app
Regarding the implementation - for modular scale there is a corresponding sass gem , for vertical rhythms - different options, for example, the same compass .
Regarding the amount of indentation - this is determined separately for each part of the project. Use the outer-inner rule to set general indentation values, and vertical rhythms to set specific values.