Как мы делали свой шрифт

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

Чо началось-то? Нормально же сидели

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

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

Новый логотип стал взрослее, сбросив с себя все лишнее.

Как мы делали свой шрифт

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

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

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

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

Я дорисовал CONF.21

Как мы делали свой шрифт

У «С» здесь закрытая апертура, «N» с нарочито широкими плечами, с гипертрофированными чернильными ловушками (Ink Trap) в «N» и «2». Таким образом я решил дать логотипу конференции выразительности и добавить немножко дерзости.

Чернильные ловушки были впервые внедрены мэтром шрифтового дизайна Мэтью Картером в шрифте Bell Centennial для телефонной компании Bell. Цель — банальная экономия. Телефонный справочник — толстая книга на дешевой бумаге с очень мелким текстом. На такой бумаге краска расплывается в острых углах букв. Картер сделал буквы с компенсаторами для краски, в итоге печать на дешевой бумаге стала выглядеть как надо.

Как мы делали свой шрифт

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

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

Как мы делали свой шрифт
Как мы делали свой шрифт

Почему свой шрифт — это круто

Текст — важнейший и самый распространенный в рекламе коммуникативный инструмент. А уникальный корпоративный шрифт — это текст, одетый в бренд.

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

Как мы делали свой шрифт

Крупные корпорации считают долгом обзавестись собственной шрифтовой гарнитурой (гарнитура — это семейство шрифтов, объединенных одним характером и рисунком знаков). Сбер, Яндекс, Тинькофф, РЖД, МТС, Связной — у всех есть свои шрифты, которые помогают бренду угнездиться в нашей голове.

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

У многих корпораций вроде Яндекса, Тинькова или Сбера схожие системы логотипов внутренних продуктов и подразделений.

Как мы делали свой шрифт

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

Шрифт — это долго и дорого

Работа над шрифтом — долгая и кропотливая. Даже очень долгая и очень кропотливая. В зависимости от количества начертаний, знакового состава шрифта, работа трех высокооплачиваемых специалистов может занять год. У нас столько времени не было. И денег тоже. Но мне очень хотелось успеть, пока новый бренд не убежал далеко вперед. СЕО в этом убедить тогда не удалось, так как хороший софт для работы над шрифтами довольно дорогой, нет смысла покупать профессиональный шрифтовой редактор для пробной работы, в общем, экономической целесообразности видно не было. Но все это не препятствие. Пусть это будет одно начертание, минимально необходимый знаковый состав, кириллица/латиница. Купили простейший шрифтовой редактор — за работу.

Выразительность шрифта

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

1. Это должен быть рупор бренда. Понятно, что если у нас будет одно начертание (сверхжирное, исходя из логотипа), то

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

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

Если взять абстрактную шкалу выразительности от условного Эриала до экстравагантного Нью Машина Инктрэп, то насколько должен быть эмоциональным наш шрифт? Должен ли он кричать или вкрадчиво душнить?

Как мы делали свой шрифт

Если плясать от нашего Монсеррата до Нью Машины, то наше место

Как мы делали свой шрифт

Первые наброски

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

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

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

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

Настоящий квадрат нам кажется вертикально вытянутым,

Как мы делали свой шрифт

горизонтальные линии выглядят толще вертикальных.

Как мы делали свой шрифт

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

Как мы делали свой шрифт
Как мы делали свой шрифт

округлые формы выносятся за вертикальные границы,

Как мы делали свой шрифт

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

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

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

Как мы делали свой шрифт
Как мы делали свой шрифт

Сразу же в шрифт я заложил вызывающие альтернативы

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

Затем все глифы я загнал в Type Tool.

Как мы делали свой шрифт

И началось самое интересное.

Кернинг

Тут все просто. Кернинг — это регулировка расстояния между кернинговыми парами. А кернинговые пары — пары знаков, которые требуют кернинга. «AV», «АТ», «ТД» и пр.

Как мы делали свой шрифт

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

Как мы делали свой шрифт

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

Как мы делали свой шрифт
Как мы делали свой шрифт

То же самое повторяем с неалфавитными знаками. А потом весь набор повторяем с латиницей.

Опасные места в кириллице можно проверить на волшебной фразе

