Школа
Веб-разработка

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

Василий!

У меня вопрос к примеру из совета о вёрстке картинок: https://bureau.ru/soviet/20170831/

У абзаца и заголовка третьего уровня одинаковые font‑size и line‑height. Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж?

Андрей Ерес
26 окт 2017
👁 3996  
Веб-разработка

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

Василий!

У меня вопрос к примеру из совета о вёрстке картинок: https://bureau.ru/soviet/20170831/

У абзаца и заголовка третьего уровня одинаковые font‑size и line‑height. Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж?

Андрей Ерес
26 окт 2017
👁 3996  
Руст Кулматов
Фронтенд‑разработчик, преподаватель, соавтор движка электронных книг бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

Веб‑разработка
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

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

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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