Как построить типографическую сетку для бренд-гайдлайна
Начните с масштаба, а не с размеров кегля
Первое решение, которое нужно принять — не «какой шрифт», а «какой коэффициент роста» будет управлять всеми размерами в системе. Это и есть модульная шкала (modular scale): каждый следующий уровень иерархии умножается на выбранный коэффициент относительно базового размера. За базу для веба почти всегда берут 16px — это дефолтный размер body-текста в браузерах, и отклонение от него требует отдельного обоснования в гайдлайне. Для печатных носителей чаще используют 14pt как базу, и это принципиально другая сетка, а не пересчёт веб-значений в пункты.
Коэффициент задаёт характер бренда ещё до того, как выбран шрифт. Разница между значениями — это разница между «сдержанно» и «выразительно»:
| Коэффициент | Название | Характер | Когда применять |
|---|---|---|---|
| 1.125 | Major Second | плотная, сдержанная иерархия | плотный интерфейс, много уровней текста, финтех/enterprise |
| 1.200 | Minor Third | умеренный контраст | универсальный выбор для мобильных интерфейсов |
| 1.250 | Major Third | сбалансированный, читаемый | корпоративные и сервисные бренды |
| 1.333 | Perfect Fourth | заметный, но не крикливый | десктопные сайты, медиа |
| 1.618 | Golden Ratio | выразительный, брендовый | заголовки, hero-блоки, диджитал-арт-дирекшн |
На практике редко используют один коэффициент для всей системы. Рабочая связка — 1.25 или 1.333 для основной шкалы текста и отдельный, более крупный шаг (1.5–1.618) для display-заголовков и hero-текста, где нужен явный визуальный акцент. Это не нарушение системности, а её усложнение до двух уровней — так строят шкалы большинство зрелых брендов.
Отдельно стоит зафиксировать минимальную ширину контейнера под текст — правило LIDS: берётся фраза «Lorem ipsum dolor sit» в самом мелком кегле шкалы и измеряется её ширина. Например, для 14px Times это около 140px. Это значение идёт в гайдлайн как минимальная ширина текстового блока — иначе верстальщики на местах будут сжимать заголовки в узкие карточки, и иерархия сломается на реальных макетах.
Адаптивная сетка: от 320px до 1920px без потери иерархии
Ошибка большинства гайдлайнов — пытаться масштабировать весь текст пропорционально ширине экрана. Работает это только для display-заголовков. Body-текст должен вести себя иначе.
- Display и h1 масштабируются заметно: типичный переезд — 56px на десктопе → 36px на мобильном. Разница в 1.5–1.6 раза — это нормально и ожидаемо.
- Body-текст остаётся около 16px на всех устройствах или меняется минимально (16px → 15px), потому что читаемость важнее визуального эффекта.
- Коэффициент шкалы на мобильных стоит делать более тесным — около 1.2, а на десктопе более свободным — 1.333–1.5. Причина простая: на узком экране крупные шаги между уровнями съедают доступное пространство и текст начинает переламываться некрасиво.
Практический вывод: в гайдлайне нужно задокументировать не одну шкалу, а две — мобильную и десктопную, с явной точкой перехода (breakpoint) и указанием, какие уровни масштабируются линейно, а какие фиксированы.
Что документировать кроме размера кегля
Размер шрифта — это только один параметр из четырёх, и без остальных трёх система не работает как единое целое. Ниже — обязательный минимум для каждого уровня иерархии.
| Уровень | Line-height | Letter-spacing | Font-weight |
|---|---|---|---|
| Hero / Display | 0.9–1.0 | от -0.02em до -0.05em | 700 |
| H2–H3 | 1.25–1.35 | от -0.01em до -0.03em | 600–700 |
| Body | 1.5–1.65 | 0 (default) | 400 |
| Label / Badge | 1.1–1.2 | от +0.04em до +0.16em | 400–600 |
Интерлиньяж должен меняться по уровням, а не быть единым для всего текста — крупный заголовок с line-height 1.5 выглядит рыхлым, а плотный body-текст с line-height 1.0 нечитаем. Letter-spacing работает в обратную сторону от размера: чем крупнее кегль, тем плотнее буквы должны стоять друг к другу — этим компенсируется оптическое расширение крупных литер. У label и бейджей, наоборот, буквы разряжают, потому что мелкий caps-текст в тесном наборе слипается.
По весам шрифта — здесь работает правило «меньше значит лучше». Разбор девяти реальных брендовых гайдлайнов показывает, что подавляющее большинство использует всего 2–3 font-weight: либо 400/700, либо 300/400/700. Пять и больше весов в системе почти всегда означает, что дизайнер не смог принять решение на этапе проектирования и оставил себе «запасные варианты» — в готовом гайдлайне это читается как несогласованность, а не как гибкость.
Как оформить сетку в Figma и перенести на другие носители
- Создать библиотеку текстовых стилей по каждому уровню иерархии (Display, H1–H4, Body L/M/S, Caption, Label) с зафиксированными size/line-height/letter-spacing/weight в одном месте — Text Styles, а не локальные настройки в слоях.
- Завести переменные (Variables) для базового размера и коэффициента шкалы отдельно для мобильного и десктопного режима — это позволяет переключать брейкпоинт одним свойством, а не перерисовывать стили вручную.
- Задокументировать шкалу как таблицу в отдельном фрейме гайдлайна: колонка с уровнем, px-значением, rem-эквивалентом и обоснованием (почему выбран именно этот шаг).
- Для печати создать отдельный набор стилей на базе 14pt — механически пересчитывать веб-px в pt нельзя, потому что оптическая плотность бумаги и экрана различается.
- Для соцсетей зафиксировать минимальный кегль исходя из читаемости на маленьком превью (обычно не меньше 24px для заголовков в карточках и сторис) — это отдельная мини-шкала, а не урезанная версия основной.
Модульная сетка, baseline grid и типографическая сетка — разные инструменты
Эти три термина путают чаще всего, а в гайдлайне они закрывают разные задачи и не заменяют друг друга.
| Инструмент | Что регулирует | Когда использовать в гайдлайне |
|---|---|---|
| Модульная сетка | расположение блоков контента, колонки, отступы макета | для верстки страниц и композиции, не для размера текста |
| Baseline grid | вертикальный ритм — привязку строк текста к единому шагу (обычно 4 или 8px) | когда нужно, чтобы текст в соседних колонках визуально совпадал по строкам |
| Типографическая сетка (modular scale) | соотношение размеров шрифта между уровнями иерархии | основа шрифтовой системы бренда — задаётся первой, до всего остального |
Для бренд-гайдлайна порядок такой: сначала фиксируется типографическая шкала (коэффициент и база), затем на неё накладывается baseline grid с шагом 4 или 8px — так, чтобы line-height каждого уровня был кратен этому шагу. И только после этого модульная сетка макета получает отступы, кратные тому же базовому шагу. Если делать в обратном порядке, типографика будет визуально «не попадать» в колонки макета.
Частые ошибки при построении шрифтовой сетки
- Слишком много размеров. Если в системе больше 7–8 уровней кегля — иерархия перестаёт читаться, а верстальщики начинают изобретать промежуточные значения на глаз.
- Единый line-height для всех уровней. Это самая частая ошибка: интерлиньяж 1.5 хорош для body, но убивает крупный заголовок, делая его визуально рыхлым.
- Игнорирование letter-spacing. Без отрицательного трекинга на крупных заголовках буквы визуально «расползаются», особенно у шрифтов с широким апертурой.
- Одна шкала для мобильного и десктопа. Коэффициент, комфортный на широком экране, на 320px создаёт либо слишком крупные заголовки, либо слишком мелкий body — нужны раздельные значения.
- Механический перенос веб-сетки в печать. База 16px и её масштаб не работают для 14pt печатной типографики — там другая оптическая плотность и другое расстояние чтения.
- Слишком много font-weight. Пять и более весов размывают иерархию вместо того, чтобы её усиливать — держитесь 2–3 весов.
Начните с масштаба, а не с размеров кегля
Первое решение, которое нужно принять — не «какой шрифт», а «какой коэффициент роста» будет управлять всеми размерами в системе. Это и есть модульная шкала (modular scale): каждый следующий уровень иерархии умножается на выбранный коэффициент относительно базового размера. За базу для веба почти всегда берут 16px — это дефолтный размер body-текста в браузерах, и отклонение от него требует отдельного обоснования в гайдлайне. Для печатных носителей чаще используют 14pt как базу, и это принципиально другая сетка, а не пересчёт веб-значений в пункты.
Коэффициент задаёт характер бренда ещё до того, как выбран шрифт. Разница между значениями — это разница между «сдержанно» и «выразительно»:
| Коэффициент | Название | Характер | Когда применять |
|---|---|---|---|
| 1.125 | Major Second | плотная, сдержанная иерархия | плотный интерфейс, много уровней текста, финтех/enterprise |
| 1.200 | Minor Third | умеренный контраст | универсальный выбор для мобильных интерфейсов |
| 1.250 | Major Third | сбалансированный, читаемый | корпоративные и сервисные бренды |
| 1.333 | Perfect Fourth | заметный, но не крикливый | десктопные сайты, медиа |
| 1.618 | Golden Ratio | выразительный, брендовый | заголовки, hero-блоки, диджитал-арт-дирекшн |
На практике редко используют один коэффициент для всей системы. Рабочая связка — 1.25 или 1.333 для основной шкалы текста и отдельный, более крупный шаг (1.5–1.618) для display-заголовков и hero-текста, где нужен явный визуальный акцент. Это не нарушение системности, а её усложнение до двух уровней — так строят шкалы большинство зрелых брендов.
Отдельно стоит зафиксировать минимальную ширину контейнера под текст — правило LIDS: берётся фраза «Lorem ipsum dolor sit» в самом мелком кегле шкалы и измеряется её ширина. Например, для 14px Times это около 140px. Это значение идёт в гайдлайн как минимальная ширина текстового блока — иначе верстальщики на местах будут сжимать заголовки в узкие карточки, и иерархия сломается на реальных макетах.
Адаптивная сетка: от 320px до 1920px без потери иерархии
Ошибка большинства гайдлайнов — пытаться масштабировать весь текст пропорционально ширине экрана. Работает это только для display-заголовков. Body-текст должен вести себя иначе.
- Display и h1 масштабируются заметно: типичный переезд — 56px на десктопе → 36px на мобильном. Разница в 1.5–1.6 раза — это нормально и ожидаемо.
- Body-текст остаётся около 16px на всех устройствах или меняется минимально (16px → 15px), потому что читаемость важнее визуального эффекта.
- Коэффициент шкалы на мобильных стоит делать более тесным — около 1.2, а на десктопе более свободным — 1.333–1.5. Причина простая: на узком экране крупные шаги между уровнями съедают доступное пространство и текст начинает переламываться некрасиво.
Практический вывод: в гайдлайне нужно задокументировать не одну шкалу, а две — мобильную и десктопную, с явной точкой перехода (breakpoint) и указанием, какие уровни масштабируются линейно, а какие фиксированы.
Что документировать кроме размера кегля
Размер шрифта — это только один параметр из четырёх, и без остальных трёх система не работает как единое целое. Ниже — обязательный минимум для каждого уровня иерархии.
| Уровень | Line-height | Letter-spacing | Font-weight |
|---|---|---|---|
| Hero / Display | 0.9–1.0 | от -0.02em до -0.05em | 700 |
| H2–H3 | 1.25–1.35 | от -0.01em до -0.03em | 600–700 |
| Body | 1.5–1.65 | 0 (default) | 400 |
| Label / Badge | 1.1–1.2 | от +0.04em до +0.16em | 400–600 |
Интерлиньяж должен меняться по уровням, а не быть единым для всего текста — крупный заголовок с line-height 1.5 выглядит рыхлым, а плотный body-текст с line-height 1.0 нечитаем. Letter-spacing работает в обратную сторону от размера: чем крупнее кегль, тем плотнее буквы должны стоять друг к другу — этим компенсируется оптическое расширение крупных литер. У label и бейджей, наоборот, буквы разряжают, потому что мелкий caps-текст в тесном наборе слипается.
По весам шрифта — здесь работает правило «меньше значит лучше». Разбор девяти реальных брендовых гайдлайнов показывает, что подавляющее большинство использует всего 2–3 font-weight: либо 400/700, либо 300/400/700. Пять и больше весов в системе почти всегда означает, что дизайнер не смог принять решение на этапе проектирования и оставил себе «запасные варианты» — в готовом гайдлайне это читается как несогласованность, а не как гибкость.
Как оформить сетку в Figma и перенести на другие носители
- Создать библиотеку текстовых стилей по каждому уровню иерархии (Display, H1–H4, Body L/M/S, Caption, Label) с зафиксированными size/line-height/letter-spacing/weight в одном месте — Text Styles, а не локальные настройки в слоях.
- Завести переменные (Variables) для базового размера и коэффициента шкалы отдельно для мобильного и десктопного режима — это позволяет переключать брейкпоинт одним свойством, а не перерисовывать стили вручную.
- Задокументировать шкалу как таблицу в отдельном фрейме гайдлайна: колонка с уровнем, px-значением, rem-эквивалентом и обоснованием (почему выбран именно этот шаг).
- Для печати создать отдельный набор стилей на базе 14pt — механически пересчитывать веб-px в pt нельзя, потому что оптическая плотность бумаги и экрана различается.
- Для соцсетей зафиксировать минимальный кегль исходя из читаемости на маленьком превью (обычно не меньше 24px для заголовков в карточках и сторис) — это отдельная мини-шкала, а не урезанная версия основной.
Модульная сетка, baseline grid и типографическая сетка — разные инструменты
Эти три термина путают чаще всего, а в гайдлайне они закрывают разные задачи и не заменяют друг друга.
| Инструмент | Что регулирует | Когда использовать в гайдлайне |
|---|---|---|
| Модульная сетка | расположение блоков контента, колонки, отступы макета | для верстки страниц и композиции, не для размера текста |
| Baseline grid | вертикальный ритм — привязку строк текста к единому шагу (обычно 4 или 8px) | когда нужно, чтобы текст в соседних колонках визуально совпадал по строкам |
| Типографическая сетка (modular scale) | соотношение размеров шрифта между уровнями иерархии | основа шрифтовой системы бренда — задаётся первой, до всего остального |
Для бренд-гайдлайна порядок такой: сначала фиксируется типографическая шкала (коэффициент и база), затем на неё накладывается baseline grid с шагом 4 или 8px — так, чтобы line-height каждого уровня был кратен этому шагу. И только после этого модульная сетка макета получает отступы, кратные тому же базовому шагу. Если делать в обратном порядке, типографика будет визуально «не попадать» в колонки макета.
Частые ошибки при построении шрифтовой сетки
- Слишком много размеров. Если в системе больше 7–8 уровней кегля — иерархия перестаёт читаться, а верстальщики начинают изобретать промежуточные значения на глаз.
- Единый line-height для всех уровней. Это самая частая ошибка: интерлиньяж 1.5 хорош для body, но убивает крупный заголовок, делая его визуально рыхлым.
- Игнорирование letter-spacing. Без отрицательного трекинга на крупных заголовках буквы визуально «расползаются», особенно у шрифтов с широким апертурой.
- Одна шкала для мобильного и десктопа. Коэффициент, комфортный на широком экране, на 320px создаёт либо слишком крупные заголовки, либо слишком мелкий body — нужны раздельные значения.
- Механический перенос веб-сетки в печать. База 16px и её масштаб не работают для 14pt печатной типографики — там другая оптическая плотность и другое расстояние чтения.
- Слишком много font-weight. Пять и более весов размывают иерархию вместо того, чтобы её усиливать — держитесь 2–3 весов.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
