6 простых советов по созданию эффективной типографической иерархии

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

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

1. Ограничьте количество гарнитур (шрифтов)

Не используйте много разных шрифтов. Главный смысл создания типографической иерархии – ясность. Две гарнитуры в одном дизайне – стандарт для безопасной типографики. Почему? Три гарнитуры, выбранные без должной аккуратности, способны устроить погром на странице.

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

2. Дополнение и контраст

Использование пары шрифтов: одна с засечками, другая без засечек – ещё один распространённый принцип шрифтового дизайна. Сложный, интригующий и элегантный дизайн serif хорошо оттеняется простым, чистым sans. Вместе эти две гарнитуры создадут необходимую иерархию без условностей и натяжек. Один – для заголовков, второй – для мелкого текста.

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

3. Учитывайте характер

Выбрать произвольные шрифты с засечками и без них зачастую бывает недостаточно. Два шрифта разных семейств должны выполнять одну задачу. Избегайте сочетаний классического serif с вычурным sans, или декоративного serif с жёстким sans.

Спросите себя, какой характер имеет каждый из выбранных вами шрифтов, и подходят ли их характеры к содержанию вашего сообщения.

4. Стратегически используйте кегль

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

Чтобы обратить внимание на основную мысль, сделайте разницу между ней и окружающим её текстом драматической. Выберите начертание такой жирности, которая действительно способна отразить её важность.

Масштабирование шрифтов часто зависит от системы отображения, поэтому следует быть осторожным, задавая кегль некоторым шрифтам. Например, слишком маленькая надпись, сделанная декоративным шрифтом вроде Thirsty Script, будет нечитаемой, что придаст всей странице неряшливый вид.

С другой стороны, некоторые гарнитуры, используемые для отображения основного текста, можно использовать и в очень большом кегле. Например, из OpenSans получаются отличные заголовки, причём как в лёгком, так и в самом тяжёлом начертании:

5. Контрастные цвета

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

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

6. Следите за пробелами

Другой способ сосредоточить внимание на сообщении – отделить его пустым пространством. Дизайн, основанный на нагромождении плотного текста, вряд ли будет иметь хорошо читаемую иерархию, даже если вы будете следовать всем остальным правилам.

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

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

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