Разница между кеглем, высотой букв и межстрочным интервалом

«Размер шрифта по вертикали» в профессиональной среде называется кеглем. Это полная высота шрифтового знака, включающая саму букву, выносные элементы (хвостики вверх и вниз) и техническое пространство для соседних строк. Важно понимать: кегль — это не высота конкретной буквы «А» или «а», а размер контейнера, в котором эта буква находится. В цифровой верстке кеглю соответствует свойство font-size, но визуальный масштаб текста также сильно зависит от высоты строчных букв (x-height) и межстрочного интервала (line-height).

Что такое кегль и почему это не просто «высота буквы»

Кегль (от нем. Kegel) — это базовая единица измерения размера шрифта. Исторически в металлическом наборе это была высота литеры (металлического бруска с буквой). В цифровую эпоху кегль определяет виртуальную высоту глифа вместе с зонами безопасности сверху и снизу, чтобы буквы из разных строк не наезжали друг на друга.

Измеряется кегль в пунктах (pt). Стандартные значения:

• 8–9 pt — сноски, примечания.
• 10–12 pt — основной текст в книгах и печатных изданиях.
• 14–16 pt — комфортный размер для чтения с экрана (веб-статьи, интерфейсы).
• 24+ pt — заголовки.

Ключевые термины: Cap Height, X-Height и Выносные элементы

Чтобы понимать, почему шрифты ведут себя по-разному при одинаковном font-size, нужно разобрать анатомию знака.

X-Height (Высота строчных)

Это высота основных строчных букв (таких как a, c, e, x) без учета выносных элементов. Измеряется от базовой линии до средней линии (mean line).

• Почему это важно: Шрифты с большим x-height (например, Verdana или Inter) кажутся более крупными и читаемыми при малых кеглях. Шрифты с маленьким x-height (например, Garamond или Bodoni) выглядят изящнее, но требуют большего размера для комфортного чтения.

Cap Height (Высота прописных)

Расстояние от базовой линии до верхней границы заглавных букв (например, H или E).

• Нюанс: Cap height почти всегда меньше полного кегля. Между верхом заглавной буквы и верхней границей шрифтового контейнера всегда есть небольшой зазор (overshoot), который нужен для визуального баланса.

Выносные элементы (Ascenders & Descenders)

• Ascenders (восходящие): Части букв, поднимающиеся выше средней линии (у букв b, d, h, k, l).
• Descenders (нисходящие): Части букв, опускающиеся ниже базовой линии (у букв g, j, p, q, y).

Именно наличие длинных выносных элементов требует увеличения межстрочного интервала, иначе текст будет выглядеть слипшимся.

Сравнение параметров шрифта

Как это работает в веб-верстке (CSS)

В вебе понятие «кегль» трансформировалось в свойство font-size, а управление вертикальным ритмом перешло к line-height. Понимание их взаимосвязи критично для адаптивного дизайна.

Font-size vs Line-height

• font-size задает размер шрифта. Браузеры используют это значение для расчета многих других величин (например, размеров em/rem).
• line-height (интерлиньяж) — это расстояние между базовыми линиями двух соседних строк.

Если line-height равен font-size (коэффициент 1.0), строки будут идти впритык. Для основного текста это недопустимо — выносные элементы соседних строк столкнутся.

Единицы измерения

Для задания вертикальных размеров лучше использовать относительные единицы:

• rem — для font-size. Позволяет пользователю масштабировать текст через настройки браузера.
• Безразмерные числа — для line-height (например, line-height: 1.5;). Это гарантирует, что межстрочный интервал будет пропорционален размеру шрифта, даже если он изменится на мобильном устройстве.

Частые ошибки в типографике

1. Слишком маленький интерлиньяж. Самая распространенная ошибка. При увеличении font-size часто забывают пропорционально увеличить line-height. Текст становится трудно читать, глаза быстро устают.
2. Игнорирование x-height при замене шрифта. Если вы заменяете один шрифт на другой с тем же font-size, но меньшим x-height, текст визуально «уменьшится» и потеряет контраст. Потребуется увеличить кегль на 1–2 пункта.
3. Использование пикселей (px) для основного текста. Жесткая привязка к px ухудшает доступность (accessibility). Пользователи со слабым зрением не смогут удобно масштабировать такой текст.
4. Путаница между tracking и leading.
   • Leading (интерлиньяж) — расстояние по вертикали.
   • Tracking (кернинг/трекинг) — расстояние по горизонтали между буквами. Увеличение трекинга не спасет текст с плохим интерлиньяжем.

FAQ

Почему шрифт размером 16px выглядит меньше, чем другой шрифт 16px? Потому что у них разная высота строчных букв (x-height) и разные пропорции выносных элементов. Шрифт с большим x-height занимает больше полезного пространства внутри своего кегля.

Что делать, если текст «слипается»? Не уменьшайте размер шрифта. Увеличьте line-height. Оптимальное значение для веба — 1.5 (или 150% от размера шрифта).

В чем разница между pt и px? В полиграфии 1 pt = 1/72 дюйма. В вебе 1 px зависит от плотности пикселей экрана (PPI). Однако браузеры условно считают 1 pt ≈ 1.33 px. Для экранов лучше использовать px, rem или em, оставляя pt для стилей печати (@media print).

Как быстро проверить читаемость текста? Откройте страницу на смартфоне. Если вам приходится щуриться или вы теряете строку при переходе с конца одной на начало другой — увеличьте font-size до 16–18px и line-height до 1.5.