Высота шрифта

Курсы §3. [Архив] Разметка текста
1

Прочитал статью и запутался:

И возник вопрос, как определяется высота шрифта?
В той статье это не рассказано.

Вот здесь http://htmlbook.ru/css/font-size
написано, что это расстояние от базовой линии до верхней границы кегельной площадки.
Что такое кегельная площадка?

Line-height исходя из статьи https://htmlacademy.ru/blog/94-the-vertical-align-property
изначально равна x-height (там вроде так нарисовано)?

P.S.
вот здесь еще есть весьма абстрактное определение высоты шрифта: https://learn.javascript.ru/font-size-line-height
Просто , как я понимаю, обычно line-height устанавливают больше, чем шрифт. А затем
в photoshop , чтобы рассчитать расстояние между двумя блоками с текстом, например между p и h2 - учитывают разницы с двух сторон (line-height - font-size) / 2 , ну и далее вычисляют необходимый для блоков margin. Это интуитивно понятно, но немного непонятно точное определение font-size и line-height.

2

Размер шрифта, высота шрифта и высота строки - это всё разные понятия. Высоту шрифта обычно не измеряют и она не равна font-size, для каждого вида шрифта величина разная.

3

Спасибо за инф.

Единственное, хотелось бы допонять по каким линиям измеряется font-size и line-height, например, относительно этой статьи https://htmlacademy.ru/blog/94-the-vertical-align-property
(если там эти линии присутствуют)

4

line-height там показана , как изначально равная x-height.
x-height - это просто высота буквы x. Это если я правильно понял.
line-height мы всегда можем увеличить.
а где там font-size, который размер шрифта .

(С высотой, я так понял, можно не связываться. Кстати , интересно, высота шрифта там случайно не так получается “высота шрифта” = font top - font bottom )

5

P.S.
наверное это оно, если не ошибочный рисунок:

2 лайка