Типографика — это не только инструмент коммуникации, но и важный элемент композиции. Такое многофункциональное использование шрифта — надежный способ повысить качество ваших работ.
Типографика — инструмент, который всегда под рукой, независимо от того, о каком проекте идет речь — цифровом интерфейсе или печатных носителях. Независимо от того, собираетесь вы использовать изображения или нет. Независимо от того, насколько хорош текст. Независимо от выбранной гарнитуры. Если вы будете думать о шрифте как о структурообразующем инструменте, вы всегда сможете придать глубину своему дизайну.
Это заставит вас выйти за рамки базовых правил верстки и искать новые возможности взаимодействия и сторителлинга при помощи типографики, а также учитывать формальные качества каждого выбранного вами шрифта в поисках связи между его графическим дизайном и сообщением, которое вы хотите усилить.
Я отобрала несколько любимых работ, и объединила их в группы, чтобы мы могли проанализировать приемы и техники, которые позволили дизайнерам не только донести нужное сообщение, но и сделать шрифт центральным элементом композиции. Давайте приступим!
Шрифт задает сетку
Один элемент типографики влияет на все остальные составляющие дизайна.
Начнем с очевидного примера. Плакат Джессики Свендсен «Экспонирование архитектуры: Парадокс?» — один из нескольких захватывающих дух постеров, которые она создала для Йельской школы архитектуры (мы разберем еще один постер чуть позже).
Если абстрагироваться и составить схему этого плаката, можно увидеть, как Свендсен позволяет вертикальным линиям, образующим трехмерный вопросительный знак, задать сетку, по которой выравнивается текст.
Такой подход делает дизайн упорядоченным: вы видите, что грани вопросительного знака находятся на тех же линиях сетки, которые организуют нижнюю часть постера. Подобная структура объединяет две половины дизайна, несмотря на огромную разницу в стиле, перспективе и масштабе.
Модернистские постеры довольно часто содержат «ключевые» графические элементы или типографику, а также выровненный по сетке шрифт над или под ними. Однако мы редко можем встретить настолько продуманные целостные примеры.
Взаимодействие между трехмерной графикой и плоским шрифтом внизу добавляет в дизайн ощущение движения, пространство и масштаб, которых не хватало бы, если бы акцентный элемент также был плоским.
Уроки, которые мы можем извлечь
Один объект может стать точкой опоры для структуры вашего дизайна.
В вашем дизайне может быть всего одна точка фокуса. Определите ее, а затем подумайте, как шрифт и второстепенные элементы могут быть связаны с этим фокусным элементом.
Важно не только то, какой шрифт вы выбрали, но и то, как вы его презентуете.
Шрифт не обязательно должен существовать только на одной плоскости или иметь однородную текстуру. Попытайтесь разнообразить вашу типографику и не забывайте устанавливать связи между различными стилями, которые вы используете.
Эрик Ху мастерски комбинирует шрифты, и в его композициях зачастую больше порядка, чем может показаться на первый взгляд. На этом плакате мы видим два шрифта — тонкий, вытянутый, курсивный Glossy Display и неуклюжий гротеск (обратите внимание, насколько цифры короче букв), который набран таким образом, чтобы преувеличить его неуклюжесть.
Здесь Ху использует курсив, чтобы выстроить структуру и соединить два стиля текста. Сверху межстрочное расстояние курсива соответствует высоте гротеска, а снизу — цифры размещены в нем таким образом, чтобы «обхватить» нижний выносной элемент буквы “g” в слове “Virginia”.
Схематичное изображение шрифтов позволяет увидеть «скелет» композиции. Точки курсивных букв “i” представляют собой идеальные круги. Они кажутся слишком механическими и точными на контрасте с «текучестью» самого шрифта. Поскольку эти точки располагаются практически на высоте прописных букв, создается впечатление, что они никак не связаны со строчными символами.
Такое решение сбивает зрителя с толку — к какому шрифту относятся точки? — они одновременно являются элементами букв и объединяют композицию в единое целое. Кроме того, это хитроумный способ добавить геометрию в строго шрифтовой дизайн (наряду с «+» и «/»). Это ценное напоминание о том, что шрифты содержат большое количество символов, которые могут служить чисто графическим целям.
Вы можете построить свою работу аналогичным образом: сначала сфокусироваться на тексте, набранном одним шрифтом, а затем наслаивать на него другой шрифт, постепенно усложняя композицию. Ху мог выбрать более хаотичное решение и сделать акцент на взаимодействии и контрасте шрифтов, но вместо этого он решил использовать как позитивное, так и негативное пространство, созданное курсивом, чтобы придать дизайну завершенный вид.
Результат — более четкое разграничение переднего плана и фона и аккуратный дизайн, в котором все же присутствуют «ошибки» и некая беспорядочность, благодаря чему он не кажется слишком формальным или изысканным. Это отличный пример «создания и разрушения сетки». Области, где шрифты сталкиваются и накладываются друг на друга, выглядят более эффектно на контрасте со сдержанной типографикой вокруг них.
Уроки, которые мы можем извлечь
Экспериментируйте с каскадной типографикой.
Этот постер — пример того, как можно выстроить композицию без «главного», акцентного элемента. Иногда достаточно просто грамотно разместить первую фразу, настроить межстрочное расстояние и цвет, и, отталкиваясь от этого, принимать дальнейшие решения, которые в итоге сформируют конечный дизайн.
Комбинируйте шрифты разными способами, чтобы объединить их в один дизайн.
То, как Ху заставляет гротеск и курсив взаимодействовать при помощи точек букв “i”, действительно впечатляет. Это хорошее напоминание о том, что многие шрифты содержат мелкие детали, которые при правильном применении могут объединять их в одну композицию.
Больше — не всегда лучше
Типографика может задавать сетку и структуру даже в дизайне, где присутствуют два шрифта одинаковой иерархической важности. Не думайте, что для этого обязательно требуются крупные декоративные буквы.
Свендсен выбрала Maelstrom — брусковый шрифт с обратным контрастом — в качестве основы, однако она не просто разместила его на плакате, а немного изменила форму букв.
Эти еле заметные корректировки позволили уточнить сетку как для декоративного шрифта, так и для остальных текстовых элементов, расположенных по краям постера. Прежде чем перейти к тонкостям, давайте обсудим еще более фундаментальное решение — выравнивание текста по правому краю.
Если взять Maelstrom и расположить буквы так же, как на плакате, но с выравниванием по левому краю (крайняя картинка слева внизу), композиция будет выглядеть не слишком гармонично. Такой подход создает большое количество замкнутых областей, например, слева от буквы А и под косым штрихом буквы Y.
Выравнивание по правому краю позволяет сформировать гораздо более интересные отступы. Такие же соображения, видимо, побудили автора отодвинуть последние две строки текста от правого края — только в этом случае получится аккуратный переход от буквы L к A.
Свендсен позволяет форме букв определять композицию по краям постера. Фраза “2014 FALL” заполняет негативное пространство под косым штрихом Y, а A «запечатывает» нижний край левой половины композиции. Кружок с Y внутри, втиснутый в букву H, грамотно разбавляет замкнутое пространство между ее штрихами.
Красный — это шрифт без изменений, синий — версия Свендсен, а на третьем постере вы можете увидеть наложение цветов со всеми совпадениями и расхождениями.
Ножка буквы R была немного сдвинута влево, чтобы сделать компактнее самую широкую пару символов, и привести ее в соответствие с CH, создав прочную основу для сетки. Внешние края засечек чуть-чуть подкорректированы — это позволило связать строки между собой. Свендсен удалила или переместила некоторые декоративные элементы шрифта, чтобы увеличить количество негативного пространства и сделать дизайн более воздушным.
Отступы базового шрифта, который «стекает» по полям, в некоторых случаях определяются акцентным шрифтом, например, в правом верхнем углу, где подзаголовок LECTURES (лекции) выровнен по нижней границе засечки буквы A (что еще более заметно на схематичном изображении выше).
Это действительно удачное решение, потому что подзаголовок задает контекст — он обозначает первую половину запланированных мероприятий (второй подзаголовок EXHIBITIONS выровнен по верхней границе засечки буквы L). Выступающая засечка буквы А, направляет наш взгляд к подзаголовку и не дает ему затеряться.
Уроки, которые мы можем извлечь
Выбрать правильный шрифт недостаточно.
Чтобы Maelstrom блистательно сыграл свою роль в этой композиции, потребовалось приложить дополнительные усилия. Работа с типографикой подразумевает близкое знакомство с различными шрифтами и бесконечные эксперименты с ними. Я называю этот процесс «лепка» / «скульптурирование». Любой шрифт, даже самый идеальный, — лишь отправная точка. И его оптимизация зависит только от вас.
Используйте акцентный шрифт в качестве «скелета» дизайна.
Если вы решили использовать в дизайне крупный акцентный шрифт, позвольте его форме определять композицию. Проанализируйте, какие направляющие он задает, и попробуйте работать в рамках этих творческих ограничений.
Шрифт как образ
Типографика как воплощение объекта или концепции.
Типографика может служить метафорическим целям и визуально представлять текст таким образом, который выходит за рамки стандартной композиции страницы. В этой рекламе, разработанной Дональдом Эгенштайнером, слово “TONNAGE” (груз) обыграно таким образом, будто оно имеет реальный вес. Шрифты практически подчиняются законам физики, что усиливает идею. Очевидно, но эффективно.
Еще одна работа Свендсен! Перед нами иллюстрация к рецензии на книгу «21 урок для 21 века». Типографика вызывает непреодолимое головокружение, мы будто смотрим наверх из какого-то колодца.
Это интересное решение для шрифтовой иллюстрации, ведь такое расположение слов позволяет донести их важность и придает им более внушительное, физическое присутствие, которое дезориентирует и надлежащим образом отражает серьезность темы.
В обложке для “Marken, Zeichen, Signete” мы видим прогрессивное масштабирование. Эта техника создает скорее эффект взгляда «внутрь», чем «вверх», и предполагает многократное повторение одного и того же слова с каждой стороны. Повторение может быть эффективным решением, но оно не позволяет использовать фразы и слова разной длины, как в предыдущем примере.
Уроки, которые мы можем извлечь
Используйте приемы, которые совместимы с имеющимся у вас контентом.
Легко потеряться и запутаться в бесчисленных техниках работы со шрифтами. Но самые удачные решения — это те, в основе которых лежат простые концепции, а большая часть времени и усилий уходит на последующую доработку деталей.
Лу Дорфсман был настоящим мастером типографики — он умело использовал ее в качестве «скелета», вокруг которого формируется дизайн. Растущие “ha” символизируют рейтинг трех основных телерадиосетей, усиливая и без того дерзкий текст. Они читаются как смех («ха-ха-ха») и CBS «смеется» последней. Гениально! Хотя эту идею можно было передать при помощи простых графиков, типографика здесь значительно усиливает сообщение.
Благодаря массивным вертикальным штрихам и тончайшим засечкам шрифт считывается как столбчатая диаграмма, но при этом он остается игривым и выразительным, что соответствует теме. Тонкие засечки также позволяют Дорфсману выровнять графики под каждым “ha” по основным штрихам, что придает им дополнительный визуальный вес, которого в противном случае не хватило бы, и делает композицию более органичной.
Обратите внимание, как размер и расположение текстовых элементов в правой колонке, подчеркивают массивность последнего “ha” — эти буквы кажутся сверхъестественно большими по сравнению с остальными. Нет никаких сомнений в том, кто герой этой истории.
Уроки, которые мы можем извлечь
Отдельные детали шрифта могут выступать в качестве основы композиции.
Не забывайте о том, какой силой обладают линии и блоки, из которых состоят буквы. Этот рекламный постер был бы столь же эффективным, даже если бы дизайнер ограничился только типографикой и отказался от графических элементов. Каждая деталь поддерживает основную концепцию.
Важно правильно выбрать шрифт.
Этот дизайн был бы гораздо менее успешным, если бы Дорфсман выбрал шрифт в другом стиле. Иногда вы можете спокойно позволить шрифту диктовать вам правила игры, а в других случаях — нужно сначала определить концепцию, а уже затем выбирать шрифт, чтобы он вписывался в структуру, которую вы определили.
Шрифт может не только служить графическим целям, но и доносить сообщение.
Типографика несет в себе столько смысла — как сам текст, так и его форма. Всякий раз, когда вы хотите выразить ту или иную мысль при помощи геометрии или изображений, попробуйте заменить этот элемент шрифтом и посмотрите, не произойдет ли та самая магия.
Этот постер, созданный Ноа Бейкером для Medium в 2018 году, полон сюрпризов. Оформление строк имитирует старый календарь: ощущение «месяц за месяцем» усиливается благодаря тому, что их названия располагаются друг под другом, а сообщение о 15-процентном росте — центральная идея плаката — является «позвоночником», из которого вырастает остальной дизайн. Отдельные элементы постера эстетичны сами по себе. Сообщение передано четко и отлично считывается на расстоянии.
Уроки, которые мы можем извлечь
Простые идеи могут быть чрезвычайно эффективными.
Этот постер — отличный пример того, что концепция и сам дизайн не должны быть слишком сложными. Не обязательно создавать что-то «уникальное» или «заумное», чтобы впечатлить зрителя — испытание временем чаще всего проходит тот дизайн, который полностью сфокусирован на основной идее.
Ван Чжи-Хонг — один из самых выдающихся дизайнеров шрифтовых обложек. Выше вы можете видеть пример блестящего использования геометрии шрифта Futura для создания паттерна из букв “С”, который символизирует толпу (the crowd). Каждая буква “С” как бы охватывает следующую, и хотя дизайн упорядочен, он все же вызывает клаустрофобию и создает ощущение переполненного пространства.
Уроки, которые мы можем извлечь
Геометрические шрифты — мощный инструмент.
Такие геометрические шрифты, как Futura могут стать эффектной заменой кругов, треугольников и других базовых форм. Они, как правило, максимально графичны и способны сделать простые слова и буквы более выразительными.
Используйте упорядоченные шрифты для выражения беспорядочных идей.
Сочетание загруженной композиции и нестандартных шрифтов может отвлечь зрителей от концепции, которую вы пытаетесь передать. Позвольте простым, «прямолинейным» шрифтам привнести некоторую ясность в насыщенный дизайн.
Усиление изображений
Шрифт может усилить воздействие изображений.
Шрифт не является центральным элементом этого дизайна — он лишь помогает сделать изображения еще более динамичными.
В первом случае сдвинутая влево буква C и логотип Nike, расположенный рядом, перекликаются с отведенной назад рукой на фотографии ниже. Изображение обрезано таким образом, чтобы зрители поняли, что правая нога бегуна поднята и выставлена вперед, а левая вытянута назад, и цифры 8 85 под ним служат абстрактным представлением его позы.
Во втором случае центрированный шрифт и цифры «885», размещенные на отдельной строке, повторяют композицию фотографии. Растянутое по горизонтали слово “New York” напоминает дорогу, а овальные значки снизу — ноги.
Уроки, которые мы можем извлечь
Каждый символ может нести в себе какой-то смысл.
Этот дизайн — отличный пример того, как можно произвести сильное впечатление при помощи всего нескольких шрифтовых элементов. Когда таких элементов мало, каждый из них должен иметь больший вес. В этом случае лучший дизайн — тот, который выжимает из каждого элемента максимальную концептуальную и композиционную ценность.
Используйте типографику, чтобы усилить фотографии.
Не разделяйте типографику и изображения. Ищите точки пересечения разных визуальных языков. Вы можете наложить текст и изображение друг на друга или обрезать изображение таким образом, чтобы объединить различные типы компонентов.
Дизайнеры журнала Pin-Up выбирают простые шрифты и предпочитает добиваться драматичного эффекта за счет художественных способов набора текста. Фрагменты статей зачастую напоминают детали фотографий, например, более светлый, разреженный квадрат текста в первом примере имитирует светло-серый квадрат ткани на скамейке с фотографии рядом.
Аналогично, колонки шрифта в примере справа являются очевидной отсылкой к высоким тонким колоннам с фотографии над ними (в нижнем левом углу также можно найти дерзкую отсылку к шляпе с фото напротив).
Уроки, которые мы можем извлечь
Помните о возможностях наборного текста.
Хотя многие примеры в этой статье опираются на масштаб как на один из параметров, придающих шрифту нужный эффект, важно помнить, что длинные тексты, набранные шрифтом маленького размера, обладают огромным потенциалом для усиления сторителлинга. Основной текст не обязательно должен быть скучным, и вам не нужно жертвовать разборчивостью, чтобы сделать его интересным.
Вам не всегда нужны акцентные шрифты, чтобы создать интересную типографику.
Все тексты в журнале Pin-Up набраны шрифтом Arial. Подобные ограничения заставляют дизайнеров добиваться драматизма и оригинальности другими композиционными способами. Попробуйте на какое-то время ограничиться «скучными», строгими шрифтами, чтобы понять, не используете ли вы эксцентричные шрифты в качестве костыля, компенсирующего недостаток креативности в других аспектах верстки.
Крупный шрифт не всегда является структурным
Крупный шрифт может быть ленивым.
Напоследок я хочу показать вам несколько неудачных примеров. Хотя крупный акцентный шрифт может оказывать на зрителей сильное воздействие, его возможности существенно ограничены, если дизайну не хватает концепции (как в примерах выше).
В слабых проектах второстепенные шрифты никак не связаны с акцентным, а стилизация и композиция не усиливают сообщение. В социальных сетях полно таких «обманок» — работ, которые создаются для тренировки и просто имитируют популярные стили, без какого-либо глубинного смысла.
В этом дизайне наш старый знакомый Maelstrom и контурный сжатый гротеск просто заполняют композицию, но ни один из элементов не взаимодействует с остальными каким-либо интересным образом. Мы способны на большее! Вы можете создавать проходные дизайны, наполняя композиции интересными шрифтовыми парами и изображениями, но вы не перейдете на следующий уровень, пока не начнете использовать каждую деталь вашей типографики на максимум.
Заключение
В том, чтобы начинать любой проект с обязательства использовать только шрифт и слова для эффективной коммуникации, есть что-то освобождающее. Я надеюсь, что эта статья поможет вам лучше понять, какими идеями руководствуются опытные мастера типографики, а также даст вам целый набор новых инструментов для дальнейшей работы.
Работа со шрифтом приносит гораздо больше удовольствия, когда вы меньше беспокоитесь о правилах и постоянно пытаетесь установить новые связи при помощи слов. Рассматривайте каждый абзац, строчку и букву как возможность сделать вашу работу лучше, и ваш дизайн никого не оставит равнодушным!
