Шрифт с широким размахом: спецпроект к двадцатилетию SHIFTBRAIN

Новая задача

Проект получил название SHIFTBRAIN Norms. Перед нами стояла задача разработать шрифт с вариативностью по оси Width на основе TT Norms® Pro Regular, доработать некоторые формы знаков и отрегулировать размер под японский шрифт A1 Gothic Regular. А ещё — внедрить логотип и 30 иконок-портретов сотрудников SHIFTBRAIN, которые они нам предоставили.

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

Студия SHIFTBRAIN искала не просто шрифт, а инструмент для айдентики японского проекта, но столкнулась с проблемами: нужен был гибрид латиницы и японских эстетических элементов — готовых решений не было. Нам необходимо было объединить в один проект латинские и CJK-шрифты (CJK — аббревиатура от Chinese, Japanese, and Korean; то есть шрифты, поддерживающие китайский, японский и корейский языки). Требовалось точное попадание в стиль бренда без бесконечных правок. Важна была слаженная работа на расстоянии.

Конечно, новой для нас стала и экстремальная ширина вариативного шрифта.

«Особенно интересно было сделать что-то экстремальное с TT Norms® Pro, так как сам по себе он довольно нейтральный. Однако с такими широкими знаками довольно непривычно и неудобно работать, так как в экран монитора помещается не строка текста, как обычно, а всего несколько символов. К тому же мы старались сохранить характер TT Norms® Pro даже в супершироком начертании».

Марина Ходак, дизайн-лид TypeType

Как работал отдел продаж и production-менеджмент TypeType

Мы превратили сложный запрос в прозрачный процесс с предсказуемым результатом.

Этап 1. Глубокая аналитика 

Мы провели воркшоп с клиентом и выявили ключевые параметры:

• сочетание жесткой геометрии латиницы с плавными японскими штрихами
• ограниченная ширина символов для вертикальных надписей

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

Этап 2. Детальное ТЗ и планирование 

Создали визуальную карту правок с примерами:

• как трансформировать засечки
• где добавить «японский» акцент

Закрепили контрольные точки — клиент получал скетчи каждые пять дней.

Этап 3. Контроль качества

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

Этап 4. Итог + поддержка

В результате мы передали заказчику полный комплект:

• четыре начертания кастомного шрифта
• гайд по использованию (кегли, интерлиньяж для японских носителей)
• SVG-иконки для совмещения с типографикой

Также мы делали бесплатные доработки в течение месяца после сдачи.

Результат для SHIFTBRAIN

• Экономия 30% времени — благодаря чёткому ТЗ и отсутствию «эффекта телефона» между командами
• Шрифт стал частью айдентики — используется в мерче и цифровых продуктах
• Продолжение сотрудничества — локализация шрифта для новых рынков

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

• Гибкость: мы работаем с любыми стилями — от гротесков до рукописных шрифтов
• Опыт: 600+ кастомных проектов
• Технологии: собственный FontEditor и инструменты для проверки кернинга

«TypeType не просто рисует буквы — они проектируют коммуникацию», — такой отзыв мы получили от команды SHIFTBRAIN!

Реализация: работа производственного отдела

Вариативный шрифт

Итак, нужно было сделать так, чтобы TT Norms® Pro менялся по горизонтали от начертания Condensed до суперширокого — то есть от 460 pt до 3480 pt. Выходит, что ширина меняется в целых 7,6 раз! В то время как обычно от Condensed до Expanded ширина меняется примерно в 1,5 раза. Таких широких шрифтов мы ещё не делали.

Узкое начертание осталось по ширине таким же, как Condensed, а справа по оси вариативности Width мы добавили ультраширокое начертание. В шрифте предусматривалась только латиница, цифры и стандартные знаки пунктуации. Для оси Width мы изначально взяли стандартные значения: 75-100-125-150. Однако резкое увеличение ширины со 125 до 150 смотрелось плохо. В итоге для Extended мы выбрали значение 200. 

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

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

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

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

Марина Ходак, дизайн-лид TypeType

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

«Я отмасштабировал шрифт, увеличив его на 107% от исходного. Размер Em остался 1000 единиц как у референсного A1 Gothic. Из референса мы взяли настройки интерлиньяжа и пересадили параметры, отвечающие за него, в наш шрифт. Также немного сдвинули базовую линию по запросу клиента. Проверку соответствия референсу производили в Adobe Illustrator через Composite Fonts. Изначально клиент предоставил настройки, с которыми они использовали оригинальный шрифт в паре с A1 Gothic. Нашей задачей было сделать так, чтобы картинка не отличалась при использовании кастомного шрифта в паре с A1 Gothic с базовыми настройками Size и Baseline. Это позволяет применять эту пару шрифтов не только в Adobe Illustrator».

Юрий Наконечный, руководитель технического отдела TypeType

Иконки-портреты и логотип

SHIFTBRAIN прислали нам 30 красивых иконок с изображениями всех сотрудников компании. Однако сложность заключалась в том, что контур иллюстрации гораздо сложнее и детальнее контура буквы — там больше точек, они не соответствуют требованиям, и при экспорте из формата svg в glyphs некоторые детали начинают ломаться. Поэтому нельзя просто перенести векторное изображение в Glyphs. После того, как такая иконка подсаживается в шрифт, её нужно тщательно вычистить и поправить.

Мы внедрили в шрифт 30 иконок, тщательно всё проработав, однако уже после этого SHIFTBRAIN решили переделать изначальный рисунок 15-ти из них — изменить пропорции, чтобы привести к более обобщённому виду. Поэтому нам пришлось заново проделывать всю работу с половиной иконок. Но в итоге всё получилось!

Также мы внедрили в шрифт логотип компании и прописали для него фичу — при её включении буква ‘S’ меняется на логотип.

Графические доработки

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

Результат

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