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

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

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

Джессика Свендсен, плакат «Выставление архитектуры: парадокс»

Тип Информационная Сетка

Использование одного типографского элемента для влияния на другие элементы дизайна

Давайте начнем с отличного, очевидного примера. Плакат Джессики Свендсен "Экспонат архитектуры: парадокс?" это один из нескольких захватывающих дух постеров, которые она создала для серии для архитектурной программы Йельского университета (сейчас мы поговорим о другом из этих постеров).

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

Если мы абстрагируем и изобразим этот дизайн, мы увидим, как Свендсен позволяет вертикальным линиям, созданным из 3D-экструзии типа отображения, установить сетку, по которой выравнивается дополнительный текст. Такой подход создает ощущение порядка даже внутри широких линий вопросительного знака - вы можете видеть, что сам вопросительный знак поражает многие из тех же линий сетки, которые организуют нижнюю часть. Эта структура объединяет две половины дизайна, несмотря на огромную разницу в стиле, перспективе и масштабе. Этот модернистский стиль плаката довольно часто содержит графические элементы или типографику «герой» сверху или снизу, но я не видел много примеров, которые бы связывали первичные и вторичные элементы в той степени, в которой Свендсен делает это произведение.

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

Уроки, чтобы запомнить

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

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

Эрик Ху, GIWYFI постер.

Эрик Ху мастерски сочетает шрифты, и в его композициях часто больше порядка, чем может показаться на первый взгляд. На этом плакате представлены два шрифта - тонкая, выделенная курсивом глянцевая индикация и неуклюжий гротеск (обратите внимание, насколько короткие цифры сравниваются с буквенными формами), которые набраны таким образом, чтобы преувеличивать его неловкость. Есть несколько способов, которыми Ху использует курсив здесь, чтобы установить структуру и соединить два стиля текста. Начиная с верхней половины дизайна, мы видим, что позаботились о том, чтобы привести курсив к полной высоте гротеска, а в нижней половине цифры расположены в пространстве, которое создается рядом с нисходящим « г »в« Вирджиния ».

Абстрагирование плаката в линию и плоскость делает структуру более четкой.

Абстрагирование типа может помочь нам увидеть основной скелет композиции. Точки, выделенные курсивом, идеально круглые и кажутся чрезмерно механическими и точными по сравнению с ликвидностью остальных букв. Поскольку они подпрыгивают до линии кепки, они чувствуют себя почти полностью отделенными от миниатюрных строчных букв, затонувших внизу. Они смущают взгляд - к какому шрифту они относятся? - и соединить два слоя, выступая в качестве буквенных элементов и точек в пространстве, чтобы объединить композицию. Это также нахальный способ ввести геометрию в строго типографский дизайн, наряду с «+» и квадратным двоеточием. Это ценное напоминание о том, что гарнитуры содержат большое количество символов, которые могут служить чисто графическим целям.

Работая таким образом, вы можете сосредоточиться на одной группе текста, чтобы начать свой дизайн, а затем пытаться играть против нее, когда вы создаете слои сложности. Поскольку у Ху уже есть одноцветный текст, перекрывающийся в этом дизайне, он очень легко мог бы выбрать более хаотический подход и принять это взаимодействие и напряженность, но вместо этого он решил использовать как положительные, так и отрицательные пространства, созданные курсивом, для завершить дизайн. Результат создает более четкие отношения на переднем плане / фоне между двумя гарнитурами и чувствует себя отполированным, сохраняя при этом «ошибки» и беспорядок, которые не позволяют ему чувствовать себя слишком формальным или ценным. Это отличный пример «Создания и разрушения сетки». Области, где столкновения типов и перекрытия, более эффективны из-за сдержанности, показанной в других областях плаката.

Уроки, чтобы запомнить

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

Ищите способы смешать типографские элементы, чтобы объединить разные шрифты в одном дизайне
То, как Ху использует точки в «Глянцевом курсиве» для взаимодействия с гротеском, действительно замечательно, и это хорошее напоминание о том, что многие гарнитуры разнородных стилей имеют небольшие детали, которые смешиваются из одной гарнитуры в другую. Вспомните, какое мощное устройство может быть при смешивании гарнитур.

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

