Spacing between text with line-height - html

Question

I would like to have a spacing between a h1 and a span, which should be 30px. It should be 30px from the bottom of the letters from the h1 to the top of the letters of the span, which comes below the h1, here a picture where the spacing of 30px should be (blue box shows spacing):
My h1 and span have some line-height. I made a border around it, so the line-height is visible. If I set now a margin-bottom of 30px to the h1 it looks like this:
The spacing begins at the end of the h1 element and ends at the start of the span element. The line-height is between the start/end of the element and the letters. So the spacing includes also the line-height and it is not exactly 30px. What's the best way to solve this? I know, that I could set the margin-bottom like this: margin-bottom: 30px - [LINE-HEIGHT]; But how can I know, how much the two red boxes (line-heights) are, to subtract it correctly so that the spacing becomes exactly 30px?
h1 {
font-family: Arial;
font-size: 45px;
line-height: 54px;
letter-spacing: 0;
color: darkred;
border: 1px solid black;
margin: 0 0 30px;
}
span {
font-family: Arial;
font-size: 30px;
line-height: 39px;
letter-spacing: 0;
color: gray;
border: 1px solid black;
}
<h1>Default main title</h1>
<span>Proin eget tortor risus. Vivamus magna justo, lacinia</span>
Here is my codepen example: https://codepen.io/STWebtastic/pen/QarjJO
I hope this is clear enough.

Answer 1

hmmm not really how internet typography works.
Setting line-height:100%; margin:0; padding:0; and box-sizing:border-box; (so the borders are not added to the height) will get you somewhat closer.
But the real problem is that in browsers, line-heights include the spacing reserved for descenders (think the bottom parts of q, j, g)and ascenders. Plus some extra bits that I cannot really explain. I'm no designer, even less of a font expert.
So the only way you can actually achieve what you'r looking for is by adjusting the line-height with magic numbers (those that you get from trial and error) to a lower value than your actual font-size. The right value is normally in the ballpark of 68-70%, but there's no formula valid for any font size, let alone any font.
body {
font-family: Arial;
}
*{
box-sizing:border-box;
}
h1 {
font-size: 45px;
line-height:31px;
letter-spacing: 0;
color: darkred;
border: 1px solid black;
margin: 0 0 30px;
}
p {
font-size: 30px;
line-height:21px;
color: gray;
}
h1, p{
padding:0;
margin:30px 0;
border: 1px solid black;
}
<h1>Default qgj main Title</h1>
<p>Proin eget tortor risus. Vivamus magna justo, </p>
this is, of course, extremely fragile and prone to issues. So your best bet to achieve something somewhat similar is to keep using magic numbers in the margins instead.
There are some formulas out there to make your guesses easier, but they are really dependant on your selected font, font size, etc.So again, magic numbers.

Answer 2

I think you should read this first: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
As you can see, a font itself has a certain line height (the white space between the character and the bottom border). So if you set the font-size: 45px and line-height:45px there will still be a white space (try it in your fiddle and inspect the element for proof). It has to do how the font was rendered by the em-square, which is not proportional.
You can choose a font that has characters which use the entire em-square. But I don't know how easy is to find this...
As far as I can tell, the best you can do is indeed what already was suggested: trial and error until you figure 30px.

Answer 3

Some characters such as the lowercase j or g have a "descender". Thus your question is flawed to begin with because you don't seem to account for those descenders which are part of font height.

Answer 4

To simplify the question, you’re asking: How do I ensure that there is a 30px space between the baseline of an h1 element and the cap line of a span below it?
It looks like there is a nifty project on GitHub called cap-height that can help you with this as long as you’re loading your typefaces using Web Font Loader.
You can calculate the cap height of both your h1 and your span, set their respective line-height to match their cap heights, and then add padding-bottom: 30px to your h1. You’ll also want to set margin: 0 so that you’re eliminating any vertical space between the two elements.
Here’s a fiddle example of this that I did manually.