Как свести кегли к шкале и подобрать межстрочный под каждый размер

Каждый размер по отдельности выбран разумно. Вместе они делают экран неаккуратным.

Слева — страница, где кегль подбирали для каждой строки отдельно. Справа — тот же текст, но каждый размер взят из шкалы.

Числа на экранах — кегли в пикселях. Нажмите «Кегли», чтобы спрятать или показать их.

Что выдаёт текст, набранный на глаз

• Соседние размеры почти не отличаются. 13 и 14, 17 и 18 глаз читает как «примерно одинаковые», и непонятно, случайность это или разные роли.
• Одна роль — разные размеры. Рейтинг набран 13, характеристики — 14. Оба вторичный текст, а выглядят по-разному.
• Каждый новый текст — новое решение. Под следующую строку снова подбирают кегль «чтобы выглядело», и размеров становится всё больше.

Шкала — короткий список размеров текста, из которых собирается весь интерфейс.

Так устроены шкалы больших систем.

Material Design 3: пять ролей текста — Display, Headline, Title, Body, Label, — и у каждой три размера: Large, Medium, Small. Основной текст там Body Large — 16 с межстрочным 24.

Apple: основной текст на iPhone по умолчанию 17 pt, а самый мелкий рекомендуемый — 11 pt.

Для экрана телефона в этом уроке хватит пяти ступеней:

Откуда берутся числа

Шкалу можно построить через соотношение: каждая ступень больше предыдущей в одно и то же число раз.

Такие шкалы для веба описал Тим Браун в статье «More Meaningful Typography» в 2011 году.

На сайте modularscale.com соотношения названы по музыкальным интервалам:

• малая терция — 1,2;
• большая терция — 1,25;
• чистая кварта — 1,333;
• золотое сечение — 1,618.

Точная прогрессия даёт дробные кегли вроде 15,6 или 19,5. Поэтому числа округляют, а часто подбирают руками.

Шкала урока — 12, 14, 16, 20, 24 — такая: мелкие ступени идут через 2, крупные через 4.

Шкала Material тоже не точная прогрессия. Сама система называет её шкалой с соотношением 1,125 и базой 14. Но основной текст там 16, 14 и 12, заголовки — 32, 28 и 24.

Важно не соотношение само по себе, а то, что соседние ступени заметно отличаются и у каждой есть роль.

Кегль выбирают по роли текста: сначала роль, потом размер.

Правило простое: сначала решите, что это за текст на экране, потом возьмите его ступень из таблицы.

Потренируйтесь на тексте из магазина кофе.

У каждого кегля свой межстрочный. Один интервал на все размеры не подходит.

Мэтью Баттерик в книге Practical Typography советует для основного текста межстрочный от 120 до 145 % кегля.

В шкале Material то же видно по числам. У основного текста 16/24, то есть полтора кегля, а у крупных заголовков в долях меньше — Display Large набран 57/64.

Чем крупнее текст, тем меньше ему нужно воздуха между строк.

Переключите интервал у одного и того же абзаца основного текста, 16 пикселей:

Заголовки разного уровня различают размером и весом вместе. Одной жирности мало.

Если заголовок раздела отличается от текста только жирностью, а заголовок экрана — ещё чуть большей жирностью, уровни легко перепутать.

Полужирный и жирный на одном кегле почти не отличаются. Поэтому в шкале урока у каждого уровня заголовка своя ступень, а жирность только помогает.

Подпись должна быть мельче основного текста, но оставаться читаемой.

• Apple: самый мелкий рекомендуемый кегль на iPhone — 11 pt, основной — 17 pt.
• Material Design 3: самая мелкая ступень шкалы, Label Small, — 11 с межстрочным 16.
• Баттерик для основного текста на сайтах советует 15–25 пикселей.

В шкале урока самая мелкая ступень — 12. Мельче неё текста на экране нет.

Служебные подписи, сноски и даты набираются 12. А если строка не влезает, её сокращают по правилам из раздела 7.

Уменьшить кегль, чтобы строка поместилась, — самый быстрый способ сломать шкалу.

Длинное название товара не влезло в карточку — и его набрали 13 вместо 14. На следующей карточке название короче, там 14.

Через неделю в каталоге три размера для одной роли.

Что делать вместо этого:

1. Сократить текст. Например, «Кофе в зёрнах Lavazza Crema e Aroma, 1 кг» в карточке каталога можно показать как «Lavazza Crema e Aroma, 1 кг». Раздел и так про кофе в зёрнах.
2. Разрешить перенос. Название в две строки нормально, если под него заложено место.
3. Дать блоку место. Иногда проблема не в тексте, а в том, что колонка слишком узкая.
4. Обрезать с многоточием — последним ходом, если полный текст виден в другом месте, например на странице товара.

Возьмите свой экран, выпишите все использованные кегли и сведите их к шкале из четырёх-пяти ступеней. Приложите сравнение «до и после».

Часть 1 · Выписать кегли, 15 минут

