- Словарь
Что такое Кегль
Материал входит в глоссарий «Словарь маркетолога», созданный командой Retail Rocket. Мы объясняем термины, с которыми работают digital-специалисты, простыми словами. В этой статье разбираем — что такое кегль, зачем он важен, и как влияет на восприятие текста.
Что такое кегль
Где используется кегль
В дизайне сайтов и интерфейсов. Кегль задаёт визуальную иерархию. Помогает пользователю отличать заголовки, кнопки, описания, уведомления. Если шрифт слишком мелкий, пользователь не читает. Если слишком крупный — устаёт. Например, в интернет-магазине карточка товара должна содержать описание (14–16 pt), цену (18–24 pt), кнопку «в корзину» (16–18 pt).
В email-рассылках. Письма читают с экрана телефона. Если кегль меньше 14 pt, текст выглядит сжатым и неудобным. Особенно на iOS, где сглаживание другое. Например, маркетолог отправляет письмо с акцией. Если основной текст — 12 pt, клики падают. После увеличения до 16 pt CTR вырос на 27%.
В лендингах и презентациях. Заголовки должны быть заметны, а основной текст — читаем. Кегль помогает расставить акценты: что важно, что второстепенно. Например, на лендинге заголовок H1 — 32 pt, подзаголовок — 20 pt, текст в блоках — 16 pt. Это даёт структуру, не перегружает взгляд.
В печатных макетах (буклеты, листовки, плакаты). В печати важно, чтобы текст читался с нужного расстояния. Плакат на улице — минимум 40–60 pt. Буклет — не меньше 10 pt. Например, в листовке о скидках кегль 9 pt — люди не читают. После увеличения до 12 pt и смены шрифта читабельность выросла по фокус-группе на 80%.
В приложениях и баннерах. На мобильном экране кегль решает, виден ли текст. В push-уведомлении — 14–16 pt. В баннере — от 18 pt. Например, баннер с кеглем 12 pt не читается в рекламе в соцсетях. После увеличения до 20 pt и сокращения текста кликабельность выросла в 2 раза.
Чем кегль отличается от размера текстового блока
Кегль — это размер самих букв, то есть высота символов от нижней точки до верхней, включая выносные элементы (например, «д» или «й»). Он измеряется в пунктах (pt) и показывает, насколько крупным будет текст.
Но размер всего текстового блока — это другое. Он включает не только шрифт, но и:
- межстрочный интервал (leading) — расстояние между строками;
- внутренние отступы (padding) — расстояние от текста до границ блока;
- внешние отступы (margin) — пространство между элементами;
- обводку, фон, рамку — визуальные элементы, которые расширяют блок.
Два текстовых элемента могут использовать одинаковый кегль — например, 16 pt — но выглядеть разными по размеру. Один кажется крупнее, потому что строки дальше друг от друга или есть дополнительные отступы. Второй — компактнее, потому что всё сжато.
Как влияет на восприятие
- Мелкий кегль (<11 pt): текст выглядит аккуратно, но его сложно читать на экранах. Особенно на мобильных.
- Средний кегль (12–16 pt): комфортный размер для основного текста. Хорошо читается с экрана, подходит для e-mail, сайтов, карточек товаров.
- Крупный кегль (>18 pt): используется для заголовков, цифр, призывов к действию. Привлекает внимание.
Сам по себе кегль не гарантирует удобства. Он работает в паре с межстрочным интервалом (leading), длиной строки, плотностью текста.
Какой кегель должен быть на сайте
В digital-дизайне нет жёстких стандартов. Но есть практика:
- Основной текст на сайте: 14–16 pt
- Подписи и вспомогательный текст: 12–14 pt
- Заголовки H1–H3: 20–36 pt и выше
- В email: не меньше 14 pt, чтобы читалось на телефоне
Если сделать кегль слишком мелким, человек закроет страницу. Слишком крупным — пролистывать станет неудобно.
Как увеличение кегля в карточках товара может повысить конверсию
Интернет-магазин одежды получал стабильный трафик — около 40 000 пользователей в день. По данным аналитики, 74% посетителей заходили с мобильных устройств. Основной экран входа — карточка товара. В ней отображались фото, название, цена, размерный ряд и текстовое описание.
Описание было набрано шрифтом 12 pt, межстрочный интервал — 1,2. На десктопе текст выглядел компактно, но на мобильных — слишком мелко. Пользователи вынужденно масштабировали экран или пропускали описание полностью.
По данным UX-исследования (через тепловые карты и видеозаписи сессий), 67% мобильных пользователей не дочитывали описание до конца. В отчётах Google Analytics доля отказов на карточке товара с мобильных устройств доходила до 61%. Среднее время просмотра товара — 18 секунд.
Команда внесла правку: увеличили кегль до 16 pt, изменили межстрочный интервал на 1,5 и добавили лёгкое увеличение контрастности шрифта. Никаких других изменений на странице не делали.
Через 3 недели после запуска изменений результаты были такие:
- Среднее время на карточке товара выросло с 18 до 22 секунд (+23%).
- Доля отказов с мобильных снизилась с 61% до 45%.
- Конверсия из просмотра карточки в добавление в корзину выросла на 9%.
- Количество обращений в чат с вопросами по составу и размерам товара снизилось на 18% — люди стали читать описание.
Вывод: увеличение кегля сделало текст читаемым, снизило напряжение при чтении с экрана и повысило вовлечённость. Всего +4 pt дали заметный рост без редизайна и дополнительных затрат.
Что почитать по теме
- Тимоти Самара. «Дизайн для недизайнеров». — М.: Манн, Иванов и Фербер, 2021
- Саймон Гарфилд. «Просто шрифт». — М.: Ад Маргинем, 2018.
- Butterick’s Practical Typography
