Инструмент подбирает вертикальные отступы так, чтобы высота строки текста равнялась высоте её букв. Полезен фронтендерам, верстающим пиксель-пёрфект, и дизайнерам, желающим управлять вертикальным ритмом. Работает на CSS.
Загрузите шрифт в формате WOFF2, OTF или TTF:
Нажмите для загрузки
Перетащите файл или кликните для загрузки
Как использовать
1. Загрузите шрифт и скопируйте полученный CSS в файл с глобальными стилями проекта, такой как styles/fonts.css.
2. Используйте утилитарный класс .metrics-fix в вёрстке везде, где нужно считать отступы от границ букв:
<number-input.label v-if="label" class="metrics-fix">
{{ label }}
</number-input.label><button type="button">
<span class="metrics-fix">{{ $t('key') }}</span>
</button>3. Чтобы компенсация автоматически работала для большей части текста на странице, примените стили к блочным элементам:
:is(.metrics-fix, p, h1, h2, h3, dt, dd, figcaption, label[for]) {
&::before {
content: '';
display: table;
margin-block-end: calc(-0.35em - (1lh - 1em) / 2);
}
&::after {
content: '';
display: table;
margin-block-start: calc(-0.15em - (1lh - 1em) / 2);
}
}Похожие инструменты
text-box-trim. Нативное свойство CSS. Пока поддерживается не всеми браузерами. Используйте его вместо «Икс-сайза», если браузерная поддержка соответствует требованиям проекта.
Capsize. Решение на Яваскрипте со встроенной базой Гугл-шрифтов.
Что дальше
Убедитесь, что в метриках файла нет расхождений. Интерлиньяж будет «плавать» в разных браузерах, если метрики для Мака и Виндоуса отличаются.
How to fix inconsistent vertical metrics in web fonts. Max Kohler
Заполифильте lh, если важна поддержка старых браузеров.
Прочитайте статью о вертикальных отступах в CSS. Если что-то идёт не по плану и вы хотите разобраться, в чём причина.
Вертикальные отступы для фронтендеров, которые верстают пиксель-пёрфект