Правильный шрифт продаёт. Неправильный — отпугивает. Разбираем как выбирать

◷ 16 мин чтения · типографика · брендинг · дизайн

Один и тот же текст: «Ваша безопасность — наш приоритет». Написан Comic Sans — смеёшься. Написан тонким сансерифом — читаешь равнодушно. Написан жирным засечным — чувствуешь что это серьёзно. Шрифт не просто показывает текст. Шрифт говорит тоном голоса — и этот тон работает раньше чем мозг начинает читать слова.

Большинство брендов выбирают шрифты по принципу «нравится / не нравится» или «скачал бесплатно». Это приблизительно то же самое что выбирать тембр голоса для спикера на конференции по принципу «приятный человек». Может и так сработает. Но, скорее всего, подводит в самый важный момент.

Типографика — это голос бренда. И у голоса есть характеристики: высота, темп, акцент, интонация. Шрифт несёт все эти характеристики визуально. Выбор шрифта — это выбор того как бренд звучит для каждого кто его читает.

## Что шрифт говорит без слов

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

Засечки (serif) — Times New Roman, Garamond, Georgia. Горизонтальные штрихи на концах букв. Исторически связаны с печатью, газетами, книгами. Передают: авторитет, традиция, надёжность, серьёзность. Хорошо работают для: юридических услуг, финансов, медиа, люкс-брендов, издательств.

Гротески (sans-serif) — Helvetica, Futura, Gill Sans. Без засечек, чистые формы. Передают: современность, нейтральность, доступность, функциональность. Хорошо работают для: технологий, здравоохранения, образования, ритейла.

Геометрические гротески — Futura, Avenir, Montserrat. Строятся на геометрических формах (круг, квадрат, треугольник). Передают: точность, технологичность, амбицию. Холоднее чем гуманистические гротески.

Гуманистические гротески — Gill Sans, Optima, Myriad. Гротески с человеческими пропорциями, взятыми из каллиграфии. Передают: тепло, доступность, человечность. Лучше читаются в текстовых блоках.

Моноширинные — Courier, Source Code Pro. Каждая буква занимает одинаковую ширину. Передают: технологичность, точность, прозрачность (как код). Используют технологические бренды для специфических акцентов.

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

## Почему выбор шрифта разрушает доверие

Несоответствие шрифта и контента создаёт когнитивный диссонанс. Мозг фиксирует несоответствие быстро — и интерпретирует его как сигнал ненадёжности.

Конкретные ситуации когда шрифт разрушает доверие:

Игривый шрифт в серьёзном контексте. Медицинский сайт с округлым мягким шрифтом. Юридический договор набранный шрифтом для детской книги. Нет, Comic Sans не нужен для этого — достаточно просто шрифта у которого слишком «игривый» характер.

Устаревший шрифт в современном контексте. Times New Roman на сайте технологической компании. Это не «классика» — это сигнал что компания не обновлялась с 2005 года.

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

Слишком много шрифтов. Если на одной странице использованы три и более различных семейства — мозг считает это хаосом. Хаос ассоциируется с некомпетентностью.

Системные шрифты без намерения. Arial, Times New Roman, Calibri — умолчания Microsoft Office. Сигнализируют: «мы не думали об этом». Могут быть правильным выбором — но только если выбраны намеренно.

## Как выбрать шрифт для бренда

### Шаг 1: Определи три слова-характеристики

Прежде чем смотреть шрифты — опиши характер бренда тремя словами. Не «качественный», «надёжный», «современный» — это слова которые хочет каждый бренд. Конкретные слова которые отличают тебя.

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

Три слова — фильтр для отбора. Когда смотришь на шрифт — задаёшь вопрос: он звучит как эти три слова?

### Шаг 2: Посмотри на конкурентов и сделай наоборот

Собери скриншоты сайтов пяти прямых конкурентов. Обрати внимание на шрифты (можно воспользоваться WhatFont или аналогом).

Если все используют гротески — рассмотри засечки (если это соответствует характеру). Если все серьёзные и строгие — рассмотри что-то с большей индивидуальностью. Не «сделай наоборот» ради противоречия — но «найди то что никто не занял».

### Шаг 3: Протестируй в реальных контекстах

Ошибка — выбирать шрифт по виду в Figma на чистом фоне. Тестируй в реальных применениях:

