Как нивелировать расстояние от верхней границы элемента до символов текста?

Всем привет!

Собственно вопрос вот какой: при использовании достаточно больших размеров шрифта(чаще всего в h1-h3 элементах) имеем странное расстояние от верхней границы элемента до верхней границы символа:


Понимаю, что можно от него избавиться(частично) установив line-heigth в значение 1, но ситуация такая, что заголовок может состоять из нескольких строк и нормальный интерлиньяж все же важен.

Более того, это расстояние варьируется от шрифта к шрифту. Вот jsfiddle для примера: https://jsfiddle.net/9tsb9Lmf/

При pixel-perfect верстке это создает серьезные проблемы ибо непонятно откуда берутся данные цифры и как они будут себя вести на другом шрифте. Например мне нужно отцентровать блок с заголовком, но я не знаю, что будет с этим расстоянием, в итоге блок смещается визуально вниз. Что с этим делать?