Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж

Василий! У меня вопрос к примеру из совета о вёрстке картинок: https://bureau.ru/soviet/20170831/ У абзаца и заголовка третьего уровня одинаковые font‑size и line‑height. Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж?

Я не Василий, но попробую ответить.

При одинаковом кегле и высоте строки разные шрифты выглядят по‑разному:

Бюросанс 30пк/40пк
Гельветика 30пк/40пк
Бюросанс выглядит мельче и не выравнивается с Гельветикой

Дело в том, что у каждого шрифта есть собственные метрики, с помощью которых он определяет свои реальные размеры и расположение внутри строки.

С помощью font-size мы задаём размеры квадрата, относительно которого рассчитываются реальные размеры шрифта. Относительные размеры реальных символов в шрифтах различаются, поэтому Бюросанс выглядит мельче Гельветики при одном кегле.

line-height задаёт высоту строки, внутри которой рисуются символы. Но высота базовой линии задаётся внутри шрифта, поэтому расположенные рядом Бюросанс и Гельветика не выравниваются друг с другом.

Из‑за этого расстояние между базовыми линиями отличается от высоты строки:

Бюросанс 30пк/40пк
Гельветика 30пк/40пк
40пк
40пк
43пк
Расстояние между базовыми больше высоты строки

В следующем совете расскажу о том, как мы решаем это проблему в наших проектах.

Веб‑разработка
Отправить
Поделиться
Запинить

Комментариев пока нет

Рекомендуем другие советы