• Длинный текстовый блок (3–4 абзаца)
• Заголовок в 60px
• Подпись в 12px
• Белый текст на цветном фоне
• На мобильном экране
• В таблице с цифрами

Шрифт который красиво выглядит в витрине может быть нечитаемым в реальных условиях.

### Шаг 4: Проверь технические характеристики

Начертания. Есть ли Bold, Italic, Light, Medium? Если шрифт есть только в одном начертании — это ограничение которое будет проблемой при создании иерархии.

Кириллица. Если работаешь на русском — качество кирилличного начертания критично. Многие популярные шрифты имеют отличную латиницу и посредственную кириллицу. Специально проверяй русский текст.

Лицензия. Бесплатный для личного использования ≠ бесплатный для коммерческого. SIL Open Font License — свободный для всего. Adobe Fonts — доступен с подпиской Adobe. Google Fonts — открытый. Всё остальное — проверяй.

Форматы. Web fonts (WOFF2, WOFF) для сайта. OTF/TTF для дизайн-программ. Variable fonts для адаптивной типографики. Убедись что нужные форматы есть.

## Типографическая система бренда

Один шрифт — редко достаточно. Два — обычно оптимально. Три — максимум.

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

Текстовый шрифт (Body): для длинных текстов, параграфов, описаний. Приоритет — читаемость. Нейтральный, удобный, без лишних деталей которые утомляют при чтении.

Акцентный шрифт (Accent): опционально. Для цитат, подписей, специфических элементов. Часто — более характерный или контрастирующий с основными двумя.

### Пары которые работают

Засечный заголовочный + гротескный текстовый. Классика. Заголовок: авторитет и характер. Текст: читаемость и нейтральность. Работает для: финтех, медиа, издательства, профессиональные услуги.

Два гротеска разного характера. Геометрический для заголовков (точность, технологичность) + гуманистический для текста (тепло, читаемость). Работает для: технологических брендов которые хотят быть человечными.

Один шрифт во всех весах. Максимальная консистентность. Требует шрифта с богатой линейкой начертаний (Light, Regular, Medium, Bold, Black). Работает для: минималистичных брендов, дизайн-студий.

## Работа с типографикой в системе

### Иерархия

Типографическая иерархия — это визуальная система которая говорит читателю «вот самое важное, вот менее важное, вот детали». Без иерархии — хаос. С плохой иерархией — тоже хаос, просто менее очевидный.

Базовые уровни:

1. H1 — главный заголовок страницы/секции. Один на страницу. Максимальный размер.
2. H2 — подраздел. Явно меньше H1, явно больше текста.
3. H3 — подподраздел или акцент внутри текста.
4. Body — основной текст. Оптимальная читаемость: 16–18px на вебе, 9–12pt в печати.
5. Caption/Small — подписи, сноски, мета-информация. Не менее 11px на экране.

Разница между уровнями должна быть очевидной. Если H1 и H2 отличаются на 2px — иерархии нет. Минимальный шаг — 1.25× (модульная шкала).

### Пространство между строками

Межстрочный интервал (leading) — один из самых недооценённых элементов типографики. Слишком мало — текст сжат, трудно читать. Слишком много — текст «распадается», теряет связность.

Для основного текста: 1.5–1.7× от размера шрифта. Для заголовков: 1.1–1.3× (крупные буквы требуют меньшего интервала). Для длинных строк (>80 символов): увеличивай интервал.

### Длина строки

Оптимальная длина строки для читаемости: 45–75 символов. При более длинных строках глаз теряет строку при переходе. При более коротких — слишком частые переносы взгляда утомляют.

На мобильных устройствах это обычно соблюдается автоматически. На широких десктоп-экранах — нужно ограничивать ширину текстового контейнера (max-width: 65ch в CSS).

## Типографические антипаттерны

Слишком много шрифтов. Три семейства — максимум. Реально работающих правил: один заголовочный + один текстовый.

Кернинг по умолчанию в заголовках. Автоматический кернинг шрифта оптимизирован для текста. В крупных заголовках часто нужна ручная корректировка межбуквенного расстояния. Особенно критично для логотипов и слоганов.

Выравнивание по ширине (justify) без переносов. Justify без расстановки переносов создаёт «реки» — неравномерные пробелы между словами. Или выравнивай по левому краю, или подключай расстановку переносов.

Заглавные буквы с обычным кернингом. ALL CAPS без увеличения трекинга выглядит зажато. Для CAPS добавляй 50–100 единиц трекинга.

