Цвет бренда выбирают по категории и эмоции, а не по принципу «нравится»: синий — доверие и технологии, зелёный — природа и здоровье, красный — срочность и аппетит. Шрифты — по читаемости и характеру: гротеск для современного и нейтрального, антиква — для традиционного и статусного. Минимальная палитра — 1 основной + 2 нейтральных; типографика — 1–2 шрифта. Проверяйте комбинации на контраст и читаемость до запуска.
Цвет: как выбирают и почему
Цвет в бренде работает на двух уровнях — категориальном и эмоциональном.
Категориальный — цвет сигнализирует, к какой отрасли относится бренд. Пользователь считывает это за доли секунды, не читая текст:
| Отрасль | Частые цвета | Почему |
|---|---|---|
| Финтех, банки | Синий | Доверие, стабильность |
| Здоровье, эко | Зелёный | Природа, жизнь |
| Доставка еды | Красный, оранжевый | Аппетит, срочность |
| Премиум, люкс | Чёрный, золото | Статус, дефицит |
| Дети, образование | Жёлтый, голубой | Энергия, игра |
Если все конкуренты в нише синие, а вы выходите оранжевым — это дифференциация. Но если вы банк и красный, — придётся объяснять, почему вы не «опасный».
Эмоциональный — цвет вызывает конкретное настроение. Это работает на уровне ассоциаций:
- синий — спокойствие, надёжность;
- красный — срочность, страсть, агрессия;
- жёлтый — энергия, тепло, оптимизм;
- зелёный — рост, спокойствие, свежесть;
- фиолетовый — роскошь, креативность;
- чёрный — статус, минимализм.
Подбирать цвет нужно не из своих предпочтений, а из задачи: какую эмоцию должен вызвать бренд у целевой аудитории в момент первого контакта.
Палитра бренда: структура
Рабочая палитра — это 3–5 цветов с чёткими ролями:
- Основной цвет (primary) — 60% использования. Главная ассоциация с брендом.
- Дополнительный (secondary) — 10–20%. Для акцентов, вторичных CTA.
- Нейтральные (neutrals) — 20–30%. Текст, фон, границы. Обычно это 4–6 оттенков серого от почти чёрного до почти белого.
- Семантические (success, warning, error) — для состояний интерфейса. Не входят в брендовую палитру, но важны для цифровых продуктов.
Проверка палитры на прочность: откройте пять случайных носителей (сайт, визитка, баннер, упаковка, соцсети) и посмотрите, узнаётся ли бренд по цвету. Если нет — палитра слишком широкая или основные цвета используются неправильно.
Контраст: главное правило читаемости
Цвет имеет смысл, пока текст читается. Контраст — это разница в яркости между текстом и фоном, измеряется коэффициентом от 1:1 (чёрный на чёрном) до 21:1 (чёрный на белом).
| Назначение | Минимальный контраст | Пример |
|---|---|---|
| Основной текст | 4.5:1 | #333 на #FFF — 12.6:1 |
| Крупный текст (от 24 px) | 3:1 | #666 на #FFF — 5.7:1 |
| Элементы интерфейса | 3:1 | Иконки, границы |
| Декоративный текст | нет требования | Брендовые подписи |
Серый текст на белом — частая ошибка. #999 на белом даёт 2.8:1 — не проходит по доступности. Минимум для основного текста — #6B6B6B или темнее.
Проверяйте контраст автоматически — плагином Stark в Figma или сервисом WebAIM Contrast Checker.
Шрифты: гротеск, антиква, рукописные
Шрифты делятся на несколько больших групп, и каждая передаёт свой характер:
| Группа | Характер | Примеры | Когда использовать |
|---|---|---|---|
| Гротеск (sans-serif) | Современный, нейтральный | Inter, Manrope, Pragmatica | Технологии, сервисы, медиа |
| Антиква (serif) | Традиционный, статусный | PT Serif, Lora, Merriweather | Юриспруденция, медиа, премиум |
| Моноширинный | Технический, код | JetBrains Mono, Fira Code | IT, разметка, акценты |
| Рукописный/акцидентный | Эмоциональный, авторский | Pacifico, Caveat | Логотипы, заголовки, мораль |
Для цифровых продуктов с большим объёмом текста гротеск — безопасный выбор: он читается на экране лучше антиквы. Антиква уместна, когда нужно подчеркнуть статус или традицию (юристы, медицина, премиум).
Как составить пару шрифтов
Пара шрифтов работает по правилу контраста: они должны быть достаточно разными, чтобы complement, и достаточно близкими, чтобы сочетаться. Три надёжных комбинации:
- Гротеск + антиква. Заголовки антиквой, основной текст гротеском. Классика медиа и блогов.
- Контрастные гротески. Нейтральный для текста (Inter) + характерный для заголовков (Manrope, Gilroy). Современно, технологично.
- Гротеск + акцидентный. Для логотипа или крупных заголовков — акцидентный, для интерфейса — нейтральный гротеск.
Нельзя сочетать два характерных шрифта — они будут спорить. Два нейтральных — сочетаются, но скучно. Идеально — один характерный, один нейтральный.
Размеры и интерлиньяж
Типографика в цифровом продукте описывается системой размеров:
| Элемент | Размер, px | Интерлиньяж |
|---|---|---|
| Заголовок H1 | 48–64 | 1.1 |
| Заголовок H2 | 32–40 | 1.2 |
| Заголовок H3 | 24–28 | 1.25 |
| Основной текст | 16–18 | 1.5–1.6 |
| Вспомогательный текст | 14 | 1.5 |
Главное правило: основной текст в вебе — не меньше 16 px. Всё, что меньше, читается хуже, особенно на мобильных. Интерлиньяж 1.5 для основного текста — стандарт читаемости.
Кириллица: главная боль российских брендов
Многие красивые шрифты не поддерживают кириллицу или поддерживают плохо — с засечками не в тех местах, странными пропорциями. Перед использованием шрифта:
- Проверьте язык. В лицензии или на странице шрифта должно быть явно указано, что кириллица поддерживается.
- Посмотрите на кириллические глифы. Особенно «я», «д», «з», «и» — в них чаще всего косячат.
- Проверьте начертания. Бывает, что Regular есть, а Bold — нет, или курсив — это просто наклонённый Regular.
Надёжные бесплатные шрифты с кириллицей: Inter, Manrope, PT Sans/Serif, Pragmatica, Golos, Onest.
Чек-лист проверки айдентики перед запуском
- Основной цвет dominates в палитре (60% использования).
- Контраст основного текста — минимум 4.5:1 на всех носителях.
- Все шрифты поддерживают кириллицу и нужные языки.
- Есть все начертания (Regular, Medium, Bold).
- Пара шрифтов контрастна по характеру, не спорит.
- Палитра укладывается в 3–5 цветов.
- Айдентика работает на чёрно-белом носителе (если бренд цветной, проверьте на Факс/копир).
- На мобильном экране основной текст читается без зума.
Цвет и шрифт — это не «украшательство», а носители смысла бренда. Цвет говорит, к какой категории относится компания и какую эмоцию вызывает. Шрифт определяет характер — современный, традиционный, дружелюбный, статусный. Выбор по принципу «нравится» ведёт к айдентике, которая не работает. Выбор по задаче — к айдентике, которая помогает продавать.
Комментарии · 0