Иерархия в типографике: 6 базовых переменных (часть 2)

В первой части мы изучили 2 из них — близость и начертание. Здесь же рассмотрим еще 4 и разберем несколько интересных примеров.

Теперь перейдем к экспериментам с размером шрифта, без изменения его начертания.

3. Размер

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

• Основной текст

В зависимости от высоты строчных букв (x-height), от 8 до 12 пунктов. Никогда больше 12.

• Заголовки

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

• Подзаголовки или акценты

В зависимости от того, какие размеры вы используете для заголовков, вы можете выбрать что-то среднее между размерами основного текста и заголовков.

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

В связи с этим, давайте поговорим о заголовках. Рассматривайте их как группу младших двоюродных братьев или лучших друзей, которые очень близки. Отступы (опять же, близость), которые вы создаете между словами в заголовке, влияют на то, как он воспринимается. Другими словами, сочетаются ли слова друг с другом? Если да, то должен ли между ними оставаться зазор? Это станет более понятно при обсуждении примеров ниже:

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

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

Какие выводы мы добавим в наш список:

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

Теперь обсудим комбинации переменных.

4. Размер + начертание

Мы начнем с объединения двух переменных и по-прежнему будем использовать близость для создания иерархии. Мы все так же ограничиваемся тремя размерами. Что касается начертания, мы можем изменить начертание слов, которые, по нашему мнению, должны быть заметны, но все же не так важны, как заголовок. Конечно, мы можем сделать слово очень большим и жирным. Но, экспериментируя, следите за балансом страницы. Не слишком ли перегружена одна сторона? Не слишком ли пуста другая?

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

Пример ниже — страница из календаря, который я разработала в прошлое Рождество. Календари — отличная площадка для изучения размеров и начертаний. Я сделала порядковый номер месяца самым большим элементом на странице, также увеличив его начертание. Расположенное прямо под ним название “апрель”, очень легкое и тонкое, создает приятный контраст между ними. Год меньше по размеру, но набран таким же жирным шрифтом, как и число над ним. Несмотря на резкий контраст, три эти части вместе формируют красивую типографику с четкими фокусными точками. Слева — список дат, выделенных полужирным шрифтом. Праздники, напротив, обозначены более легким начертанием.

Особо следует отметить, что надписи “апрель” и “2022” спрятаны под вертикальным штрихом числа. Этот шрифт имеет засечки ( “реснички” на концах штрихов). Я выровняла месяц и год под цифрой в пределах ее нижней засечки. Этим я усиливаю визуальное выравнивание и невидимые вертикальные линии, которые проходят через крайние точки акцентного элемента.

Новые выводы:

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

Переходим к цвету.

5. Цвет

Чтобы подробно обсудить цвет, нужна отдельная статья. Существует множество ресурсов о цвете, доступных как в Интернете, так и в печатном виде. Вот несколько статей Камерона Чепмена, посвященных этой теме:

• "Теория цвета для дизайнеров, часть 1: Значение цвета"
• "Теория цвета для дизайнеров, часть 2: Понимание концепций и цветовой терминологии"
• "Теория цвета для дизайнеров, часть 3: Как создавать собственные цветовые схемы"

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

ФАКТОРЫ, КОТОРЫЕ ВЛИЯЮТ НА ПРИМЕНЕНИЕ ЦВЕТА

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

• Контент
• Аудитория
• Контекст

Аудитория определяет не только то, как написан контент, но и шрифты, размеры, начертания и дизайн в целом. Контекст также сказывается на дизайне: предназначен ли контент для чтения на расстоянии (например, на постере) или нет (на мобильном устройстве или в книге)? Поскольку цвет влияет на то, как мы воспринимаем контент, мы должны быть знакомы с ним. Таким образом, изучение предоставленного клиентами контента помогает нам принимать разумные дизайнерские решения.

Теперь, когда мы обсудили факторы, которые важны для применения цвета, давайте рассмотрим примеры:

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

Перед нами макет с черным фоном. Когда вы прочитаете заголовок, все станет понятно. Это пессимистичный и мрачный текст, поэтому он не пестрит жизнерадостными оттенками. Обратите внимание: колонка текста располагается асимметрично справа, что создает ощущение визуальной нестабильности, усиливая смысл текста.