Еще один плакат для Йельской архитектуры от Джессики Свендсен.

Ни один дизайнер, практикующий сегодня, не использует текст для составления текста чаще и с большим умением, чем Джессика Свендсен. Если вы прочитаете журнал Font Review Journal, вы поймете, что я уже много написал об этом примере, который является одним из моих любимых образцов типографского дизайна. Свендсен использует Maelstrom - обратный контраст с засечками - в качестве основы дизайна, но она не согласилась с тем, что шрифт дал ей из коробки.

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

Игра с выравниванием Maelstrom открывает возможности для формирования полей в интересные формы и обеспечивает размещение более мелких типографских элементов.

Свендсен позволяет формированию типа дисплея направлять композицию по краям. «2014 FALL» заполняет отрицательное пространство под растопыренными ветвями Y, а A используется для герметизации нижнего края левой половины композиции. Круглый значок Y спрятан в H и предотвращает еще один случай попадания в ловушку пространство.

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

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

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

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

Разрывы строк в третичном типе, которые капают вдоль полей, иногда сообщаются типом отображения, особенно в верхнем правом углу, где подзаголовок LECTURES отклоняется от засечек на A (это более заметно на абстрактной диаграмме). Это особенно удачное решение, потому что этот подзаголовок важен для установки контекста для плаката - он вводит половину планирования для серии. То, как засечка А соприкасается, ведет вас к подзаголовку и предотвращает его потерю при стирке.

Уроки, чтобы запомнить

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

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

Тип как представление

Тип рендеринга как проявление объекта или идеала

Дизайн Дональда Эгенштейнера

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

Иллюстрация к обзору книги New York Times Джессики Свендсен

Больше работы Свендсена! Эта иллюстрация является идеей для обзора 21 Урока для 21-го века. Она использует этот тип для создания подавляющего ощущения головокружения, как будто вы смотрите изнутри монолита (спасибо за то, что это 21-е слово было введено в четырехсторонний дизайн, Свендсен). Это интересная задача для иллюстрации типа - из сотен способов, которыми вы могли бы установить этот набор слов, как вы могли бы сделать это так, чтобы передать их важность? Мне нравится, что в этом выпуске такие проблемы рассматриваются как таковые. Ее выбор искажать тип вместо других техник, таких как стек и масштабирование, дает типу более внушительное физическое присутствие, которое дезориентирует и соответственно представляет серьезность предмета.

«Бренды, характер, печатка», разработанный Хансом-Юргеном Кеблером, 1970.

Эта обложка для Marken, Zeichen, Signete использует прогрессивное масштабирование, а не перекос. Этот метод создает скорее эффект «внутрь», чем «вверх», и чаще всего он выполняется путем масштабирования и повторения одного и того же слова на каждой стороне. Повторение может быть мощным, но оно не учитывает различные фразы и длины, которые необходимы для пьесы «21 урок».

Уроки, чтобы запомнить

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

Одна из знаковых объявлений Лу Дорфсмана для CBS.

Лу Дорфсман был мастером использования типографики в качестве каркаса, вокруг которого можно создать дизайн, и один из моих любимых примеров - это реклама. Эскалации «ха» представляют долю комедийных рейтингов между тремя основными сетями, и Лу решает заглянуть в них вместе с презентацией в дополнение к дикой копии. Тот факт, что это звучит как смех («ха-ха-ха») и что CBS имеет последний смех, является чистым блеском. Хотя эту идею можно было передать с помощью простых диаграмм - Дорфсман создал аналогичную рекламу, комбинирующую изображения и диаграммы для других предметов, - типографика значительно усиливает эту идею.

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

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

Я также хочу указать, как все, что происходит с размерами и позиционированием текстовых элементов под правым столбцом, подчеркивает, насколько массивным является последнее «ха». Даже если бы вы взяли все из дизайна, кроме типа, «ха» в CBS чувствовалось бы сверхъестественно большим по сравнению с другими. Нет сомнений в том, кто герой этой истории.

