История Гарнитуры

Детство Гельветики

Дело было в 1957 году. Жил был Едвард Хофман и был он директором компании под названием Haus foundry, и была у него проблема, и хотел он повторить успех Akzidenz-Grotesk от немецкого соседа Berthold Type Foundry. Тогда он заказал у Макса Мидингера новый нео-гротеск, который получил название Die Neue Haas Grotesk.

Die Neue Haas Grotesk был таким же нейтральным шрифтом как и сама Швейцария

Подростковый возраст Гельветики

В 1960 году в этой истории появляется ещё один персонаж, и зовут его Майк Паркер. Он директор компании по продаже Линотипных принтеров, а перед ним стоит задача в расширении списка доступных шрифтов для печати на его принтерах.

Майк Паркер заказывает у Артура Ритцель (дизайнер) переработку Neue Haas для его использования в линотип принтерах. А новая версия шрифта начинает называться Helvetica, что в переводе с Латинского означает «Швейцария»

Взрослая жизнь Гельветики

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

4 года спустя, в 1984 Стив Джобс решил добавить Гельветику в список предустановленных шрифтов на компьютерах Макинтош, что сделало шрифт ещё более популярным.

Кризис среднего возраста Гельветики

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

В своём интервью Швейцарский дизайнер Бруно Мааг сказал:

«Дизайнеры используют Гельветику потому что это простой выбор и потому что он работает. Такой выбор вносит однородность в бренды и их айдентику»

Но несмотря на всю критику которая пришла к Гельветики с ростом её популярности, она всё чаще стала появляться на логотипах и рекламных материалах компаний как BMW, American Airlines,Lg и прочих брендов.

Перерождение Гельветики

В Октябре 2006 года права на шрифт перешли к Monotype Imaging, после приобретения Linotype, прошлого владельца прав. и ещё какое-то время Гельветика не получала никаких значительных изменений.

Но всё изменилось когда в 2014 году когда Monotype заказали разработку новой версии шрифта, с целью расширить потенциал гарнитуры. И в 2019 году появилась последняя Helvetica Now.

Новая версия имела сразу 3 варианта: Для маленьких экранов, Обычная, и Дисплей версия для больших носителей. Суммарно имея 96 разных стилей начертания.

Техническая сторона

У Гельветики есть 2 основных особенности:

1) Равномерное распределение воздуха между символов создаёт ощущение почти одинакового расстояния между каждой буквой, но это расстояние достаточно варьируется что не даёт гарнитуре попасть в категорию Mono-шрифтов

2) Почти все терминалы букв либо горизонтальны либо вертикальны

Chinzel является variable шрифтом, с тремя стандартными начертаниями (Regular, Bold, Black)

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

Через всю работу Натаниэля прослеживается уважение к истории.

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

Такое альтернативное написание букв можно очень удачно использовать в заголовках, как например это сделано в обложке книги Licht herz

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

Начало

Первым инструментом типографа была рука.

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

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

35,000 до н.э

Первый типографикой, можно считать использование руки в качестве трафарета.

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

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

1027 до н.э.

Государство Шан в Китае удачно совмещает свое существование с появлением бронзового литья. Крутые ребята из династии хотят отличаться от простых смертных. Печать — отличный способ оформления официальных документов.

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

Китайские печати очень близки по характеристикам к печатным блокам, встречаются большие печати более чем на сто символов.

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

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

Наша эра.

6 век.

В Риме, Византии, России, Украине археологи находят каменные, глиняные и бронзовые блоки для создания оттисков на одежде.

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

9 век.

За прошедшие 300 лет в Китае в первые использовали гравюры из дерева для создания оттисков на бумаге.

Буддисты поддерживают печатное дело, потому что любое слово Будды на физическом объекте, делает этот объект талисманом.

Появляется первая печатная книга.

10 век.

Задач для печатного текста становится все больше.

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

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

Простой кузнец, Би Шенг, решает все проблемы и создает основу идеи печатного станка. В своей кузне, он создаёт оттиск каждой буквы отдельно, из глины. Он создаёт первый подвижной шрифт.

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

Он был по истине страстным человеком, ведь в китайском алфавите более 200 000 символов. Так что по достоинству его изобретение оценили только в Европе, намного позже его смерти.

Заключение.

Через 300 лет после гениального изобретения Би Шенга появляется печатное дело в Европе.

Первая часть статьи про инструменты типографов на этом заканчивается.

Вот смотри Петька, у тебя есть чувство вкуса и у меня есть чувство вкуса, но есть один нюанс!

Что это?

Насмотренность — Визуальный опыт полученный путём изучения чего-то красивого и прекрасного.

Как это использовать?

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

Проблема.

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

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

Решение.

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

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

Способы применения.

1. Провокация своего собственного воображения.