1. Выберите экран с разным текстом: заголовки, основной текст, подписи, числа.
2. Сделайте копию и подпишите её «до».
3. Выпишите каждый размер текста и где он встречается. В Figma его видно в правой панели при выделении текстового слоя.
4. Посчитайте, сколько разных кеглей и сколько разных межстрочных.

ЭКРАН: ______________________        Дата: __.__.____

ШКАЛА (кегль / межстрочный — роль)
__ / __ — заголовок экрана
__ / __ — заголовок раздела, крупные числа
__ / __ — основной текст
__ / __ — вторичный текст, подписи полей
__ / __ — сноски, служебные подписи

«ДО»
кегли на экране: ________________________   всего: __
межстрочные: ____________________________
одна роль — разные размеры: _____________

«ПОСЛЕ»
все кегли из шкалы: да / нет
у каждого размера есть роль: да / нет
что пришлось сократить или перенести: _____________

Часть 2 · Собрать шкалу, 20 минут

1. Разложите выписанные кегли по ролям: заголовок экрана, заголовок раздела, основной, вторичный, сноски.
2. Для каждой роли оставьте один размер. Соседние ступени должны заметно отличаться.
3. Подберите межстрочный для каждой ступени: для основного текста около полутора кеглей, для крупных заголовков меньше.

Часть 3 · Пересобрать экран, 40 минут

1. Заведите ступени шкалы текстовыми стилями и привяжите к ним весь текст.
2. Если текст не влезает, сократите его, разрешите перенос или дайте место — кегль не уменьшайте.
3. Положите «до» и «после» рядом и заполните часть «после» в шаблоне.

Что должно получиться

• Экраны «до» и «после» рядом.
• Шкала из четырёх-пяти ступеней с ролями и межстрочными.
• Заполненный шаблон замеров.

План работы: 15 минут на замеры, 20 на шкалу, 40 на пересборку. Всего — около полутора часов.

Частые сложности

• «Пяти ступеней не хватает, нужна шестая». Проверьте, не одна ли это роль с разными названиями. Если нет — добавьте ступень и запишите её роль.
• «Цена должна быть крупнее заголовка раздела». Можно, но тогда это отдельная роль «крупные числа» со своей ступенью в шкале.
• «В продукте уже есть шкала». Берите её. Урок учит держаться одной шкалы, числа в ней могут быть другими.
• «После пересборки строки стали переноситься». Так бывает, когда раньше кегль уменьшали ради места. Решите по разделу 7: сократить, перенести или дать место.

Текст собран по шкале, если

• Все кегли на экране из шкалы
• В шкале четыре-пять ступеней, и у каждой есть роль
• Одна роль — один размер на всём экране
• У каждой ступени свой межстрочный, записан вместе с кеглем
• Уровни заголовков различаются размером, жирность только помогает
• Самый мелкий текст не меньше нижней ступени
• Блоки с текстом не имеют жёсткой высоты
• Ни один кегль не уменьшен ради того, чтобы строка влезла

Что мешает

• Кегли на глаз. 13, 14, 15 рядом: разница не видна, а экран выглядит неаккуратно.
• Одна роль — разные размеры. Вторичный текст то 13, то 14.
• Один межстрочный на всё. Заголовки разъезжаются, а основной текст слипается.
• Заголовки только жирностью. Уровни сливаются.
• Кегль ради места. Строка поместилась, шкала сломалась.
• Мелко и бледно одновременно. Сноску уже не прочитать.

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

• Typography in ten minutesPractical Typography Мэтью Баттерика · на английском · бесплатноПять правил на десять минут: кегль основного текста (на вебе 15–25 px), межстрочный 120–145 %, строка 45–90 знаков. Пятое правило — купить платный шрифт вместо бесплатного; тон резкий, примеры для документов.
• Refactoring UIАдам Уотан и Стив Шогер, 2018 · книга на английском · платнаяГлавы «Establish a type scale» и «Line-height is proportional» — шкала кеглей вместо размеров на глаз и межстрочный, подобранный под кегль. Текст глав закрыт, открыто оглавление.
• More Meaningful TypographyA List Apart, Тим Браун, 2011 · на английском · бесплатноОткуда берётся модульная шкала: одно соотношение, например 1,618, и опорный кегль основного текста, от которого по шкале считаются все размеры страницы. Статья 2011 года с разбором CSS; автор сам округляет числа и отступает от шкалы.
• Type scale tokensMaterial Design 3 · на английском · бесплатноШкала Material 3 целиком: пять ролей по три размера, 15 базовых и 15 акцентных стилей, кегли и межстрочные в таблице токенов — от Display Large 57/64 до Label Small 11/16. Сама система называет шкалу Major Second с базой 14.
• TypographyApple Human Interface Guidelines · на английском · бесплатноРазмеры текста у Apple: основной на iPhone 17 pt, самый мелкий рекомендуемый 11 pt, и таблицы стилей Dynamic Type от xSmall до AX5 — как растёт каждый стиль, когда человек увеличивает шрифт. Справка обновлена в декабре 2025 года.