CSS / Типографика

Конвертер line-height

Переводите высоту строки между пикселями, процентами, em и безразмерным значением. Сразу проверяйте ритм на реальном тексте и копируйте готовую CSS-декларацию.

Начать расчёт Все инструменты

Расчёт на устройстве4 форматаБез сохранения данных

Для расчётов нужен JavaScript. Если калькулятор не загрузился, обновите страницу. Ниже показан пример; поля станут доступны после загрузки.

Рабочая область

Введите исходные значения

При смене единицы конвертер сохраняет фактическую высоту строки. Например, 26px автоматически превратятся в 162.5%, а не в другое визуальное значение.

line-height.converterРаботает в браузере

Исходные данные

Размер шрифта нужен для пересчёта относительного значения в пиксели и обратно.

Размер шрифта, px

Например, 16 для основного текста или 48 для заголовка.

Исходный line-height

Единица

Быстрые примеры

Безразмерное значение1,625

Комфортная отправная точка для основного текста и длинных материалов.

Пиксели: 26 px
Проценты: 162,5%
em: 1,625em
Формула: line-height ÷ font-size

CSSline-height: 1.625;

Живое превью

Проверьте ритм на абзаце

В предпросмотре размер шрифта ограничен для удобства, но пропорция между строками соответствует результату конвертера.

Хороший межстрочный интервал помогает взгляду находить начало следующей строки и удерживает абзац цельным. Проверяйте значение на реальном тексте, нужной ширине колонки и в обеих цветовых темах.

Единицы CSS

Какой формат использовать

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

1.625

Без единицы

Обычно лучший вариант для компонентов и длинного текста: дочерний элемент умножает значение на собственный размер шрифта.

26px

Пиксели

Фиксируют точную высоту строки. Полезны в редких жёстких макетах, но требуют внимания при масштабировании текста.

162.5%

Проценты

Считаются относительно размера шрифта элемента. Визуально совпадают с безразмерным значением, но наследуются иначе.

1.625em

em

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

По теме

CSS