Я не Василий, но попробую ответить.
При одинаковом кегле и высоте строки разные шрифты выглядят по‑разному:
Винсент де Оливьера о метриках шрифтов
Дело в том, что у каждого шрифта есть собственные метрики, с помощью которых он определяет свои реальные размеры и расположение внутри строки.
Винсент де Оливьера о метриках шрифтов
С помощью font-size
мы задаём размеры квадрата, относительно которого рассчитываются реальные размеры шрифта. Относительные размеры реальных символов в шрифтах различаются, поэтому Бюросанс выглядит мельче Гельветики при одном кегле.
line-height
задаёт высоту строки, внутри которой рисуются символы. Но высота базовой линии задаётся внутри шрифта, поэтому расположенные рядом Бюросанс и Гельветика не выравниваются друг с другом.
Из‑за этого расстояние между базовыми линиями отличается от высоты строки:
В следующем совете расскажу о том, как мы решаем это проблему в наших проектах.