Вдохновляющие дизайнерские решения с Максом Хубером: превращение обыденных предметов в захватывающую визуальную коммуникацию

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

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

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

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

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

— Джованни Пинтори

Даже уважаемые и известные дизайнеры работали над обыденными предметами и создавали культовые работы. После переезда из Швейцарии в США Эрик Ницше работал в таких журналах, как Harper's Bazaar, Life и Vanity Fair. Но наиболее известной стала его работа для General Dynamics. За пять лет работы арт-директором в аэрокосмической и оборонной компании Ницше разработал систему информационного дизайна, результатом которой стали годовые отчеты, плакаты, технические данные и Dynamic America, 420-страничная книга, посвященная истории компании.

Итальянский дизайнер Джованни Пинтори проработал в компании Olivetti, производящей бизнес-товары, 31 год, где простой стиль и геометрические формы, которые он применил к рекламе, календарям и плакатам, превратились в дизайнерский словарь компании.

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

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

Вдохновленный Максом Хубером

Хотя Макс Хубер был менее известен, чем многие его современники, он был одним из самых выдающихся дизайнеров Швейцарии. Хубер родился в Бааре в 1919 году и жил между Швейцарией и Италией до конца Второй мировой войны.

В начале своей карьеры в Милане Хубер работал в студии Антонио Боггери, где на него повлияли смешанные медиа, включая иллюстрацию, фотографию и типографику. С 1950 по 1954 год Хубер работал в элитной итальянской сети универмагов La Rinascente и в 1954 году получил первую из ее наград «Золотой компас» (Compasso d'Oro).

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

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

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

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

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

С 1960-х годов до своей смерти в 1992 году Хубер работал над множеством заказов, включая редизайн бренда и дизайн обоев в стиле джаза с изображением Луи Армстронга, который он назвал «Ритм». Его клиент, Оскар Браендли, поручил Хуберу разработать дизайн выставок.

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

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

Хотя его фирменный стиль развивался на протяжении всей его жизни, стремление Хубера к экспериментам осталось. Даже он включил отдельные элементы своего стиля — смелые цветовые блоки, знаковые формы, фотографические манипуляции и сильную типографику — на протяжении всей своей жизни Хубер создал удивительно разнообразное портфолио работ. В более позднем возрасте Хубер преподавал графический дизайн в южном швейцарском городе Лугано, где по совпадению я остаюсь, когда работаю в Швейцарии. Он умер в Мендризио, где находится мой швейцарский офис, в 1992 году, а в соседнем Кьяссо есть музей, посвященный его работам.

О Максе Хубере была только одна книга, и вы должны найти для нее место на книжной полке или на журнальном столике. «Макс Хубер» (2006) Станислава фон Мооса, Мары Кампаны и Джампьеро Босони. Это подробный каталог работ на протяжении всей его карьеры, написанный людьми, лично знавшими Макса Хубера.

Определение шрифтов старого (гуманистического) стиля

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

Но когда методы штамповки стали — металлические блоки, использовавшиеся для набора текста до девятнадцатого века — стали более точными, шрифты стали более совершенными.

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

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

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

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

Баскервиль был спроектирован в 1750-х годах Джоном Баскервилем. Его шрифты остались популярными, и существует множество современных интерпретаций. Шрифты в стиле Garamond по-прежнему популярны в полиграфическом дизайне, а Monotype Garamond поставляется в комплекте с несколькими продуктами Microsoft.

Тип старого стиля

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

 <header>…</header> <div>…</div> <p>…</p> <footer> <svg>…</svg> </footer>

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

 body { background-color: #6e2838; font-family: "old-style"; color: #f7eed7; }

Заголовок Trabant доминирует в моем дизайне даже на самых маленьких экранах. Этот заголовок смешивает два изображения. Первый — это масштабируемый логотип SVG Trabant. Чтобы скрыть это презентационное изображение от вспомогательных технологий, я добавляю роль ARIA и устанавливаю для ее скрытого атрибута значение true. Затем я добавляю другую роль ARIA img ко второму изображению, изображению того, что было названо «худшей машиной из когда-либо созданных»:

 <header> <img src="header.svg" alt="" role="presentation" aria-hidden="true"> <img src="header.png" alt="Trabant" role="img"> </header>

Мне нужно, чтобы большой логотип Trabant оставался идеально круглым независимо от ширины его родительского элемента. Соотношение сторон — это соотношение между шириной элемента (x) и высотой (y). Соотношение 1:1 для квадратов, 1,618:1 — золотое сечение и 16:9 для широкоэкранных носителей.

Популярный метод поддержания внутреннего соотношения был разработан в 2009 году Тьерри Кобленцем и использует padding-top, применяемый к элементу или псевдоэлементу внутри него. Различные проценты заполнения создают разные соотношения:

 1:1 100% 4:3 75% 16:9 56.25%

Этот логотип круглый, поэтому поле, которое он занимает, всегда должно оставаться квадратным. Я добавляю псевдоэлемент :before и устанавливаю его верхний отступ на 100%:

 header:before { content: ""; display: block; padding-top: 100%; }

Теперь у меня есть три элемента внутри моего заголовка. Поместив псевдоэлемент и мои изображения в одну и ту же область сетки, CSS Grid упрощает их объединение:

 header { display: grid; } header:before, header img { grid-column: 1; grid-row: 1; }

Чтобы центрировать эти изображения по горизонтали и вертикали — независимо от того, насколько широкими или высокими они могут стать — я выравниваю и выравниваю их по центру:

 header { align-items: center; justify-content: center; }

Наконец, чтобы смешать фотографию моего Trabant и его SVG-логотип вместе, я добавляю режим mix-blend-mode со значением overlay:

 header img:last-of-type { mix-blend-mode: overlay; }

Мой раздел баннеров содержит большой двухцветный заголовок, за которым следуют три коротких абзаца:

 <div> <h1>Sparkplug <span>with a roof</span></h1> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div>

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

 h1 { font-size: 4.875rem; line-height: 1.1; text-align: right; } h1 span { color: #f85981; }

Чтобы не выделять второй абзац баннера, я использую селектор псевдокласса :nth-of-type и уменьшаю его размер:

 #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

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

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; padding: 4rem; } }

Заголовок и баннер занимают всю ширину моего макета. Я помещаю баннер в первую строку, хотя в моем HTML он занимает второе место:

 header, #banner { grid-column: 1 / -1; } header { grid-row: 2 / 4; } #banner { grid-row: 1; }

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

 h1 { font-size: 8rem; line-height: 1.1; text-align: center; } #banner p { font-size: 2.027rem; } #banner p:nth-of-type(2) { font-size: 1.266rem; }

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

 @media (min-width: 82em) { body { grid-template-columns: repeat(6, 1fr); grid-column-gap: 2vw; grid-row-gap: 2vh; } }

Заголовок охватывает первые три столбца и все три строки в моем макете:

 header { grid-column: 1 / 4; grid-row: 1 / 4; }

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

 #banner { display: contents; }

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

 #banner h1 { grid-column: 4 / -1; grid-row: 1; font-size: 6.5rem; } #banner div { grid-column: 5 / -1; grid-row: 2; } body > p { grid-column: 5 / -1; grid-row: 3; }

Наконец, я помещаю нижний колонтитул рядом с текущим текстом, что добавляет асимметричности дизайну в старом стиле:

 footer { grid-column: 4; grid-row: 3; }

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

Переходные шрифты

В 17 веке Эпоха Просвещения была интеллектуальным движением, отвергавшим традиционное искусство, литературу и философию. В 1692 году Людовик XIV заказал новый шрифт, основанный на научных принципах, а не на каллиграфии. Результатом стал Romain du Roi, шрифт с буквами, основанный на сетке из 2304 квадратов.

Romain du Roi был более точным в своем дизайне, чем большинство предыдущих шрифтов, и отличался более резким контрастом между толстыми и тонкими штрихами. Это повлияло на ныне известных дизайнеров шрифтов Джона Баскервилля, Джамбаттиста Бодони и Уильяма Каслона. Их работа удалила все следы гуманистической каллиграфии, чтобы создать переходные (неоклассические) шрифты, в которых использовались преимущества новых чернил и бумаги лучшего качества.

В переходных шрифтах строчные буквы имеют вертикальное или почти вертикальное ударение. Заглавные засечки восходящих букв, включая «b», «d», «h» и «l», обычно более горизонтальны. Концы многих штрихов отмечены шариковыми наконечниками вместо угловых, тупых или засечек.

Популярны современные переходные шрифты, в том числе Cambria, разработанная Джелле Босма в 2004 году для коллекции шрифтов Microsoft ClearType. Cambria была выпущена вместе с Windows Vista. Джорджия была разработана Мэтью Картером в 1993 году. Миссис Ивз, разработанная Зузаной Личо в 1996 году, представляет собой вариант Баскервиля и была названа в честь Сары Ивз, жены Джона Баскервиля.

Определение современных шрифтов

В то время как шрифты Old Style и Transitional усиливали контраст между толстыми и тонкими штрихами, шрифты Modern довели эту характеристику до крайности. Термин «модерн» может ввести в заблуждение, поскольку первый шрифт в этом стиле был разработан в 1784 году Фирмином Дидо. Дидо был сыном Франсуа-Амбруаза, в честь которого названы несколько шрифтов, в том числе Амбруаз и, конечно же, Дидо.

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

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

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

Современные шрифты

Мне нужно всего три конструктивных элемента, чтобы реализовать мой следующий дизайн, вдохновленный Хубером; заголовок, который содержит два логотипа Trabant, раздел баннера и мой основной контент:

 <header> <div><svg>…</svg></div> <div><svgv…</svg></div> </header> <div class="banner">…</div> <main> <ul>…</ul> <p>…</p> </main>

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

 body { background-color: #34020B; background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 21%, #34020B 99%); font-family: "modern"; color: #fff; }

Я располагаю план Trabant на полпути по горизонтали, в то время как градиент повторяется на моей странице:

 body { background-position: 50vw 2rem, 0 0; background-repeat: no-repeat, repeat-x; }

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

 <div> <h1>The worst <span> car ever made</span></h1> <div> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div> </div>

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

 #banner h1 { max-width: 50vw; }

Затем я добавляю цвет к элементу span и изменяю размер шрифта баннера, увеличивая размер заголовка и уменьшая его интерлиньяж, чтобы создать цельный блок текста:

 #banner h1 { font-size: 4rem; line-height: 1; text-transform: uppercase; } #banner h1 span { color: #f85981; } #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

Этот дизайн включает в себя список спецификаций Trabant; его запас топлива и расход, а также цена автомобиля, которая была определена правительством Восточной Германии:

 <li> <h3>Two-stroke fuel tank</h3> <p><b>6.3</b>gallon</p> </li> <li>…</li> <li>…</li>

Этот порядок HTML имеет смысл при чтении без стилей, но мне нужно визуально перевернуть комбинацию заголовка и абзаца, чтобы сформировать более плотный блок текста. Я меняю порядок заголовка и абзаца, указав элементы списка как flex-контейнеры и изменив их направление по умолчанию с row на column-reverse:

 li { display: flex; flex-direction: column-reverse; } ul p { font-size: 1.802rem; } ul p { color: #f85981; }

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

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

 ul pb { font-size: 4.5rem; letter-spacing: .05em; line-height: .8; color: #fff; }

Цена в моем списке спецификаций также включает элемент span, который содержит код валюты Восточной Германии, DDM:

 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>
 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>

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

 ul p small { font-size: .889rem; text-align: right; transform: rotate(180deg); writing-mode: vertical-rl; }

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

Это также означает, что мне нужно внести лишь незначительные коррективы для экранов среднего размера, сначала изменив значения цвета в моем градиентном фоне CSS и переместив мой чертеж Trabant в центр экрана и на 30 метров сверху:

 @media (min-width: 48em) { body { background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 20%, #34020B 100%); background-position: 50% 30rem, 0 0; } }

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

 header { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; }

Я выравниваю первый логотип слева, а второй справа:

 header > *:first-child { text-align: left; } header > *:last-child { text-align: right; }

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

 #banner h1 { white-space: pre; max-width: 100vw; font-size: 8rem; }

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

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

 #banner { position: relative; margin-bottom: 25rem; } #banner div { position: absolute; top: 8.25em; left: 20em; }

Для моей последней настройки экрана среднего размера я превращаю свой неупорядоченный список во гибкий контейнер и устанавливаю его элементы так, чтобы они занимали четное количество доступного горизонтального пространства:

 ul { display: flex; } li { flex: 1; }

Адаптация дизайна для нескольких размеров экрана — задача, которая мне очень нравится. Чтобы использовать дополнительное пространство, доступное на больших экранах, я применяю значения сетки к элементу body, чтобы создать три симметричных столбца:

 @media (min-width: 82em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 2vw; }

Элементы в этом дизайне не перекрываются, поэтому для простоты я использую grid-template-area. Этот дизайн имеет девять областей сетки, и я даю каждой из них имя, отражающее ее содержание; заголовок, баннер, данные и основное:

 body { grid-template-areas: "header header ." "banner banner data" ". . main"; }

Я размещаю эти элементы, используя имена областей, что позволяет мне изменить их местонахождение в моем макете, не изменяя их положение в моем HTML:

 header { grid-area: header; } #banner { grid-area: banner; } main { display: contents; } main > p { grid-area: main; } ul { display: block; grid-area: data; }

Определение шрифтов Slab Serif (египетских)

Эта окончательная классификация шрифтов с засечками впервые появилась на рекламных плакатах начала 19 века и — с ее блочными формами букв — была разработана для привлечения внимания. Одной из определяющих черт шрифта Slab serif является часто не заключенный в квадратные скобки шрифт с засечками, который встречается со стержнем под углом 90°.

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

Шариковые наконечники Archer придают ему характерный вид, который пользуется популярностью у дизайнеров в печати и в Интернете. Sentinel, также от Hoefler & Co., использовался Бараком Обамой в его предвыборной кампании 2012 года. Как и Archer, он бывает разного начертания и включает курсив.

Я выбрал ITC Officina Serif Эрика Шпикерманна и Оле Шафера для своей первой книги Transcending CSS, хотя в то время я не очень хорошо разбирался в дизайне типографики. FF Unit Slab, также созданный Эриком Шпикерманном, имеет несколько начертаний, курсив и поддерживает 107 различных языков.

Dalton Maag — это шрифтовая мастерская, чьи шрифты я использую чаще всего. Я выбрал их Lexia для своих последних обложек книг, и мне нравится индивидуальность его самого толстого рекламного веса, особенно курсива. Вы должны быть знакомы с Mokoko, также написанным Далтоном Маагом, так как я выбрал его для заголовков и заголовков в этой серии.

В то время как Барак Обама выбрал свой шрифт с засечками Slab от Hoefler & Co., его коллега-кандидат от демократов Берни Сандерс выбрал Jubilat Джошуа Дардена для своей президентской кампании 2016 года. Jubilat — один из самых универсальных шрифтов с засечками Slab, он выпускается в 11 размерах с соответствующим курсивом.

Плоские засечки требуют внимания

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

Заголовок снова содержит два изображения SVG, раздел баннера включает заголовок и первый абзац стенда, а также неупорядоченный список, в котором отображаются характеристики Trabant. На этот раз я также включаю два элемента SVG. Один для массивных 57 цифр, второй для декоративного текста, идущего по изогнутой траектории:

 <header> <svg>…</svg> <svg>…</svg> </header> <svg>…</svg> <div>…</div> <div>…</div> <ul>…</ul> <div> <svg>…</svg> </div>

Объединение трех из этих элементов вместе образует графическое введение в этот дизайн. Я начну с базовых стилей, которые включают цвет, и представлю шрифт с засечками:

 body { background-color: #8a8988; font-family: "slab"; color: #f7eed7; }

Я ограничиваю ширину своего заголовка до 220 пикселей и выравниваю его содержимое по центру:

 header { margin-bottom: 2rem; width: 220px; text-align: center; }

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

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 750 690" role="img" aria-label="1957. The year Trabants were first produced"> <title>The year 1957</title> <path d="…"/> <path d="…"/> </svg>

Две цифры в этом SVG перекрываются, чтобы добавить глубину; Я уменьшаю их непрозрачность, затем использую режим наложения, чтобы смешать их цвета:

 body > svg path { opacity: .75; } body > svg path:nth-of-type(1) { fill: #f5e3B4; } body > svg path:nth-of-type(2) { fill: #ba0e37; mix-blend-mode: multiply; }

Последним компонентом моего вступительного рисунка является вертикальное слово «Duroplast», армированный волокном пластик, используемый для изготовления кузовов Trabant. Вы можете поискать этот элемент в моем HTML, но вы его не найдете, потому что я генерирую этот контент с помощью псевдоэлемента. Я размещаю сгенерированный контент, меняю его режим письма на вертикальный, затем поворачиваю его на 180 градусов:

 body { position: relative; } body:after { content: "duroplast"; position: absolute; top: 2rem; right: 2rem; font-size: 7rem; transform: rotate(180deg); writing-mode: vertical-rl; }

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

 body:after { mix-blend-mode: overlay; }

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

 <div> <h3>Units produced</h3> <p>1957–1990</p> <p>3,096,999</p> </div>

Визуальный порядок этих элементов отличается от этого HTML, и я использую Flexbox, чтобы изменить их порядок в их родительском разделе. Во-первых, я меняю flex-direction со строки по умолчанию на столбец:

 #content { display: flex; flex-direction: column; }

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

 #content h3 { order: 3; font-weight: normal; text-transform: uppercase; }

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

 #content p:nth-of-type(2) { font-size: 4.5rem; }

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

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

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, auto); } }

Затем я помещаю заголовок и раздел баннера в первую строку, используя номера строк. Мой баннер занимает первые три столбца, а заголовок — последние три:

 header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 1 / 4; grid-row: 1; }

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

 body > svg { grid-column: 1 / -1; grid-row: 2 / 4; z-index: -1; }

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

 body:after { position: static; grid-column: 4; grid-row: 1 / 3; z-index: 1; font-size: 10rem; }

Несмотря на то, что он построен на симметричной сетке, оставление некоторых столбцов пустыми создает необычный асимметричный дизайн:

 #content { grid-column: 2 / -1; grid-row: 3; mix-blend-mode: difference; } ul { grid-column: 1 / -1; grid-row: 4 / -1; }

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

 #content h3, #content p { color: #31609e; } #content h3 { font-size: 1.75rem; } #content p:nth-of-type(1) { font-size: 3rem; } #content p:nth-of-type(2) { font-size: 8rem; }

Текст SVG на пути

Одна из самых захватывающих причин использования SVG для рендеринга текста заключается в том, что он следует пути, дизайнерскому приему, который невозможен с использованием только CSS. Мой изогнутый SVG включает в себя закругленный контур, а также текстовый элемент, содержащий мой контент. Я заключаю этот текст в элемент SVG textPath и использую значение его атрибута href, чтобы связать его с идентификатором указанного выше пути:

 <div> <svg viewBox="0 0 750 700" xmlns="https://www.w3.org/2000/svg"> <path fill="none" stroke="none" d="…"/> <text> <textPath href="#curve-path">…</textPath> </text> </svg> </div>

Я не хочу, чтобы эта кривая отображалась на маленьких экранах, поэтому я изменил значение отображения ее родительского подразделения на none в своих базовых стилях. Используя медиа-запрос минимальной ширины, я затем возвращаю это значение к блоку, чтобы показать его для экранов среднего размера, помещая его в мою сетку и увеличивая его значение z-index. Это продвигает его вперед в порядке укладки:

 #curve { display: none; } @media (min-width: 48em) { #curve { display: block; grid-column: 1 / 6; grid-row: 2 / 4; z-index: 2; transform: translateY(-1.5rem); } }

С этим текстом я использую знакомые стили font-size и text-transform, за которыми следуют свойства SVG fill и text-anchor, которые устанавливают мой текст с начала его пути:

 #curve text { font-size: .889rem; text-transform: uppercase; fill: #fff; text-anchor: start; }

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

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

 @media (min-width: 64em) { body { grid-column-gap: 2vw; align-items: start; } body > svg { grid-column: 1 / 5; grid-row: 2 / 5; z-index: -1; } header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 5 / -1; grid-row: 2; } #content { grid-column: 1 / 4; grid-row: 4; } #curve { grid-column: 1 / 5; grid-row: 1 / 4; } ul { grid-column: 5 / -1; grid-row: 3 / -1; display: block; } }

Читать дальше из серии

• Вдохновленные дизайнерские решения: журнал Avaunt
• Вдохновленные дизайнерские решения: актуальные вопросы
• Вдохновленные дизайнерские решения: Ernest Journal
• Вдохновенные дизайнерские решения: Алексей Бродович
• Вдохновленные дизайнерские решения: Беа Фейтлер
• Вдохновленные дизайнерские решения: Невилл Броуди
• Вдохновленные дизайнерские решения: Отто Шторх
• Вдохновленные дизайнерские решения: Херб Любалин
• Вдохновленные дизайнерские решения: Джованни Пинтори
• Вдохновленные дизайнерские решения: Эммет МакБейн
• Вдохновляющие дизайнерские решения: Брэдбери Томпсон

NB: участники Smashing Участники Smashing имеют доступ к прекрасно оформленному PDF-файлу журнала Andy's Inspired Design Decisions и полным примерам кода из этой статьи. Вы можете купить PDF-файл этого выпуска и примеры, а также любой другой выпуск непосредственно на веб-сайте Энди.