Как сравнивать высоту шрифтов?

Question

[Иван Ноунэйм]

Почему у разных шрифтов визуально сильно разная высота, при одинаковом размере в пикселях?
Я пишу программу которая генерирует случайные тексты с заголовками, причем текст и заголовок должны быть разными шрифтами. Бывают ситуации когда у шрифта текста в CSS стоит к примеру font-size: 20px, а у шрифта заголовка font-size: 27px, но при этом шрифт заголовка визуально меньше чем шрифт текста.

Почему такое происходит, и как тогда сравнивать размер разных шрифтов?

Answer 1

[dom1n1k]

Да, есть такое. Читайте литературу по шрифтам.
Ключевые слова: литера, кегль, очко, заплечики, x-height, cap-height.

Больше всего на визуальное восприятие размера текста влияет x-height. И она действительно может плавать в широких пределах. Выхода три:
1. Подгонять на глаз.
2. Если у вас фиксированный набор шрифтов, прописать их высоты в некий LUT.
3. Вытаскивать метрику из шрифтового файла программным способом.

Но последний случай довольно замороченный, там придется погружаться в кучу еще других метрик.
Вот можно взглянуть: https://fontdrop.info/ (вкладка "data")

Comments

[Сергей delphinpro]

Иван Ноунэйм а начать можете отсюда — Неизведанные глубины CSS: метрики шрифта, line-hei...