Ваш конспект

Пять принципов типографики для дизайнера

Ключевые тезисы:

• Типографика — это искусство работы с текстом, критически важное для дизайна.
• Пять принципов: группировка, иерархия, «бермудский треугольник», шрифтовая система координат и форма.
• Цель — создавать аккуратные, логичные и удобные для восприятия макеты.

Группировка

Дизайнер управляет повествованием, перерабатывая исходный контент клиента для максимально выгодной подачи. Задача — разбить информацию на смысловые блоки, чтобы упростить восприятие для пользователя.

Пример:
Для авиакомпании «Победа» вместо хронологического списка событий была создана метафора полёта («взлёт», «набор высоты», «турбулентность», «новые высоты»). Каждое событие было упаковано в карточку с годом, заголовком, описанием и иллюстрацией. Это позволило добавить более 20 дополнительных визуальных блоков.

Иерархия

Любой дизайн с текстом требует логичной системы текстовых стилей. Текстовый стиль — это уникальный набор настроек: шрифт, размер, интерлиньяж и трекинг.

Рекомендуется использовать 3-5 текстовых стилей:

1. Уровень 1: Контент наивысшего приоритета (например, главный заголовок).
2. Уровень 2: Подзаголовки (логичный переход между блоками, например, в карточках).
3. Уровень 3: Обычный текст (самый большой по объёму, должен быть читаемым).

Совет:

• Для контраста между стилями используйте плагин Typescales в Figma с пропорцией золотого сечения.
• Все стили выносятся в UI Kit — файл, систематизирующий шрифты, цвета и UI-элементы проекта.

«Бермудский треугольник» типографики

Три ключевые настройки, которыми нужно уметь жонглировать:

1. Интерлиньяж — межстрочный интервал.
2. Трекинг — межбуквенный интервал.
3. Длина строки — ширина текстового блока.

Заголовки (визуальный акцент) и наборный текст (читаемость) настраиваются по-разному. Существует обратная зависимость: чем больше размер текста, тем меньше должны быть длина строки, интерлиньяж и трекинг.

Чек-лист настроек:

• Интерлиньяж: для заголовков — 95–115%, для текста — 120–145%.
• Трекинг: для заголовков уменьшаем (-1% до -5%), для текста (особенно для новичков) лучше не менять или использовать от -2% до +2%.
• Длина строки: для наборного текста оптимально 40–70 символов (7–10 слов). Заголовки обычно состоят из 1-3 слов.

Шрифтовая система координат

Шрифты можно расположить в системе по двум осям:

• Ось X (горизонтальная): слева — традиционные (например, антиква/шрифты с засечками), справа — современные (гротески/без засечек, универсальные и технологичные).
• Ось Y (вертикальная): снизу — наборные (для больших объёмов текста, нейтральные), сверху — акцидентные (для отражения характера бренда, привлечения внимания, подходят для заголовков).

Рекомендация: Для старта используйте гротески — с ними сложно ошибиться.

Форма

При работе с макетом важно управлять формой текстовых блоков. Текст стремится к форме прямоугольника, поэтому строки должны выстраиваться максимально естественно.

Советы:

• Используйте плагин Better Typograph для автоматического удаления «висячих» предлогов и союзов.
• В 95% случаев выравнивайте текст по левому краю (соответствует направлению чтения).

Выводы:
Этих пяти принципов достаточно, чтобы научиться создавать аккуратные и красивые макеты. Освоив группировку, иерархию, настройки «треугольника», выбор шрифта и работу с формой, вы закроете базовые задачи типографики.