Кегль

Кегль — один из тех терминов, который пришёл в digital из традиционной типографики и до сих пор влияет на читаемость любого контента: лендингов, отчётов, презентаций для клиентов. Размер шрифта напрямую определяет, сколько времени пользователь потратит на чтение и дочитает ли он текст до конца. Для digital-агентств это особенно критично: неверно подобранный кегль в клиентском кабинете или маркетинговом материале снижает доверие и портит восприятие данных.

Что такое кегль и откуда он взялся

Кегль — это высота шрифта, измеряемая в типографских пунктах (пт / pt). Один типографский пункт равен примерно 0,353 мм. В эпоху наборного шрифта кеглем называли высоту металлического бруска с литерой — сегодня это виртуальная величина в любом редакторе или верстальщике.

В веб-среде кегль чаще задаётся в пикселях (px) или относительных единицах (rem, em). При этом 16px — стандартный базовый размер шрифта в браузерах, от которого отстраивается вся типографская система сайта.

Как работает кегль на практике

Восприятие текста зависит не только от размера шрифта, но и от его соотношения с межстрочным интервалом, шириной колонки и окружающим пространством. Ориентиры, которые работают в digital-проектах:

• 9-11 пт — сноски, подписи к графикам, юридические оговорки
• 12-14 пт — основной текст в документах и PDF-отчётах
• 14-16 пт — основной текст на веб-странице и в интерфейсах
• 18-24 пт — подзаголовки и акцентные блоки
• 28 пт и выше — заголовки, баннеры, hero-секции

Слишком мелкий кегль заставляет пользователя напрягать зрение и пропускать части текста. Слишком крупный — увеличивает количество строк, глаз постоянно «прыгает», и чтение утомляет. Оба варианта бьют по конверсии.

Как подбирать кегль

Универсальной формулы нет, но есть рабочий алгоритм:

1. Определить носитель: экран, печать, мобильное устройство
2. Задать базовый размер основного текста (обычно 16px для веба)
3. Выстроить иерархию: заголовок H1 — x2,5, H2 — x1,75, H3 — x1,25 от базы
4. Проверить читаемость на реальном устройстве, а не только в макете
5. Убедиться, что межстрочный интервал составляет 1,4-1,6 от кегля

Сравнение кеглей по задачам

Типичные ошибки

Ошибка 1. Использовать одинаковый кегль для мобильной и десктопной версии. На маленьком экране шрифт в 14px читается как мелкий, даже если на мониторе он выглядит нормально. Под каждое разрешение нужна отдельная типографская настройка.

Ошибка 2. Игнорировать иерархию размеров. Когда заголовок и подзаголовок отличаются на 1-2 пункта, структура текста перестаёт считываться визуально. Читатель теряется и уходит — особенно в длинных отчётах и лендингах.

Ошибка 3. Подбирать кегль только в макете, не тестируя на реальном носителе. Шрифт 12 пт в Figma и 12 пт в распечатанном PDF воспринимаются по-разному. Финальное решение всегда проверяется «вживую».

Мнение эксперта

Кегль — это первое, на что обращаешь внимание при аудите чужих маркетинговых материалов. Агентства часто экономят время на типографике, не понимая, что нечитаемый отчёт клиент воспринимает как небрежность в работе в целом. Я всегда рекомендую зафиксировать базовую шрифтовую систему в брендбуке агентства и применять её везде: от презентаций до клиентских дашбордов. Это занимает пару часов один раз, но экономит недели споров потом.

FAQ

Чем кегль отличается от размера шрифта?

На практике эти термины используют как синонимы, но исторически кегль — это высота металлического бруска, включая верхние и нижние выносные элементы. Размер шрифта в современных редакторах — цифровой эквивалент кегля. В веб-дизайне и digital-маркетинге понятия взаимозаменяемы.

Какой кегль выбрать для основного текста на сайте?

Стандарт для десктопа — 15-17 px, для мобильного — 16-18 px. Меньше 14 px на веб-странице — почти всегда ошибка с точки зрения читаемости. Лучший способ проверить: откройте страницу на реальном смартфоне и попросите коллегу прочитать абзац без увеличения.

Влияет ли кегль на SEO?

Прямого влияния нет, но косвенное — есть. Нечитаемый текст увеличивает показатель отказов и снижает время на странице, а это поведенческие сигналы, которые учитывают поисковые системы. Google также уделяет внимание мобильной читаемости через Core Web Vitals и рекомендации по размеру шрифта в Mobile Usability.

Как задать кегль в CSS?

Базовый размер задаётся через font-size в px, rem или em. Рекомендуется использовать rem — это относительная единица от корневого элемента, которая масштабируется корректно при изменении настроек браузера пользователем. Например, font-size: 1rem при базе 16px равно 16px.

Нужно ли согласовывать кегль с клиентом?

Если агентство делает материалы в рамках брендбука клиента — да, кегль прописывается в гайдлайне. Если брендбука нет, агентство предлагает собственную типографскую систему и объясняет логику выбора. Это снимает вопросы «почему так мелко» и «почему так крупно» на этапе согласования.