Как выровнять текст по вертикали в нестандартном шрифте?

Question

[mapleart]

Всем привет! Столкнулся с проблемой, дизайнер выбрал шрифт, который не выравнивается вертикально с использованием line-height.
Все видно на картинке:

Тут 2 шрифта один который прислал дизайнер, второй Arial. line-height: 100px; font-size - одинаковый.
Кто сталкивался с такой проблемой? есть ли из нее выход?

Answer 1

[dom1n1k]

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

Comments

[mapleart]

Проблема такая, сначала шрифт был open sans. Под него сверстался весь сайт. Элементов куча где вертикальное центрирование с помощью line-height. Сейчас с помощью flex или vertical-align все элементы исправить нереально. Я уже прочитал про базовую линию, понимаю что шансов как то исправить положение нет

[dom1n1k]

Я просто не вижу на скринах какой-то огромной проблемы. Если считать отступы по заглавным буквам, то верхний и должен быть немного меньше нижнего. Потому что текст преимущественно состоит из строчных букв и если отцентровать его по заглавным, он будет выглядеть провисшим. Вариант с Ариалом отлично отцентрован, Circe ну может совсем чуть-чуть задран, не критично.

[mapleart]

dom1n1k, Не критично для нас) Спасибо! Сделал пока padding сверху больше основные элементы выровнял

Answer 2

[historydev]

.block {
   display: flex;
   justify-content: center;
   align-items: center;
}