1

Высота текста больше чем он занимает на самом деле, в чём причина ?

@import url('https://fonts.googleapis.com/css?family=Quicksand');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header__text h1 {
  color: #000;
  font-family: "Quicksand", sans-serif;
  font-size: 72px;
  font-weight: 700;
  text-transform: uppercase;
}
<div class="header__text">
  <h1>Top designers</h1>
</div>

4
  • Если вы указываете font-size 72 то это не значит что буквы будут высотой 72px
    – midia
    13 авг 2018 в 14:54
  • Так, а как сделать чтобы не было этих отступов лишних, чтобы размер был по содержимому
    – Netahaki
    13 авг 2018 в 19:11
  • Вроде никак я не очень вникаю в тему шрифтов предпочитая оставить все как есть:)
    – midia
    14 авг 2018 в 3:31
  • htmlbook.ru/css/font-size
    – midia
    14 авг 2018 в 6:25

1 ответ 1

2

Так происходит потому что у шрифта есть область содержимого(контейнер), ее установил автор шрифта и вней отрисовуются элементы(знаки/буквы и тп).

У каждого шрифта есть свои метрики(размеры), размер контейнера вашего шрифта равен 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.