Как мы делали свой шрифт

Смотрим. Вроде все ок. Но что-то смущает. Не могу понять, что именно.

Как мы делали свой шрифт

Набор выглядит неравномерным. Понятно, что шрифт акцидентный, но что-то в нем не так. Не нравится.

Как мы делали свой шрифт

Подход второй

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

Как мы делали свой шрифт

Я собираю краткую презу — что это за шрифт, зачем и как он работает.

Да, шрифт называется DT.HEADER.

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

И отправляю Евгению.

Он дал комментарии и на созвонах помог во всем разобраться. Женя оценивал шрифт по таким критериям:

  • Образ шрифта.
  • Графическая идея.
  • Однородность алфавитов (Lat/cyr).
  • Пропорции знаков.
  • Качество контуров.
  • Качество набора (ритм, спейсинг, кернинг).
  • Знаковый состав (языки, alt).
  • Неалфавитные знаки.
  • Технические нормы (метрики, хинтинг, мета).

Комментарии к латинице

Как мы делали свой шрифт

И кириллице

Как мы делали свой шрифт

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

Пропорции

В шрифте главные ритмообразующие знаки — «Н» и «О».

Как мы делали свой шрифт

Они задают основные пропорции.

Есть две больших категории шрифтов — разноширинные и равноширинные (не путать с моноширинными).

Разноширинные шрифты — те, у которых биение ширин знаков помнит еще о Великом Ренессансе и заложено в конструкцию знаков. У таких шрифтов прописная «Е» или «B», например, будет меньше «О» почти в два раза.

Как мы делали свой шрифт

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

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

И в этом ритмическом ряду заметно, что какие-то знаки вписываются, а какие-то — нет, например, «B» и «Т» заметно уже.

Дальше Женя пояснил, что Тагир Сафаев (тоже известный шрифтовик) любит говорить: «Сомневаетесь? Представьте, что это логотип, тогда вылезут наружу косяки».

У нас же буквально такая ситуация, шрифт — логотип.

Как мы делали свой шрифт

Еще Женя выделил знак-фаворит — «G». По пластике, динамике, по энергии, которая заложена в концевой терминал, это знак-доминант.

Как мы делали свой шрифт

Эту энергетику, напряжение и плавность нужно сообщить остальным знакам

Как мы делали свой шрифт

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

А альтернейты пока идут ждать своей очереди. Ибо не стоит выебываться только потому, что есть возможность. Сначала нужно разобраться с основными знаками, а уже совсем сильно после проектировать альтернативные и необычные формы.

Как мы делали свой шрифт

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

Как мы делали свой шрифт

Что изменилось

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

Внутреннее напряжение «G» передалось «D» и «U».

Как мы делали свой шрифт

Изменились пропорции и форма у остальных знаков.

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

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

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

Отдельного внимания заслуживает трансформация амперсанда. Он стал проще, изящней и энергичней.

Как мы делали свой шрифт

Цифры тоже довольно сильно поменялись.

Как мы делали свой шрифт

Собачка приквадрачена.

Как мы делали свой шрифт
Как мы делали свой шрифт

А нашу жирную красную точку я повесил на знак ®, что, в принципе, идеологически оправдано.

Как мы делали свой шрифт

Кернинг

И опять кернинг. Открываем Type Tool и прогоняем кернинговые пары через голову.

Как мы делали свой шрифт

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

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

Хинтинг

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

Здесь подробно о процессе хинтовки.

Альтернейты

Глифы альтернативной формы доступны в меню глифов InDesign или Illustrator.

Как мы делали свой шрифт

Что дальше?

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

Как мы делали свой шрифт
Как мы делали свой шрифт
Как мы делали свой шрифт

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

Как мы делали свой шрифт

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

Если позволяет бюджет, можно начать с пункта 5, сэкономите время.

А если захотите поговорить об этом, пишите на hi@doubletapp.ai

1515
6 комментариев

Круто.

1

Спасибо!

Из всех дизайнеров больше всего уважал именно шрифтовиков. Поздравляю с достижением!

Благодарим! Приятно)

Много похожих видел. Уж не обижайтесь, но какой-то уникальности не заметил в нем

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