Иерархия шрифтов в бренд-буке: заголовки, текст, акценты
Как рассчитать размеры для всех уровней иерархии сразу
Ошибка почти всех бренд-буков среднего уровня — расчёт размеров под один носитель, а потом «подгонка» под остальные интуицией дизайнера. Работает это иначе: сначала выбирается база и коэффициент, потом на них строится вся сетка размеров для печати, веба и мобиля одновременно.
- Зафиксировать базовый размер текста. Для веба это чаще всего 16px (стандарт, который используют EU Design System и большинство фреймворков), для печати — 9-11pt для A4, для мобильного интерфейса — 14-16px как нижняя граница читаемости.
- Выбрать модульный коэффициент (ratio) — подробнее о выборе ниже. Для корпоративных, «серьёзных» брендов чаще берут Major Third (1.25), для брендов с претензией на выразительность — Perfect Fourth (1.333) или золотое сечение (1.618).
- Умножить базу на коэффициент нужное количество раз вверх (для заголовков) и разделить — вниз (для мелких подписей, сносок).
- Для каждого формата зафиксировать отдельную шкалу breakpoint'ов: то, что на А3 читается с 3 метров, на мобильном экране физически не помещается в строку.
- Свести всё в одну таблицу токенов — по образцу SAP, где у каждого уровня (H1, H2, Body XL, Body M и т.д.) есть свой набор значений для десктопа, планшета и мобиля.
Пример на цифрах: база 16px, коэффициент 1.333. Body = 16px, H3 = 21px, H2 = 28px, H1 = 38px, Display = 50px. Для печати эта же пропорция масштабируется в pt с учётом формата: на А3 базовые 16px эквивалента превращаются условно в 14-16pt, а Display-заголовок — в 42-48pt, потому что дистанция чтения другая.
Контраст между уровнями: размера мало
Правило «заголовок в 1,5-1,6 раза больше текста» само по себе не создаёт иерархию — это работает только в связке с весом шрифта. Если увеличить только кегль, но оставить тот же Regular, глаз считывает разницу медленнее, а макет выглядит менее собранным. Комбинация размера и веса всегда даёт более чистый результат, чем один параметр.
| Уровень | Размер (относительно body) | Начертание | Доп. контраст |
|---|---|---|---|
| Заголовок H1 | ×2,5–3 | Bold / SemiBold | цвет бренда или увеличенный трекинг-минус |
| Подзаголовок H2 | ×1,6–1,8 | SemiBold | опционально цвет |
| Основной текст | ×1 | Regular | — |
| Подпись / caption | ×0,75–0,85 | Regular / Light | увеличенный интерлиньяж |
Отдельно про доступность: контраст цвета текста к фону должен соответствовать WCAG — минимум 4,5:1 для обычного текста и 3:1 для крупного (от 18pt и выше). Это не декоративная рекомендация, а требование, которое проверяется автоматически в аудитах сайтов, и его игнорирование — частая причина, почему красивый на макете бренд-бук не проходит проверку в продакшене.
Интерлиньяж, трекинг и кернинг: как настроить их согласованно
Разрозненная настройка этих трёх параметров — самая частая причина, почему один и тот же шрифт «дышит» по-разному на сайте и в презентации. Правило работает так: чем крупнее кегль, тем плотнее должны быть межбуквенные и межстрочные интервалы, и наоборот.
- Интерлиньяж заголовков — 1,2–1,3 от кегля: крупный текст и без того визуально «разрежен», лишний зазор между строк его разваливает.
- Интерлиньяж основного текста — 1,4–1,6: тут действует простое практическое правило — между двумя строками должна помещаться ещё одна строчная буква того же шрифта того же размера. Если не помещается, текст будет читаться тяжело на длинных абзацах.
- Трекинг заголовков — от -20 до -30 (стягивание букв): крупные буквы физически имеют больше «воздуха» внутри, и небольшое сжатие делает слово визуально плотным блоком.
- Трекинг основного текста — 0 или -10, не больше: тело текста не должно «слипаться», иначе падает скорость чтения.
GE HealthCare в своей системе использует именно эту логику: -20 для заголовков, -10 для основного текста — цифры небольшие, но их последовательное применение по всей системе даёт ощущение продуманности, которое не считывается сознательно, но чувствуется.
Кернинг (расстояние между конкретными парами букв, например «AV» или «To») в брендовой типографике настраивается один раз на уровне самого шрифта или логотипа и не трогается пользователем документа — это задача того, кто готовит шаблоны, а не того, кто верстает презентацию.
Что такое модульная шкала и почему она лучше «на глаз»
Модульная шкала — это последовательность размеров, где каждый следующий уровень получается умножением предыдущего на фиксированный коэффициент, а не подбирается произвольно под конкретный макет. Разница на практике огромная: без шкалы дизайнер каждый раз заново решает, «22 или 24 будет смотреться лучше», а со шкалой ответ уже есть — эти два числа просто не входят в систему.
| Название шкалы | Коэффициент | Характер, который она задаёт бренду |
|---|---|---|
| Minor Second | 1,067 | почти незаметная иерархия, очень плотная сетка — для строгих корпоративных систем |
| Major Third | 1,25 | сдержанный, деловой ритм — банки, B2B |
| Perfect Fourth | 1,333 | заметная, но не агрессивная иерархия — универсальный выбор |
| Golden Ratio | 1,618 | выразительная, «дизайнерская» подача — медиа, лайфстайл-бренды |
Это прямо отвечает на вопрос, почему коэффициенты в реальных бренд-буках разные: БЭСТ делит на 1,7 для подзаголовков — это близко к золотому сечению и работает на выразительность; SAP держит более сдержанную, ступенчатую сетку с отдельными предустановками под каждый уровень — это выбор в пользу предсказуемости корпоративной системы, а не эффектности. Коэффициент — это не техническая деталь, а часть образа бренда: чем он выше, тем контрастнее и «громче» ощущается иерархия.
Material Design в этой логике идёт ещё дальше — там заложено 13 уровней типографической иерархии, потому что интерфейс Google работает во множестве контекстов от часов до планшетов, и каждому нужен свой уровень детализации шкалы.
Перенос иерархии между печатью, веб и мобилем
Главная ошибка при масштабировании — переносить абсолютные значения в пикселях или пунктах с одного носителя на другой. Правильно переносится не размер, а пропорция и логика: коэффициент шкалы остаётся тем же, но база и количество ступеней меняются под условия чтения.
- Длина строки задаёт границы, а не наоборот: для печати комфортны 50-75 символов в строке, для веба — 60-66. Если заголовок при переносе на мобиль ломает эту длину, надо уменьшать не весь макет, а конкретно этот уровень шкалы.
- Текст на мобильном экране не увеличивается сверх 14-16px — расстояние до глаз там маленькое, крупный body-текст только мешает. Зато заголовки, наоборот, ощутимо ужимаются: SAP на S/XS breakpoints задаёт отдельные, уменьшенные значения для H-уровней, а не просто пропорционально уменьшает всё через CSS-медиазапросы.
- Интерлиньяж при переходе с печати на веб обычно нужно немного увеличивать: экран даёт больше визуального шума (антиалиасинг, подсветка), и текст с печатным интерлиньяжем на экране выглядит зажатым.
- Трекинг заголовков, который хорошо смотрится в высоком разрешении печати, на низкой плотности пикселей (обычные мониторы) может «слипаться» — стоит закладывать чуть менее агрессивное стягивание для веб-версии той же гарнитуры.
Практический вывод: в бренд-буке должна быть не одна таблица размеров, а минимум три — для печати (А3/А4), для веба (десктоп) и для мобильных breakpoint'ов, построенные на одной модульной шкале, но с разной базой и разным количеством видимых ступеней. Именно отсутствие такой связки — самая частая причина, почему фирменный стиль «расползается» при переходе от презентации к сайту.
Как рассчитать размеры для всех уровней иерархии сразу
Ошибка почти всех бренд-буков среднего уровня — расчёт размеров под один носитель, а потом «подгонка» под остальные интуицией дизайнера. Работает это иначе: сначала выбирается база и коэффициент, потом на них строится вся сетка размеров для печати, веба и мобиля одновременно.
- Зафиксировать базовый размер текста. Для веба это чаще всего 16px (стандарт, который используют EU Design System и большинство фреймворков), для печати — 9-11pt для A4, для мобильного интерфейса — 14-16px как нижняя граница читаемости.
- Выбрать модульный коэффициент (ratio) — подробнее о выборе ниже. Для корпоративных, «серьёзных» брендов чаще берут Major Third (1.25), для брендов с претензией на выразительность — Perfect Fourth (1.333) или золотое сечение (1.618).
- Умножить базу на коэффициент нужное количество раз вверх (для заголовков) и разделить — вниз (для мелких подписей, сносок).
- Для каждого формата зафиксировать отдельную шкалу breakpoint'ов: то, что на А3 читается с 3 метров, на мобильном экране физически не помещается в строку.
- Свести всё в одну таблицу токенов — по образцу SAP, где у каждого уровня (H1, H2, Body XL, Body M и т.д.) есть свой набор значений для десктопа, планшета и мобиля.
Пример на цифрах: база 16px, коэффициент 1.333. Body = 16px, H3 = 21px, H2 = 28px, H1 = 38px, Display = 50px. Для печати эта же пропорция масштабируется в pt с учётом формата: на А3 базовые 16px эквивалента превращаются условно в 14-16pt, а Display-заголовок — в 42-48pt, потому что дистанция чтения другая.
Контраст между уровнями: размера мало
Правило «заголовок в 1,5-1,6 раза больше текста» само по себе не создаёт иерархию — это работает только в связке с весом шрифта. Если увеличить только кегль, но оставить тот же Regular, глаз считывает разницу медленнее, а макет выглядит менее собранным. Комбинация размера и веса всегда даёт более чистый результат, чем один параметр.
| Уровень | Размер (относительно body) | Начертание | Доп. контраст |
|---|---|---|---|
| Заголовок H1 | ×2,5–3 | Bold / SemiBold | цвет бренда или увеличенный трекинг-минус |
| Подзаголовок H2 | ×1,6–1,8 | SemiBold | опционально цвет |
| Основной текст | ×1 | Regular | — |
| Подпись / caption | ×0,75–0,85 | Regular / Light | увеличенный интерлиньяж |
Отдельно про доступность: контраст цвета текста к фону должен соответствовать WCAG — минимум 4,5:1 для обычного текста и 3:1 для крупного (от 18pt и выше). Это не декоративная рекомендация, а требование, которое проверяется автоматически в аудитах сайтов, и его игнорирование — частая причина, почему красивый на макете бренд-бук не проходит проверку в продакшене.
Интерлиньяж, трекинг и кернинг: как настроить их согласованно
Разрозненная настройка этих трёх параметров — самая частая причина, почему один и тот же шрифт «дышит» по-разному на сайте и в презентации. Правило работает так: чем крупнее кегль, тем плотнее должны быть межбуквенные и межстрочные интервалы, и наоборот.
- Интерлиньяж заголовков — 1,2–1,3 от кегля: крупный текст и без того визуально «разрежен», лишний зазор между строк его разваливает.
- Интерлиньяж основного текста — 1,4–1,6: тут действует простое практическое правило — между двумя строками должна помещаться ещё одна строчная буква того же шрифта того же размера. Если не помещается, текст будет читаться тяжело на длинных абзацах.
- Трекинг заголовков — от -20 до -30 (стягивание букв): крупные буквы физически имеют больше «воздуха» внутри, и небольшое сжатие делает слово визуально плотным блоком.
- Трекинг основного текста — 0 или -10, не больше: тело текста не должно «слипаться», иначе падает скорость чтения.
GE HealthCare в своей системе использует именно эту логику: -20 для заголовков, -10 для основного текста — цифры небольшие, но их последовательное применение по всей системе даёт ощущение продуманности, которое не считывается сознательно, но чувствуется.
Кернинг (расстояние между конкретными парами букв, например «AV» или «To») в брендовой типографике настраивается один раз на уровне самого шрифта или логотипа и не трогается пользователем документа — это задача того, кто готовит шаблоны, а не того, кто верстает презентацию.
Что такое модульная шкала и почему она лучше «на глаз»
Модульная шкала — это последовательность размеров, где каждый следующий уровень получается умножением предыдущего на фиксированный коэффициент, а не подбирается произвольно под конкретный макет. Разница на практике огромная: без шкалы дизайнер каждый раз заново решает, «22 или 24 будет смотреться лучше», а со шкалой ответ уже есть — эти два числа просто не входят в систему.
| Название шкалы | Коэффициент | Характер, который она задаёт бренду |
|---|---|---|
| Minor Second | 1,067 | почти незаметная иерархия, очень плотная сетка — для строгих корпоративных систем |
| Major Third | 1,25 | сдержанный, деловой ритм — банки, B2B |
| Perfect Fourth | 1,333 | заметная, но не агрессивная иерархия — универсальный выбор |
| Golden Ratio | 1,618 | выразительная, «дизайнерская» подача — медиа, лайфстайл-бренды |
Это прямо отвечает на вопрос, почему коэффициенты в реальных бренд-буках разные: БЭСТ делит на 1,7 для подзаголовков — это близко к золотому сечению и работает на выразительность; SAP держит более сдержанную, ступенчатую сетку с отдельными предустановками под каждый уровень — это выбор в пользу предсказуемости корпоративной системы, а не эффектности. Коэффициент — это не техническая деталь, а часть образа бренда: чем он выше, тем контрастнее и «громче» ощущается иерархия.
Material Design в этой логике идёт ещё дальше — там заложено 13 уровней типографической иерархии, потому что интерфейс Google работает во множестве контекстов от часов до планшетов, и каждому нужен свой уровень детализации шкалы.
Перенос иерархии между печатью, веб и мобилем
Главная ошибка при масштабировании — переносить абсолютные значения в пикселях или пунктах с одного носителя на другой. Правильно переносится не размер, а пропорция и логика: коэффициент шкалы остаётся тем же, но база и количество ступеней меняются под условия чтения.
- Длина строки задаёт границы, а не наоборот: для печати комфортны 50-75 символов в строке, для веба — 60-66. Если заголовок при переносе на мобиль ломает эту длину, надо уменьшать не весь макет, а конкретно этот уровень шкалы.
- Текст на мобильном экране не увеличивается сверх 14-16px — расстояние до глаз там маленькое, крупный body-текст только мешает. Зато заголовки, наоборот, ощутимо ужимаются: SAP на S/XS breakpoints задаёт отдельные, уменьшенные значения для H-уровней, а не просто пропорционально уменьшает всё через CSS-медиазапросы.
- Интерлиньяж при переходе с печати на веб обычно нужно немного увеличивать: экран даёт больше визуального шума (антиалиасинг, подсветка), и текст с печатным интерлиньяжем на экране выглядит зажатым.
- Трекинг заголовков, который хорошо смотрится в высоком разрешении печати, на низкой плотности пикселей (обычные мониторы) может «слипаться» — стоит закладывать чуть менее агрессивное стягивание для веб-версии той же гарнитуры.
Практический вывод: в бренд-буке должна быть не одна таблица размеров, а минимум три — для печати (А3/А4), для веба (десктоп) и для мобильных breakpoint'ов, построенные на одной модульной шкале, но с разной базой и разным количеством видимых ступеней. Именно отсутствие такой связки — самая частая причина, почему фирменный стиль «расползается» при переходе от презентации к сайту.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