Шрифт «для дизайна» в интерфейсе. Декоративные шрифты, хорошо работающие на плакате, разрушают читаемость в интерфейсе с мелкими элементами, большими текстовыми массивами, состояниями hover/active/disabled.

## ИИ и типографика: как использовать Claude

### Промпт: Выбрать шрифтовую пару для бренда

Помоги выбрать шрифтовую пару для бренда.

О бренде:
- Название и описание: [что за компания, что продаёт]
- Три слова характеризующих бренд: [слово 1, слово 2, слово 3]
- Аудитория: [кто читает наш контент]
- Контексты использования: [сайт, мобильное приложение, печатные материалы, презентации]
- Конкуренты и их шрифты: [что используют]
- Бюджет на шрифты: [бесплатно через Google Fonts / готовы платить за лицензию]
- Языки: [русский / английский / оба]

Предложи:
1. Три варианта шрифтовых пар с обоснованием почему они соответствуют характеру бренда
2. Для каждой пары — конкретные примеры применения (заголовок H1, подзаголовок, текст, подпись)
3. Ссылки на Google Fonts или указание источника для каждого шрифта
4. Какие начертания (weights) нужны минимально для полноценной работы

### Промпт: Аудит типографики сайта

Проведи аудит типографики нашего сайта.

Текущая типографика:
- Заголовки: [шрифт, размер, вес]
- Основной текст: [шрифт, размер, интервал]
- Вторичные элементы: [подписи, кнопки, навигация]
- Количество шрифтовых семейств: [сколько]

Описание сайта:
- Тип сайта: [лендинг / блог / интернет-магазин / SaaS / корпоративный]
- Аудитория: [кто]
- Позиционирование: [как хотим восприниматься]

Оцени:
1. Читаемость: соответствуют ли размеры и интервалы стандартам
2. Иерархия: чётко ли читается структура страницы
3. Консистентность: нет ли хаоса из разных шрифтов и стилей
4. Соответствие характеру: говорит ли типографика то что нужно
5. Конкретные исправления с CSS-параметрами (font-size, line-height, letter-spacing)

### Промпт: Создать типографическую систему

Помоги создать типографическую систему для бренда.

Шрифты которые мы используем (или планируем использовать):
- Заголовочный: [шрифт]
- Текстовый: [шрифт]

Платформы:
- [Сайт / приложение / печать — выбери нужные]

Составь:
1. Шкалу размеров для всех уровней заголовков (H1–H4) и текста (body, small, caption)
2. Для каждого уровня: размер, вес, межстрочный интервал, трекинг, цвет
3. Правила для разных контекстов (мобильный vs десктоп, тёмная vs светлая тема)
4. Примеры применения в CSS-переменных или токенах дизайн-системы
5. Что нельзя делать — список из 5–7 запретов для нашей системы

### Промпт: Диагностика проблем с читаемостью

Текст на нашем сайте/в приложении читается плохо. Помоги диагностировать причины.

Описание проблемы: [пользователи жалуются что... / по тестам видим что...]
Текущие параметры текста:
- Шрифт: [название]
- Размер: [px или pt]
- Вес: [Regular/Medium/Bold]
- Межстрочный интервал: [значение]
- Цвет текста и фона: [hex или описание]
- Ширина колонки текста: [px или %]
- Устройство: [в основном мобайл / десктоп / оба]

Проанализируй:
1. Какие параметры нарушают стандарты читаемости
2. Конкретные исправления с числами
3. Какой контраст достигается (WCAG AA — минимум 4.5:1 для текста)
4. Приоритет исправлений — с чего начать для максимального эффекта

### Промпт: Подобрать кирилличный шрифт

Нам нужен шрифт с качественным кирилличным начертанием.

Характер который нужно передать: [описание]
Контекст использования: [сайт / приложение / печать]
Уже используем для латиницы: [шрифт, если есть]
Требования к лицензии: [бесплатный / коммерческий / без ограничений]

Порекомендуй:
1. 3–5 шрифтов с качественной кириллицей которые соответствуют характеру
2. Для каждого — краткая характеристика и почему он подходит
3. Как шрифт сочетается с указанным латинским шрифтом (если есть)
4. Источник скачивания и условия лицензии
5. На что обратить внимание при тестировании кириллицы (конкретные буквы которые часто рисуются плохо: Ж, Ы, Э, Ъ)