Так происходит потому что у шрифта есть область содержимого(контейнер), ее установил автор шрифта и вней отрисовуются элементы(знаки/буквы и тп).
У каждого шрифта есть свои метрики(размеры), размер контейнера вашего шрифта равен 1000em (или UPM, units per em — единиц на кегль), а заглавные буквы равны 700. Из за этого получается пространство вокруг элемента. Так же, стандартное значение line-height: normal
может задавть доп. пространство, исходя из метрик для вашего шрифта оно будет равно
Ascent(1000) + Descent(250) + Line Gap(0) = 1.25(1250)
Что даст нам при font-size: 100px
строку высотой в 125px. Но, сами буквы будут 70px - заглавные и 51 - строчные.
Что бы получить высоту заглавных в 72px нам нужно, желаемый размер разделить на высоту заглавных для вашего шрифта:
72 / 0.7 = ~103(font-size: 103px
).
P.S. Данные расчеты исключительно для демонстрации. На практике скорее всего они вам не пригодяться, так как все шрифты имеют разные характеристики, их размер может зависеть от ОС и других факторов.
Более подробно описанно в Неизведанные глубины CSS: метрики шрифта, line-height и vertical-align
@import url('https://fonts.googleapis.com/css?family=Quicksand');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header__text .first {
color: #000;
font-family: "Quicksand", sans-serif;
font-size: 100px;
font-weight: 700;
text-transform: uppercase;
}
.header__text .second {
color: #000;
font-family: "Quicksand", sans-serif;
font-size: 103px;
font-weight: 700;
text-transform: uppercase;
}
<div class="header__text">
<code>font-size: 100px;</code>
<h1 class="first">Top designers</h1>
<code>font-size: 103px;</code>
<h1 class="second">Top designers</h1>
</div>