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

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

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

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

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

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

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

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

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

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

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