Как выстроить типографическую иерархию

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

Именно она направляет читателя по веб-сайту, бренду или книге. Она подсказывает ему, на что смотреть в первую очередь, что пролистать, а что запомнить. Если все сделано правильно, иерархия будет незаметной. Если же нет, она может вызвать сильную путаницу.

Иерархия — это то, как вы визуально структурируете информацию. 

Вот как делать это правильно.

1. Начните с текста

Прежде чем подбирать шрифты или размеры, поймите, что вы хотите сказать. Прочитайте контент. Выделите в нем заголовки, подзаголовки, основной текст, цитаты, призывы к действию, сноски и т.д. Затем расположите их в порядке важности. Это станет вашей иерархией. Спросите себя: «Если читатель увидит только что-то одно, что это должно быть?» Возьмите ответ за отправную точку.

2. Выбирайте размеры с умом

Размер — наиболее очевидный способ показать важность. Самый большой текст обозначает самый важный элемент (обычно заголовок), за ним следуют подзаголовки и т.д.

Например:

(Веб) Заголовок: 40–60px /  Подзаголовок: 24–36px / Основной текст: 16–20px / Подпись/сноска: 12–14px

(Печать) Заголовок: 38–60pt / Подзаголовок: 20–36pt / Основной текст: 10–14pt / Подпись/сноска: 6–8pt

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

3. Контрастные начертания и стили

Сочетайте различные начертания шрифтов (легкий, обычный, жирный), чтобы расставить акценты. Жирный шрифт может привлечь внимание к ключевым идеям, а более легкий — указывать на второстепенную информацию. Курсив также отлично подходит для дифференциации, но используйте его умеренно, для отдельных слов, цитат или сносок — наклон нужен далеко не везде!

Выбирайте шрифты с достаточно разнообразным набором начертаний (например, PP Neue Montreal, PP Nikkei или PP Right Grotesk), чтобы выстраивать сложные иерархии без необходимости использования нескольких гарнитур.

4. Поэкспериментируйте с интервалами

Межстрочный интервал (интерлиньяж) помогает сделать большие объемы текста более читаемыми. Оптимальное значение для основного текста — 120–140% от размера шрифта. Например, текст 12pt, интерлиньяж ~14–16pt. Также важно правильно настроить межбуквенное расстояние (трекинг, кернинг).

Маленький трекинг может сделать заголовки компактными и выразительными; более широкий — наполнить текст «воздухом» и придать ему формальный вид.

5. Используйте цвет, но не полагайтесь исключительно на него

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

6. Используйте ограниченное количество шрифтов (но выбирайте их с умом)

Вам не нужно 5 или больше шрифтов, чтобы выстроить эффективную иерархию.

В большинстве случаев одной семьи с несколькими стилями более чем достаточно. Если вы все же хотите использовать шрифтовую пару, попробуйте сочетать шрифты с засечками и без. Например, PP Editorial New для заголовков + PP Neue Montreal для основного текста или PP Monument + PP Right Gothic.

7. Повторяйте снова и снова

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

8. Протестируйте свою систему

Уменьшите масштаб. Прищурьте глаза. Прокрутите. Можете ли вы сказать, что здесь самое важное? Может ли кто-то другой с первого взгляда понять, с чего начать? Хорошая иерархия видна без усилий — взгляд должен естественным образом перемещаться по выстроенной вами структуре. Если это не так, вернитесь назад и снова настройте размер, начертание, интервалы или выравнивание — повторяйте, пока не добьетесь нужного результата.