Типографика — это то, как текст выглядит и читается: какой выбран шрифт, какого он размера, сколько воздуха между строками и буквами. В хорошем макете на типографику обычно приходится больше половины работы, потому что почти любой дизайн состоит из текста. Разбираем основы: классификацию шрифтов, правила сочетания, кернинг и частые ошибки новичков.
Что такое типографика
Типографика отвечает за две вещи: чтобы текст было легко читать и чтобы он передавал характер бренда. Один и тот же заголовок, набранный строгим гротеском и рукописным шрифтом, говорит о совершенно разных компаниях.
Типографика — это не только выбор шрифта. В неё входят:
- Размер и иерархия: чем заголовок отличается от подзаголовка и основного текста.
- Интерлиньяж: расстояние между строками.
- Трекинг и кернинг: расстояние между буквами.
- Длина строки и выравнивание.
- Цвет и контраст текста с фоном.
Основные группы шрифтов
| Группа | Как узнать | Где подходит |
|---|---|---|
| Антиква (с засечками) | у букв есть засечки на концах штрихов | книги, длинные тексты, классические бренды |
| Гротеск (без засечек) | ровные штрихи без засечек | сайты, интерфейсы, современные бренды |
| Моноширинный | все буквы одной ширины | код, технические тексты |
| Рукописный | похож на письмо от руки | акценты, открытки, бренды с личным характером |
| Акцидентный (декоративный) | необычная, яркая форма | заголовки, логотипы, постеры |
Для основного текста почти всегда берут антикву или гротеск: их легко читать. Рукописные и декоративные шрифты оставляют для коротких заголовков и акцентов.
Как сочетать шрифты
Правило двух шрифтов
Новичку достаточно двух шрифтов на проект: один для заголовков, второй для текста. Часто хватает и одного, если у него много начертаний: тонкое, обычное, полужирное, жирное. Три и больше шрифтов почти всегда делают макет пёстрым.
Контраст, а не похожесть
Шрифты должны заметно отличаться, иначе кажется, что это ошибка. Удачные пары:
- Гротеск + антиква. Заголовок без засечек, текст с засечками, или наоборот. Классическая и надёжная пара.
- Жирный акцидентный + спокойный гротеск. Яркий заголовок и нейтральный текст, который ему не мешает.
- Один шрифт, разные начертания. Жирный заголовок и обычный текст одного семейства.
Плохая пара — два похожих гротеска: разница видна, но не читается как приём.
Где искать сочетания
Google Fonts показывает популярные пары прямо на странице шрифта. Удобно и смотреть, как шрифты сочетаются на реальных сайтах и в презентациях брендов: так вы быстро соберёте свою подборку проверенных пар.
Кернинг, трекинг и интерлиньяж
Кернинг — расстояние между двумя конкретными буквами. Некоторые пары, например «ТА», «Г.», «AV», по умолчанию стоят слишком далеко или слишком близко, и слово «разваливается». В крупных заголовках и логотипах кернинг правят вручную. Попробуйте расставить буквы на глаз в нашей игре «Кернинг» и сравните свой результат с работой дизайнера.
Трекинг — расстояние между всеми буквами в строке. Небольшой положительный трекинг помогает заголовкам, набранным прописными буквами. В основном тексте трекинг лучше не трогать.
Интерлиньяж — расстояние между строками. Для основного текста хороший ориентир 1,4–1,6 от размера шрифта. В крупных заголовках интерлиньяж делают меньше, около 1,1–1,2.
Правила читаемого текста
- Размер основного текста на сайте от 16 px, в печати от 9–10 pt.
- Длина строки 45–75 знаков. Слишком длинную строку трудно читать, взгляд теряет начало следующей.
- Выравнивание по левому краю для длинных текстов. Выключка по ширине без переносов создаёт «реки» из пробелов.
- Контраст с фоном. Серый текст на сером фоне выглядит стильно, но его невозможно прочитать.
- Иерархия. Заголовок, подзаголовок и текст должны отличаться размером или насыщенностью, чтобы структура была видна сразу.
Частые ошибки
- Слишком много шрифтов в одном макете.
- Декоративный шрифт в длинном тексте.
- Сжатый или растянутый шрифт: пропорции букв нельзя искажать.
- Подчёркивание и прописные буквы в больших абзацах.
- Кавычки «лапки» и дефис вместо тире. В русском тексте нужны «ёлочки» и длинное тире.
- Шрифт без кириллицы: в русском тексте часть букв подменяется другим шрифтом. О том, как типографика работает вместе с цветом и композицией, мы писали в статье «Основы композиции в дизайне».
Как научиться типографике
Типографика тренирует глаз: чем больше макетов вы делаете и разбираете, тем быстрее видите плохой кернинг и неудачные пары. На курсе графического дизайна с нуля вы разберёте типографику, цвет и композицию и за 7 недель сделаете 13 работ, от визитки и постера до логотипа и фирменного стиля. Каждую работу преподаватель разбирает отдельно. Academy Graphicmania — партнёр по учебной карте Töötukassa, подробнее на странице «Обучение по учебной карте».
Частые вопросы
Сколько шрифтов можно использовать в одном макете?
Обычно один или два. Третий допустим как акцент, например в логотипе.
Чем кернинг отличается от трекинга?
Кернинг меняет расстояние между двумя конкретными буквами, трекинг меняет расстояние между всеми буквами строки сразу.
Где брать бесплатные шрифты с кириллицей?
В Google Fonts есть фильтр по кириллице. Перед использованием в коммерческом проекте проверьте лицензию шрифта.