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

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

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

Что такое типографическая иерархия?

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

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

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

Существует множество факторов, составляющих типографическую иерархию в веб-дизайне. К ним относятся:

Размер. Это, как правило, первое, к чему обращаются начинающие дизайнеры, пытаясь создать типографическую иерархию. И на то есть веская причина: читатели сразу и легко его распознают. Больше = важнее, меньше = менее важно. Однако размер может превратиться в палку о двух концах, когда существует так много других способов создать иерархию.

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

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

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

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

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

Как создать типографическую иерархию (и визуально организовать свой дизайн)

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

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

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

Размер шрифта

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

Классическая типографская шкала из книги «Элементы типографского стиля» знакома большинству дизайнеров, поскольку именно она обычно используется в качестве стандартной в большинстве текстовых редакторов при выборе размера шрифта. Шкала выглядит следующим образом:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 и 72.

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

Дизайнеры склонны по умолчанию использовать размер текста 12 пунктов, но увеличение его до 14 или 16 (или даже до 24) может повысить читаемость в зависимости от используемого шрифта. Например, на личном сайте Джеффри Зельдмана для основного текста используется размер шрифта 24 пикселя, а на Vogue.com – 19 пикселей.

Однако прежде чем окончательно определиться с масштабом, дизайнеры должны убедиться, что шрифты, используемые в проекте, окончательно утверждены. Разные шрифты могут выглядеть значительно крупнее или мельче, даже если технически они имеют «одинаковый» размер.

Выбор сочетающихся шрифтов

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

Во-первых, сочетать шрифты с засечками и без засечек значительно проще, чем комбинировать два шрифта с засечками или два шрифта без засечек. Но это не так просто, как просто взять любой шрифт с засечками и любой шрифт без засечек и соединить их в одном дизайне.

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

‍

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

Ищите шрифты с похожей высотой x (расстояние между нижней линией и средней линией строчных букв в шрифте). Это помогает избежать конфликта между шрифтами. Другие факторы, помогающие избежать конфликта, включают похожий кернинг и форму символов. Шрифты с очень округлыми формами букв не следует сочетать с более квадратными шрифтами.

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

Вооружившись этими рекомендациями, дизайнеры могут следовать четырехэтапному процессу, предложенному ресурсом по веб-типографике Better Web Type для создания эффективных сочетаний:

1. Найдите главный вариант шрифта для основного текста.
2. Найдите несколько второстепенных шрифтов для возможных комбинаций.
3. Оцените комбинации.
4. Отсейте/выберите комбинации шрифтов.

Дополнительные соображения

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

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

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

Даже интервалы между символами можно использовать для создания иерархии. Увеличение интервалов между символами может выделить ту или иную строку. Это особенно эффективно в сочетании с использованием заглавных букв. Однако дизайнерам следует быть осторожными и не переусердствовать, так как при чрезмерном использовании этот прием может выглядеть непрофессионально.

Заключение

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

Как только эти основы закрепятся в сознании (и на практике) дизайнера, он сможет более интуитивно создавать визуальные иерархии, следуя или нарушая «правила» по мере необходимости, чтобы создавать уникальные дизайны, которые вдохновляют и радуют пользователей.