Кегль

Содержание

• Что такое кегль
• Где используется кегль
• Как влияет на восприятие
• Кегль в цифровой среде
• Кейс: увеличение кегля в карточках товара повысило конверсию

Что такое кегль

Кегль — это размер шрифта. Он определяет, насколько крупными будут буквы в тексте. Чем больше кегль, тем крупнее символы и тем заметнее текст. Измеряется в типографских пунктах (пт). Один пункт — это 1/72 дюйма, или примерно 0,35 мм. В интерфейсах и редакторах, вроде Word или Figma, обычно пишут просто число: 12 pt, 14 pt, 24 pt — это и есть кегль.

Где используется кегль

1. В дизайне сайтов и интерфейсов. Кегль задаёт визуальную иерархию. Помогает пользователю отличать заголовки, кнопки, описания, уведомления. Если шрифт слишком мелкий, пользователь не читает. Если слишком крупный — устаёт.

Пример: в интернет-магазине карточка товара должна содержать описание (14–16 pt), цену (18–24 pt), кнопку «в корзину» (16–18 pt). Всё это — про кегль.

2. В email-рассылках. Письма читают с экрана телефона. Если кегль меньше 14 pt, текст выглядит сжатым и неудобным. Особенно на iOS, где сглаживание другое.

Пример: маркетолог отправляет письмо с акцией. Если основной текст — 12 pt, клики падают. После увеличения до 16 pt CTR вырос на 27%.

3. В лендингах и презентациях. Заголовки должны быть заметны, а основной текст — читаем. Кегль помогает расставить акценты: что важно, что второстепенно.

Пример: на лендинге заголовок H1 — 32 pt, подзаголовок — 20 pt, текст в блоках — 16 pt. Это даёт структуру, не перегружает взгляд.

4. В печатных макетах (буклеты, листовки, плакаты). В печати важно, чтобы текст читался с нужного расстояния. Плакат на улице — минимум 40–60 pt. Буклет — не меньше 10 pt.

Пример: в листовке о скидках кегль 9 pt — люди не читают. После увеличения до 12 pt и смены шрифта читабельность выросла по фокус-группе на 80%.

5. В приложениях и баннерах. На мобильном экране кегль решает, виден ли текст. В 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