Ниже представлена поздравительная открытка ко Дню матери. Я создала ее для мамы моей лучшей подруги. Хотя здесь я использую картинку, я делаю это таким образом, чтобы объединить текст вокруг строчной буквы “а”. Это самый большой элемент на странице. Пространство внутри буквы — прекрасное место для размещения какой-нибудь интересной детали: картинки, узора и т.д. Остальные буквы в этом слове прописные, но строчная “а” остается в центре внимания. 

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

Какие выводы мы добавим в наш список:

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

Наша последняя переменная — визуальная пунктуация.

6. Визуальная пунктуация

Мои студенты часто спрашивают: "Что такое визуальная пунктуация?" Мы видим ее постоянно, но не задумываемся об этом. Визуальная пунктуация — это использование линий, форм, символов и других геометрических элементов для усиления иерархии. Помните, цель всегда состоит в том, чтобы сделать иерархию эффективнее и помочь взгляду читателя перемещаться по макету.

Давайте рассмотрим несколько примеров применения визуальной пунктуации в типографике:

Здесь визуальная пунктуация представлена в виде бумажного журавля, который ловко указывает на заголовок. Белый текст повторно встречается в начале инструкции. Такое сходство создает единство, а слово FOLD (“сложите”) возвращает наш взгляд к верхней части лейаута. Обратите внимание, что дизайнер также выделил жирным шрифтом первое слово каждого шага. Мы уже видели такой прием в разделе, посвященном начертанию. Он помогает нам последовательно переходить от одного пункта инструкции к другому и сигнализирует о каждом новом действии без цифр.

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

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

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

Новые выводы:

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

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

Все переменные: примеры

Мы обсудили такие переменные, как близость, начертание, размер, размер + начертание, цвет и визуальная пунктуация. Взгляните на примеры. Какие из них вы сможете найти в каждом случае?

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

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

Когда она предложила мне поработать над ним, мы провели несколько мозговых штурмов. Плакат Watch, Wave, and Wait (“наблюдай, отстранись и жди”) призван помочь детям запомнить, как работать с эмоциями. Я нарушила несколько правил. Все еще используя только 3 размера шрифта, я смогла создать паттерн из повторяющихся слов с обводкой, имитирующий внутренний мыслительный процесс, который затягивает нас, когда мы расстроены: “успокойся, успокойся”,  “считай до 100”, или что-то подобное.

Ваша очередь!

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

• Выбирайте не слишком длинный контент. Например, двухстраничная статья будет слишком длинной. А вот набор инструкций из десяти шагов подойдет лучше. Как и отрывок из эссе.

• Не используйте страницы формата Letter. Выбирайте рабочую область поменьше — лучше всего подойдет формат 8х8 дюймов. Мы делаем это для того, чтобы сосредоточиться на контенте и не чувствовать себя странно, если страница не выглядит "заполненной".

• Всегда делайте наброски. Это лучший способ мыслить нестандартно, вне компьютера. Делайте столько набросков, сколько сможете придумать.

• Для каждой переменной сделайте несколько набросков, например, 4.

• Затем выберите 2 или 3 лучших для каждой переменной и перенесите их в компьютер.

Когда вы будете печатать, а вы всегда должны печатать, чтобы "увидеть", как работают пропорции, используйте метки обрезки, чтобы обрезать страницу.

• Теперь прикрепите их скотчем к стене подальше от вас, но вверх ногами. Это лучший способ оценить пропорции, отступы, иерархию, баланс и так далее.

• После этого отредактируйте их на компьютере, снова распечатайте и приклейте вверх ногами.

• Когда вы убедитесь, что смогли выстроить эффективную типографскую иерархию, сделайте из своих макетов небольшой буклет. Ниже на фото буклет, который моя бывшая студентка Ань Данг сделала для своего проекта "Как сложить журавля". Или вы можете создать виртуальный флипбук, демонстрирующий ваши шедевры!

Не останавливайтесь на достигнутом. Возможно, вы наберетесь опыта и захотите создать плакат или двухстраничный журнальный лейаут? Попробуйте!

Заключение

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

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

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

РЕСУРСЫ ДЛЯ ВДОХНОВЕНИЯ

• I Love Typography
• У меня есть классная доска на Pinterest, где я собираю все, что связано с типографикой
• Typotheque
• Коллекция швейцарских плакатов университета Карнеги-Меллона
• Эксперименты в веб-дизайне, Джен Симмонс
• Сайт, посвященный швейцарской типографике с прекрасными примерами