Кегль

Кегль — это типографский параметр, определяющий размер шрифта и высоту литеры, который в Веб-разработке задаётся через CSS-Свойство font-size. В интернет-маркетинге корректный выбор кегля напрямую влияет на Юзабилити, Поведенческие факторы и конверсию Landing Page. Правильная настройка размера текста снижает когнитивную нагрузку на пользователя и улучшает индексацию контента поисковыми системами.

Главное

Кегль определяет высоту символа, но не его ширину или начертание; он является базовым строительным блоком визуальной иерархии.
Оптимальный размер для основного текста на десктопе составляет 16–18 пикселей (px), что соответствует стандарту доступности WCAG.
В CSS используются абсолютные единицы (px, pt) и относительные (em, rem); последние предпочтительнее для адаптивной верстки.
Слишком мелкий текст увеличивает Показатель отказов, а слишком крупный снижает Плотность информации и замедляет сканирование страницы.
Кегль неразрывно связан с межстрочным интервалом: при увеличении размера шрифта необходимо пропорционально увеличивать line-height.

Как работает Кегль

Кегль функционирует как математическая основа для рендеринга текста в браузере, вычисляя физическую высоту глифа относительно единицы измерения экрана. При задании значения font-size Браузер использует текущую гарнитуру для расчета метрик каждой буквы, включая ascender (выносные элементы вверх) и descender (выносные элементы вниз). Если используется абсолютная единица, например, 16px, размер остается фиксированным независимо от настроек пользователя или родительских контейнеров. Это может нарушить доступность для слабовидящих людей, которые увеличивают масштаб в системных настройках ОС.

Относительные единицы, такие как rem (Root em) или em, обеспечивают динамическое масштабирование. Значение rem всегда привязано к размеру шрифта корневого элемента <HTML>, что позволяет легко менять базовый размер всего сайта, изменяя только одно правило. Единица em масштабируется относительно размера шрифта непосредственного родителя, что создает каскадный эффект увеличения. Такой подход лежит в основе современных дизайн-систем, где Типографика адаптируется под любые разрешения экранов без потери читаемости.

Зачем нужен Кегль

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

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

Какие бывают виды кегля

Классификация размеров шрифта в Веб-дизайне обычно делится на функциональные группы, каждая из которых решает свою задачу в интерфейсе. Выделяют заголовочную типографику (H1-H6), основной Текстовый блок, вспомогательный текст (подписи, даты, комментарии) и микротекст (лицензии, дисклеймеры). Также существует разделение по техническому исполнению: статичный кегль, который не меняется при ресайзе окна, и адаптивный, меняющийся через медиазапросы CSS.

Группа текста	Рекомендуемый размер (Desktop)	Рекомендуемый размер (Mobile)	Назначение
H1 (Заголовок страницы)	32–48 px	28–36 px	Главный Оффер, Тема статьи
H2-H3 (Подзаголовки)	24–30 px	20–24 px	Структурирование блоков контента
Основной текст	16–18 px	16–18 px	Чтение статей, Описание товаров
Вспомогательный текст	14–15 px	14 px	Мета-данные, теги, категории
Микротекст / UI	12–13 px	12–14 px	Кнопки, формы, сноски

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

Применение параметра размера шрифта охватывает все аспекты цифрового присутствия бизнеса: от корпоративных сайтов до email-рассылок и рекламных креативов. В Веб-разработке он является частью глобальной системы стилей (Design System), гарантируя единообразие бренда во всех компонентах интерфейса. В Контент-маркетинге размер текста подбирается исходя из типа материала: новостные сводки требуют более крупного кегля для быстрого потребления, тогда как технические инструкции могут содержать мелкие детали в таблицах.

В мобильном маркетинге и разработке приложений минимальный рекомендуемый размер для кликабельных элементов составляет 14–16 px, чтобы обеспечить Удобство нажатия пальцем (Touch Target Size). В email-маркетинге важно учитывать ограничения почтовых клиентов: многие из них игнорируют сложные CSS-медиазапросы, поэтому базовый кегль часто фиксируется в абсолютных единицах (например, 14px или 16px) для максимальной совместимости. Использование правильного размера также критично для печатных PDF-генераторов, создаваемых на базе Веб-технологий.

Пример: установка и чтение кегля

Для демонстрации работы относительных единиц и настройки базовой типографики рассмотрим фрагмент CSS-кода. Здесь мы устанавливаем корневой размер в 16 пикселей, а затем используем rem для заголовков и основного текста. Это обеспечивает легкую Масштабируемость всей страницы при изменении одного значения в :Root.

CSS

:root {
  --base-font-size: 16px;
  --line-height-base: 1.5;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--base-font-size);
  line-height: var(--line-height-base);
}

h1 {
  font-size: 2.5rem; /* 40px */
}

p {
  font-size: 1rem; /* 16px */
}

Часто задаваемые вопросы кегля

Часто задаваемые вопросы

Чем отличается кегль от интерлиньяжа?

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

Почему нельзя использовать пиксели для адаптивных сайтов?

Использование пикселей не запрещено, но оно делает текст фиксированным. Если Пользователь увеличит масштаб в настройках браузера для улучшения читаемости, пиксельный текст может остаться прежним или исказиться. Относительные единицы (rem/em) автоматически масштабируются вместе с системными настройками пользователя, что является стандартом доступности.

Какой минимальный размер шрифта допустим для чтения?

Рекомендуемым минимумом для основного текста считается 16 пикселей. Для вспомогательной информации допускается снижение до 14 пикселей, однако ниже 12 пикселей текст становится трудночитаемым на большинстве современных экранов, особенно на мобильных устройствах, что негативно сказывается на удержании аудитории.

Влияет ли размер шрифта на ранжирование в Google?

Google не использует размер шрифта как прямой сигнал ранжирования. Однако косвенное влияние огромно: плохая читаемость из-за неверного кегля приводит к высокому показателю отказов и короткому времени на сайте. Эти поведенческие сигналы алгоритмы учитывают при определении качества страницы и её позиций в выдаче.

Итоги

Кегль представляет собой фундаментальный элемент Веб-типографики, определяющий размер символов и влияющий на всю структуру восприятия информации пользователем.

Размер шрифта задается через CSS-Свойство font-size и может измеряться в абсолютных или относительных единицах.
Базовый размер основного текста должен составлять не менее 16 пикселей для обеспечения комфортного чтения на любых устройствах.
Использование относительных единиц (rem) предпочтительнее для создания гибких и доступных дизайн-систем.
Правильная Визуальная иерархия, построенная на различии кеглей заголовков и текста, повышает конверсию и Вовлеченность.
Параметр тесно связан с межстрочным интервалом, и их нужно настраивать комплексно для сохранения вертикального ритма.
Несоответствие размера шрифта требованиям доступности может привести к потере части аудитории и снижению SEO-метрик.
Выбор оптимального кегля требует баланса между эстетикой дизайна, плотностью контента и удобством использования интерфейса.