Шрифты и типографика: как сочетать и не испортить макет

Шрифт тоже говорит

Одна и та же фраза «Кофе с собой» выглядит по-разному, если набрать её строгим, округлым или рукописным шрифтом. Шрифт передаёт характер, ещё до того как человек прочитал слова. Поэтому выбор шрифта — такое же решение по брифу, как выбор цвета.

Основные группы шрифтов:

Группа	Как выглядит	Впечатление	Где уместна
С засечками	У букв есть маленькие поперечные черты на концах	Традиция, спокойствие, литература	Заголовки, книги, меню ресторанов
Без засечек	Простые линии без черт	Современность, ясность	Текст на экране, интерфейсы, навигация
Декоративные	Необычные формы	Яркий характер	Только крупные заголовки и логотипы
Рукописные	Как будто написано от руки	Тепло, личное	Короткие акценты, не для длинного текста
Моноширинные	Все буквы одной ширины	Техника, код	Цены, таблицы, технические подписи

Декоративные и рукописные шрифты эффектны, но плохо читаются в длинном тексте и мелком размере. Их используют для одного-двух слов, а не для меню на целую страницу.

Пара шрифтов для «Утра»

Обычно хватает одного-двух шрифтов:

• акцидентный — для логотипа и заголовков, с характером;
• текстовый — для меню, адресов, постов, максимально читаемый.

Для кофейни «Утро» подберём:

• Lora — шрифт с засечками и мягкими округлыми формами — для логотипа и заголовков: тепло и немного по-домашнему;
• Manrope — шрифт без засечек — для текста: чистый, хорошо читается и на стакане, и в телефоне.

Оба есть в каталоге Google Fonts с кириллицей и распространяются под открытой лицензией, которая разрешает использование в коммерческих проектах.

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

Иерархия и размеры

Как и в композиции из урока 2, шрифтом строят иерархию: главное — крупнее и насыщеннее. Для постов «Утра» на экране договоримся о размерах:

Уровень	Шрифт	Размер	Начертание
Заголовок	Lora	64 px	Полужирное
Подзаголовок	Manrope	32 px	Полужирное
Основной текст	Manrope	24 px	Обычное
Подпись	Manrope	18 px	Обычное

Шаг между уровнями заметный: заголовок вдвое крупнее подзаголовка. Если размеры отличаются на пару пикселей, иерархии не видно. Для печати размеры задают в пунктах, и они зависят от формата и расстояния, с которого читают: меню на столе и вывеску над входом считают по-разному.

Удобство чтения

• Межстрочный интервал — расстояние между строками. Для основного текста — около 1,4–1,6 от размера шрифта. Для крупных заголовков — меньше, около 1,1–1,2, иначе строки разваливаются.
• Длина строки — около 50–75 знаков. Длинную строку трудно читать: глаз теряется при переходе на следующую. Слишком короткая заставляет взгляд постоянно прыгать.
• Выравнивание — основной текст обычно выравнивают по левому краю. Выравнивание по ширине в узких колонках создаёт дыры между словами.
• Заглавные буквы — подходят для коротких надписей. Абзац целиком заглавными читается медленно и выглядит как крик.

Русская типографика и лицензии

Несколько правил, по которым видно аккуратного дизайнера:

• кавычки — «ёлочки» в русском тексте, а не "лапки";
• тире — длинное «—» между словами, а не дефис «-»;
• неразрывный пробел после коротких слов: «в», «и», «на», «у», — чтобы предлог не повисал в конце строки;
• знак рубля — «120 ₽» с неразрывным пробелом, чтобы цифра не отрывалась от знака.

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