Открываете макет, а заказчик пишет: «увеличь кегль до 16». Или читаете статью по типографике, и там через строчку «кегль», «пункт», «интерлиньяж». Слова звучат как из дореволюционной типографии, хотя означают простые вещи, с которыми вы сталкиваетесь каждый раз, когда меняете размер шрифта в Word.
Разберём: что такое кегль, что он измеряет на самом деле (не то, что вы подумали), почему один и тот же 14-й кегль в двух шрифтах выглядит по-разному и какой размер ставить в вебе, в печати и на слайдах.
Если типографика для вас пока тёмный лес, начните с более широкой темы: у нас есть разбор, что такое вёрстка и как устроена работа с макетом.
Материал пригодится дизайнерам, верстальщикам, редакторам и всем, кто оформляет презентации и документы. Разберёмся без исторического занудства, но с парой красивых фактов из прошлого — про кегли с именами вроде «Бриллиант» и «Цицеро».
А чтобы освоить тему системно, загляните в нашу подборку курсов по типографике: там программы разного уровня, от коротких интенсивов до полноценных дизайнерских профессий.
CheckroiПодборка курсов по типографике152 курса • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Кегль простыми словами
Кегль — это размер шрифта. Именно то число, которое вы вводите в поле «размер» в Word, Figma или Photoshop. Пишут и произносят его двумя способами: «кегль» и «кегель», оба варианта нормативны, в профессиональной среде чаще говорят «кегль».
Мерят кегль в типографских пунктах. Один пункт равен 1/72 дюйма, это примерно 0,35 мм. Отсюда привычные записи: 12 pt, 14 pt, 24 pt. В обиходе пункты часто опускают и говорят просто «поставь 14-й».
Что кегль измеряет на самом деле
Тут прячется главное недоразумение новичков. Кегль не равен высоте буквы. Он измеряет высоту площадки, на которой буква стоит, а сама буква всегда меньше.
Понятнее всего это объясняет история металлического набора. Раньше каждая литера была отдельным свинцовым брусочком, и кегль означал высоту этого брусочка. На нём умещался сам знак плюс запас сверху и снизу: место для выносных элементов вроде хвостика у «у» и точек над «ё», а ещё небольшой отступ, чтобы строки не слипались.
Цифровые шрифты унаследовали ту же логику. Кегль — это высота невидимого прямоугольника вокруг символа, и сколько внутри займёт сама буква, решает уже создатель шрифта. Поэтому в 16-м кегле реальная высота строчной «х» может быть и 7, и 9 пикселей.
Практический вывод. Не выбирайте кегль по числу. Ставьте, смотрите глазами на реальный размер букв и сравнивайте с соседними блоками текста.
Откуда взялся пункт
Систему предложил французский типограф Пьер-Симон Фурнье в 1737 году: он первым разбил размеры литер на равные доли и дал им общую меру. Позже её доработал Франсуа Дидо, и в Европе прижился «пункт Дидо», чуть крупнее нынешнего.
Современный стандарт пришёл из компьютерной вёрстки: ровно 1/72 дюйма, потому что такое деление удобно ложится на дюймовую сетку экранов и принтеров. Именно этот пункт использует весь софт от Word до Figma.
Кегль и соседние понятия, которые с ним путают
Вокруг размера шрифта крутится ещё несколько терминов, и в статьях их часто мешают в кучу. Разложим по полкам.
| Термин | Что означает | Пример |
|---|---|---|
| Кегль | Размер шрифта, высота площадки под символ | 16 pt |
| Интерлиньяж | Расстояние между базовыми линиями соседних строк | 24 pt при кегле 16 |
| Кернинг | Просвет между двумя конкретными буквами | Сближение «АУ», чтобы не зияла дыра |
| Трекинг | Равномерный просвет по всему фрагменту | Разрядка заголовка капслоком |
| Высота строчных | Реальная высота буквы «х» без выносных элементов | Отличается у шрифтов при одном кегле |
| Пункт | Единица измерения, 1/72 дюйма | Мера, в которой считают кегль |
Чаще всего кегль путают с интерлиньяжем, потому что в CSS и в графических редакторах их пишут рядом через дробь: 16/24. Первое число — размер букв, второе — шаг строк. Про то, как эти пары читаются в живой вёрстке, подробно рассказывали в статье про работу дизайнера полиграфии.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяПункты, пиксели, em и rem: в чём считать
Пункты остались языком печати. В вебе прижились другие единицы, и путаться в них нормально первые пару недель.
- px (пиксели) — жёсткий размер. Пишете 16 px, получаете 16 px у всех. Просто и предсказуемо, но игнорирует настройки шрифта в браузере у пользователя.
- rem — доля от базового размера страницы. Если база 16 px, то 1 rem это 16 px, а 1,5 rem это 24 px. Меняете базу в одном месте, вся типографика перестраивается.
- em — доля от размера родительского элемента. Гибко, но во вложенных блоках множится само на себя и легко даёт сюрпризы.
- % — то же, что em, только в процентах. Встречается реже.
Рабочее правило для новичка: берите rem для текста и px для мелких элементов интерфейса вроде границ и иконок. По умолчанию в браузерах базовый размер равен 16 px, и от него удобно считать всё остальное.
Пересчёт между системами простой: при стандартном разрешении 96 dpi 1 pt равен примерно 1,33 px. То есть 12 pt в Word это примерно 16 px на экране — как раз привычный размер основного текста.
Почему один кегль в разных шрифтах выглядит по-разному
Наберите одно и то же слово 16-м кеглем в Arial и в Times New Roman. Arial будет выглядеть заметно крупнее, хотя число одинаковое.
Причина в высоте строчных букв — том самом расстоянии от базовой линии до верха буквы «х». Дизайнер шрифта сам решает, какую долю площадки отдать телу буквы, а какую оставить под выносные элементы. У шрифтов с крупными строчными (Arial, Helvetica, Roboto, Inter) текст читается больше, у шрифтов с мелкими (Garamond, Times) — компактнее.
Отсюда практическое следствие: цифры кегля непереносимы между шрифтами. Поменяли гарнитуру в макете и оставили те же 16 — почти наверняка придётся подстраивать заново. Подбор по числу здесь работает так же плохо, как подбор цвета по названию: смотреть нужно на результат. Про то, как вообще устроен визуальный подбор параметров, рассказывали в разборе принципа контраста.
CheckroiПодборка курсов по веб-дизайну111 курсов • 41 школаСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Какой кегль ставить: таблица по задачам
Универсального числа нет, но есть безопасные диапазоны, от которых стартуют почти все.
| Где | Основной текст | Заголовок | Мелкое (подписи, сноски) |
|---|---|---|---|
| Сайт, десктоп | 16–20 px | 32–48 px | 12–14 px |
| Сайт, мобильный | 16–18 px | 24–32 px | 12–14 px |
| Мобильное приложение | 15–17 px | 20–28 px | 11–13 px |
| Книга, журнал | 9–11 pt | 14–24 pt | 7–8 pt |
| Документ в Word | 11–12 pt | 14–16 pt | 9–10 pt |
| Презентация | 20–24 pt | 32–44 pt | 16–18 pt |
| Визитка | 7–9 pt | 10–12 pt | 6–7 pt |
Сайты и приложения
Долгие годы стандартом основного текста считались 14 px, потом сообщество сдвинулось к 16, а сейчас крупные медиа спокойно ставят 18–20. Читать стало комфортнее, и мода на мелкий текст ушла вместе с маленькими экранами.
Проверка простая: откройте макет на телефоне и вытяните руку. Если основной текст приходится приближать, кегль мал.
Печать
В книге 10 pt выглядят нормально, а на экране те же 10 читаются с трудом. Разница в плотности: на бумаге у знака в разы больше физических точек, чем на мониторе, поэтому мелкий кегль остаётся разборчивым.
Отдельная засада — уменьшение макета при печати. Если A4 напечатают на A5, кегль ужмётся вместе с ним, и подписи 7 pt станут нечитаемыми пятью. Закладывайте запас.
Презентации и вывески
Здесь считают от дистанции просмотра — это первое, чему учат дизайнеров презентаций. Ходовое правило для залов: минимум 20 pt для основного текста и 32 для заголовков, а лучше крупнее. Дальний ряд не должен щуриться.
Проверка на слайдах. Отойдите от монитора на два метра и посмотрите на слайд. Не прочли строчку с первого раза — на проекторе будет ещё хуже.
Исторические названия кеглей
В эпоху ручного набора у каждого размера было собственное имя, и наборщики говорили «петит» вместо «восьмой кегль». Названия дожили до наших дней в старых учебниках и в речи типографов.
| Название | Размер | Для чего использовали |
|---|---|---|
| Бриллиант | 3 пункта | Самый мелкий набор, миниатюрные издания |
| Диамант | 4 пункта | Сноски в словарях |
| Перл | 5 пунктов | Примечания и справочный текст |
| Нонпарель | 6 пунктов | Сноски, таблицы, объявления |
| Петит | 8 пунктов | Газетный текст, примечания |
| Корпус | 10 пунктов | Основной текст книг |
| Цицеро | 12 пунктов | Книжный набор, заголовки |
Слово «петит» до сих пор живёт в выражении «написано петитом», то есть мелким шрифтом в самом низу договора. А «цицеро» получил имя от первого печатного издания речей Цицерона, набранного этим размером.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналКак собрать шкалу кеглей вместо случайных чисел
Типичная беда начинающего макета: на странице семь разных размеров текста, и каждый выбран на глаз. Выглядит неопрятно, а править потом мучительно.
Профессиональный подход — заранее задать шкалу из четырёх-шести размеров и дальше брать только их. Собирается она в три шага.
Шаг 1. Выберите базу. Размер основного текста, от которого пляшет всё остальное. Для сайта это обычно 16 или 18 px.
Шаг 2. Выберите шаг. Каждый следующий размер получается умножением предыдущего на постоянный коэффициент. Ходовые значения: 1,2 (спокойная шкала для текстовых сайтов), 1,25, 1,333 (универсальный вариант), 1,5 (контрастная, для лендингов).
Шаг 3. Посчитайте и округлите. С базой 16 и шагом 1,25 получится: 16 → 20 → 25 → 31 → 39 → 49. Округляем до 16, 20, 24, 32, 40, 48 — числа стали удобными, а пропорция сохранилась.
Дальше в макете живут только эти шесть значений. Понадобился размер между 24 и 32? Это сигнал разобраться со структурой, а седьмое число тут не поможет.
Как проверить шкалу. Выпишите все размеры, которые встречаются в макете. Получилось больше шести, и часть отличается на 1–2 пункта? Значит шкалы нет, есть набор случайных чисел.
Кегль в разных программах: где что искать
Поле с размером шрифта есть везде, но называется и ведёт себя по-разному.
Word и Google Docs. Поле на верхней панели рядом с названием шрифта, значение в пунктах. Стандартный документ набирают 11–12 pt, заголовки задают через стили, а не руками — тогда размеры останутся согласованными по всему тексту.
CheckroiПодборка курсов по Google Docs70 курсов • 17 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Figma. Панель Text справа, поле Size в пикселях. Рядом поле интерлиньяжа (Line height) и трекинга (Letter spacing). Шкалу удобно сохранить как текстовые стили: один раз задали, дальше выбираете из списка и не думаете о числах.
Photoshop и Illustrator. Панель «Символ», единицы переключаются в настройках между пунктами и пикселями. Для печатных макетов оставляют пункты, для экранных переключают на пиксели.
CSS. Свойство font-size, единицы на выбор. Хороший тон — задать базовый размер на элементе body в rem и дальше указывать остальные размеры относительно него.
Про округление. Дробные кегли вроде 15,5 px браузер отрисует с округлением, и на разных экранах результат разойдётся. Держитесь целых чисел.
Минимальный кегль и доступность
Мелкий текст выглядит утончённо в портфолио и мучительно в реальном использовании. Люди с неидеальным зрением, экраны на солнце, телефон в трясущемся автобусе — всё это работает против маленького кегля.
Ориентиры, которых стоит держаться:
- Основной текст на сайте — от 16 px. Меньше берут только в интерфейсных элементах, где текст короткий и вспомогательный.
- Мелкий текст — не ниже 12 px. Всё, что мельче, значительная часть аудитории просто не прочтёт.
- Не запрещайте масштабирование. Пользователь должен иметь возможность увеличить текст в браузере или в системе. Единицы rem это позволяют, жёсткие px в некоторых случаях мешают.
- Проверяйте контраст вместе с кеглем. Светло-серый текст 13 px на белом нечитаем, даже если формально размер допустимый.
Пять ошибок новичка
Ошибка 1: переносить кегль между шрифтами
Поменяли гарнитуру, оставили те же числа. Из-за разной высоты строчных текст поедет по восприятию: где-то станет мелким, где-то громоздким. После смены шрифта шкалу перепроверяют.
Ошибка 2: делать заголовок крупным вместо иерархии
Если единственное отличие заголовка от текста — размер, страница выглядит плоско. Работают ещё насыщенность, отступы, цвет и регистр. Заголовок в 20 px полужирным с воздухом сверху читается лучше, чем 36 px обычным.
Ошибка 3: забывать про интерлиньяж
Увеличили кегль, а шаг строк оставили прежним — строки слиплись. Базовое соотношение для основного текста: интерлиньяж примерно в 1,4–1,6 раза больше кегля. Для крупных заголовков коэффициент уменьшают до 1,1–1,2.
Ошибка 4: мельчить в подписях и сносках
Подпись 9 px на сайте не читает никто. Если информация не нужна — уберите её, если нужна — дайте ей нормальный размер.
Ошибка 5: верстать только на своём мониторе
На 27-дюймовом экране макет выглядит просторно, на ноутбуке 13 дюймов тот же кегль превращается в кашу. Проверяйте на трёх размерах экрана минимум.
Коротко о главном
Кегль — это размер шрифта в пунктах, и измеряет он площадку, на которой стоит буква, а вовсе не саму букву. Поэтому одно и то же число в разных гарнитурах выглядит по-разному, и подбирать размер нужно глазами, а не по таблице.
Для веба безопасный старт — 16 px основного текста, для печати 9–11 pt, для презентаций от 20 pt. Вместо случайных значений соберите шкалу из четырёх-шести размеров с постоянным шагом и держитесь её по всему макету.
Где научиться типографике
Кегль — одна деталь большой темы. Рядом стоят шрифтовые пары, модульные сетки, ритм полосы, работа со сложным текстом. На курсе всё это дают связкой и с разбором ваших макетов, а не по кусочкам из статей.
Мы собрали программы разного уровня и отсортировали их по рейтингу, цене и формату:
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Нейросети для изображений и видео Перейти на сайт курса |  Эдюсон | 47 504 ₽ | 3958 ₽/мес. | 2 месяца | Обзор курса |
| Нейросети. Практический курс Перейти на сайт курса |  Skillbox | 74 900 ₽ | 6242 ₽/мес. | 3 месяца | Обзор курса |
| Профессия «Дизайнер интерьеров» Перейти на сайт курса | Skillbox | 207 518 ₽ | 6898 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «UX/UI-дизайнер» Перейти на сайт курса |  GeekBrains | 131 709 ₽ | 5700 ₽/мес. | 12 месяцев | Обзор курса |
| Дизайн среды Перейти на сайт курса |  Нетология | 199 300 ₽ | 8459 ₽/мес. | 17 месяцев | Обзор курса |
| Профессия «Motion-дизайнер» Перейти на сайт курса | Skillbox | 149 885 ₽ | 5500 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «Веб-дизайнер» Перейти на сайт курса | Skillbox | 181 582 ₽ | 7387 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «UX/UI-дизайнер с нуля до PRO» Перейти на сайт курса |  Contented | 179 604 ₽ | 4989 ₽/мес. | 15 месяцев | Обзор курса |
| Профессия «Графический дизайнер: расширенный курс» Перейти на сайт курса | Нетология | 160 400 ₽ | 7496 ₽/мес. | 17 месяцев | Обзор курса |
| Профессия Бренд-дизайнер Перейти на сайт курса | Skillbox | 143 280 ₽ | 4622 ₽/мес. | 24 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по дизайну
Если интересна конкретная специальность, посмотрите разбор профессии графического дизайнера или обзор 18 направлений дизайна с зарплатами. Тем, кто идёт в интерфейсы, пригодится подборка курсов по веб-дизайну, а любителям буквенных форм — статья про каллиграфа и шрифтовой дизайн.
