Типографика: голос бренда

Шрифты — это голос бренда

Если ты увидишь на сайте банка заголовок рукописным шрифтом с завитушками – будет странно, правда? А теперь представь детский праздник с официальным строгим шрифтом — тоже не то.

Шрифты — это голос бренда. Они говорят с пользователем ещё до того, как он прочитал хоть слово. Серьёзный, дружелюбный, игривый, строгий — всё это передаётся через типографику.

На первом экране у тебя всего несколько секунд, чтобы человек понял: куда он попал. И шрифты здесь работают наравне с текстом. Поэтому выбирать их нужно осознанно, а не «потому что красиво».

Два главных типа шрифтов

Все шрифты делятся на множество категорий, но тебе для начала достаточно знать две: с засечками и без засечек.

С засечками (serif) — у букв есть маленькие «хвостики». Выглядят классически, серьёзно, по-книжному. Примеры: Times New Roman, Playfair Display, Merriweather.

Без засечек (sans-serif) — чистые буквы без украшений. Выглядят современно, нейтрально, легко читаются с экрана. Примеры: Inter, Roboto, Montserrat, Manrope.

Для веба чаще берут sans-serif — они лучше читаются на экранах. Serif используют для акцентов, заголовков или когда нужен «классический» характер. Для первого экрана лендинга — почти всегда sans-serif.

Шрифтовая пара: как подобрать

Бывает, что одного шрифта мало. Тогда берут два: один для заголовков, другой для основного текста. Это называется шрифтовая пара. Главное правило — шрифты должны отличаться, но сочетаться.

Три рабочих приёма:

1. Один шрифт, разные начертания (например, Montserrat Bold для заголовков и Montserrat Regular для текста)
2. Два шрифта одной категории (два sans-serif, но разных по характеру)
3. Контраст категорий (serif для заголовка + sans-serif для текста)

Но сейчас, в начале пути, используй лишь один шрифт, т.е. "приём 1". Иначе получится винегрет.

Иерархия: кто здесь главный

На первом экране есть несколько типов текста: заголовок, подзаголовок, текст кнопки, возможно, мелкий текст (политика конфиденциальности). Каждый должен отличаться по размеру и весу.

Классическая иерархия:

1. H1 — главный заголовок, самый крупный (36-64 px)
2. H2 — подзаголовок или подпункт (20-28 px)
3. Body — основной текст (16-18 px)
4. Button — текст на кнопке (14-18 px, часто жирный)
5. Caption — мелкий текст, подписи (12-14 px)

Правило простое: чем важнее — тем крупнее и жирнее. Пользователь должен за секунду понять, что читать первым. Если всё одного размера — это не дизайн, а простыня.

Межстрочное расстояние — невидимый герой

Между строками должно быть «воздух». Если строки слипаются — читать тяжело. Если слишком далеко — текст разваливается.

Параметр называется line-height (межстрочное растояние/интерлиньяж). Правило для расчёта:
• Для заголовков: line-height 1.1–1.2
• Для основного текста: line-height 1.4–1.6
• Для мелкого текста: line-height 1.3–1.5

В Figma это настраивается в панели справа. Просто поставь значение в процентах или пикселях — и текст сразу «задышит».

Запомни: плохой line-height убивает даже самый красивый шрифт. Хороший — делает чтение приятным.

Как это делают в России

Посмотри на первые экраны российских компаний — и увидишь те же принципы.

• Додо Пицца: «Доставим за 30 минут или пицца бесплатно». Конкретика, выгода, снятие риска.
• Тинькофф: «Банк без отделений». Коротко, понятно, отличие от конкурентов.
• Яндекс Еда: «Еда и продукты за 30 минут». Снова скорость + конкретика.
• Самокат: Доставка от 15 минут. То же самое — обещание, которое можно измерить.

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

Ошибки, которые убивают первый экран

• «Мы — лидер рынка с 2005 года». Пользователю всё равно. Ему важно, что он получит, а не сколько лет ты на рынке.
• «Инновационные решения для вашего бизнеса». Пустые слова. Какие решения? Для какого бизнеса? Что конкретно?
• «Качественные услуги по доступным ценам». Так пишет каждый второй. Это не УТП, это шум.
• «Добро пожаловать на наш сайт». Зачем? Это и так понятно. Трать это место на смыслы.

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

Практика: напиши тексты для своего брифа

Открой бриф, который ты выбрал в начале курса. На основе вводных от заказчика напиши три вещи:

• Заголовок: до 10 слов, с выгодой и конкретикой
• Подзаголовок: 1-2 строки, раскрывающие заголовок
• Текст кнопки CTA: глагол + выгода, до 4 слов

Совет: сначала напиши 5-7 вариантов заголовка, а потом выбери лучший. Первый вариант почти всегда слабый.

Проверь себя: если убрать название компании, текст всё ещё работает? Если да — ты на правильном пути. Если текст можно применить к любому конкуренту — переделывай.