Плагиат — это прекрасно. Потому что, его не существует.

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

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

2. Провокация оригинальности.

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

Подумайте, что поставленные задачи значат именно для вас и отразите эти чувства в своём проекте. У вас получится отличный дизайн.

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

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

2.1 Доверие.

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

Хороший дизайнер начнет опираться не на обыденный визуальный образ, а на личный опыт. Спросите себя: что вызывает у меня доверие? Каким людям и вещам доверяю я? Уверен, у вас появится 2-3 отличные идеи.

2.2 Праздник

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

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

Получился забавный и дружелюбный постер.

Проблема

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

У бинарного пикселя есть только 2 состояния — вкл/выкл. В третьей степени это 8 цветов, а у двух битного пикселя мы видим уже 64 возможных цвета.
Большинство современных дисплеев используют 8 битные цвета, но есть и более профессиональные варианты, вроде 10 битных HDR дисплеев. В случае с последними бандинг градиентов будет гораздо менее выраженный. Но качество картинки у остальных пользователей от этого не поменяется.

Причина

Когда мне жизненно необходимо вставить линейный градиент 0,0,0 - 255,0,0 в изображение имеющее 780 пикселей в ширину бандинг цветов будет происходить примерно каждые 3 пикселя. Это напрямую связано с количеством доступных для монитора цветов, и так как монитор не может показать 780 оттенков, то он просто растянет доступные 256 на 780 пикселей.

Решение

Заставить всех купить 10 битные мониторы — отличная идея, но всё же есть более простые способы справиться с бандигом в изображениях. Dithering (в переводе “колебания”) добавляет очень слабый шум поверх градиентов, тем самым размывая границы встречи двух оттенков цвета. Его можно применить как к изображению целиком, либо сделать отдельный слой шума поверх градиента.
Пример того как это будет выглядеть сразу после этого абзаца.

Введение

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

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

Разборчивость текста

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

Величина Х

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

Ширина штриха

По довольно очевидным причинам стоит избегать тонкие и болдовые шрифты, используйте Regular, Medium и Book. А если вдруг потребуется создать иерархию текста, то контраст размера отлично справиться с этой задачей.

Гротеск или Антиква ?

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

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

Строчки

Самое страшное что с вами может случиться в возрасте 5 лет — это перескок глаз на следующую строчку. Когда я вспоминаю этот тяжелый момент моей жизни я никак не могу забыть те секунды потерянности, когда я вроде бы нашёл глазами новую строчку, но она идентична предыдущей. Страшная вещь. Для того, чтобы новоприбывшие маленькие люди не испытывали такой ужас, просто используйте большой текст (14 - 24 пунктов в случае книг) и щедрое меж строчное расстояние (4-6 пунктов). Сама строка должна быть не особо широкой, ведь большие блоки текста — тоже страшно.

Главное преимущество Raleway — его универсальность. Гарнитура выглядит как максимально стандартный нео-гротеск, но наличие 9 начертаний + италик версии позволяет использовать её практически в любом месте, где гротеск подойдёт по контексту. Raleway в какой-то степени является нитью проходящей через все элементы дизайна, буквально связывая их между собой.

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

Железная дорога Raleway Распространяется по бесплатной лицензии и доступна на google.fonts , и свойственно она также является веб шрифтом.

Влияние этого феномена на нашу работу.

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

Введение

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

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

Практика

Возьмём реальный пример: Сайт по продаже криптовалют заказал у вас рекламный баннер для продвижения своего обменника.

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

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

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

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

Решение

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

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

В данном случае, наша честность и открытость позитивно повлияет на эффективность рекламы. Когда опыт пользователя, совпадает с опытом и мыслями рекламодателя, конфликт в голове не возникает, пользователь интересуется рекламой и не против её существования. Дизайнер справился с задачей.

Мыслим шире

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

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

Заключение

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

Типографика это взаимосвязи между строгими правилами, искусством, мастерством и философией.

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

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

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

До конца этой статьи можете считать, что я сошел с ума и пишу это из комнаты с мягкими стенами. Но если серьезно, я это реально использую при принятии решений :^).

Начало анализа

Факт

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

Точка входа

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

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

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

Идём дальше

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

Интересный факт

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

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

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

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

Wake up

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

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

Заключение

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

1. Смотрим на картину целиком, не замечаем разницы между задачей, трекингом, кернингом, настроением, а смотрим на всё глазами обычного человека.

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

На этом моменте, я предлагаю вам самим подумать в этом направлении.

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

Бебас распространяется компанией Dharma Type Основанной в Японии в 2005 году.

Когда Гельветика в заголовках не подходит по контексту или она вам просто не нравиться, то часто можно заменить её именно на Бебас.

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

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

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

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

У шрифта существует Pro версия, цена которой 150$, и в Про версии добавлен Италик и нижний регистр.