Уроки, чтобы запомнить

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

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

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

Постер от Ноа Бейкера

У этого плаката, созданного Ноем Бейкером для целей Medium на третий квартал 2018 года, есть несколько концептуальных и структурных сюрпризов: представление каждой строки имитирует календарь старой школы, оно усиливает цель «месяц за месяцем», буквально устанавливая месяцы друг на друга, и сообщение 15% роста - точка плаката - это позвоночник, из которого прорастает дизайн. Отдельные элементы плаката красивы сами по себе, смысл дизайна явно передан, и он читается на расстоянии. Но сила связывания сообщения с простой концепцией посредством композиции и типографики - это то, что делает его особым достижением дизайна.

Уроки, чтобы запомнить

Простые идеи могут иметь огромное влияние
Этот плакат - отличный пример того, как не продумывать концепцию или исполнение дизайна. Что-то не обязательно должно быть «уникальным» или сложным, чтобы удивлять вас - проекты, которые выдерживают испытание временем, являются теми, которые полностью привержены своей основной идее.

Обложка Ван Чжи Хуна для «Толпы»

Ван Чжи-Хон является одним из самых опытных дизайнеров, практикующих в любой точке мира, и его дизайны обложек книг часто сочиняются с использованием только типографики. Этот пример блестяще использует геометрию Futura для создания повторяющегося узора C, представляющего титульную толпу. Кажется, что каждая буква «C» включает следующую, и хотя дизайн является упорядоченным, он по-прежнему вызывает клаустрофобию многолюдного пространства.

Уроки, чтобы запомнить

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

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

Усиливающие образы

Тип может расширить влияние изображений в дизайне

Концепция надписи для Nike от бюро Borsche

Тип не является фокусом этого дизайна Nike, но он используется здесь, чтобы усилить движение фотографии. Слева, нажатие буквы «С» влево и размещение логотипа «Nike» напоминает о том, как рука фигуры отталкивается назад, когда он бежит на фото ниже. Изображение обрезано, чтобы обнажить ровно столько ног бегуна, чтобы вы знали, что его правая нога поднята вперед и вперед, а левая вытянута сзади, а расщепление 8 85 снизу служит абстрактным представлением его позы.

Справа центрированный набор текста и размещение «885» на отдельной линии над «Нью-Йорком» имитирует композицию фотографии. Расширенный «Нью-Йорк» напоминает отрезок дороги, а овальные круглые значки, которые закрепляют дизайн, могут читаться как ноги.

Уроки, чтобы запомнить

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

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

Оба этих разворота из Pin-Up используют сетки и вставные абзацы, чтобы имитировать детали фотографий в развороте. Распространяется любезно Vice.com

Журнал Pin-Up Magazine сохраняет свой выбор шрифта простым и выбирает вместо этого, чтобы получить типографскую драму из живописных способов, которыми он установлен массово. Статьи часто творчески напоминают детали из фотографии в журнале, такие как светлый квадрат текста в левом примере выше, который имитирует светло-серый квадрат ткани на скамейке середины века на фотографии, противоположной развороту. Аналогично, столбчатый тип без полей в примере справа является очевидной ссылкой на высокие, тонкие столбцы на фотографии, которую он поддерживает (также есть дерзкая ссылка на шляпу на противоположном развороте в заголовке, установленном в нижней части). левый угол).

Уроки, чтобы запомнить

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

Вам не нужны «ударные» шрифты, чтобы сделать интересный типографский выбор
Журнал Pin-Up создан полностью на Arial, и это интересное ограничение, которое заставляет дизайнеров создавать драму и интерес другими композиционными способами. Попробуйте на некоторое время ограничиться более жесткими шрифтами и посмотрите, не использовали ли вы эксцентричный дизайн в качестве опоры, компенсируя недостаток творчества в других аспектах набора текста.

Примеры через https://www.instagram.com/posterkraft/

Большой тип не означает структурный тип

Большой тип может быть ленивым

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

Через klim.co.nz. Дизайн Attico 36

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

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

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