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

В 2023 году японское маркетинговое агентство SHIFTBRAIN запустило интерактивный сайт, посвящённый двадцатилетию компании. Для этого проекта команда TypeType разработала уникальный вариативный шрифт, способный экстремально растягиваться по горизонтали. За основу мы взяли бестселлер TT Norms® Pro, который уже использовался в качестве корпоративного шрифта компании — вы можете увидеть его на основном сайте SHIFTBRAIN. О том, как проходила работа над этим необычным проектом, рассказываем в статье
TypeType
TypeType
TypeType — международная студия шрифтового дизайна, одна из крупнейших в мире. Наша миссия — создавать современные, эстетичные, многофункциональные, удобные шрифты и распространять знания о шрифтовом дизайне

Новая задача

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

Шрифт с широким размахом: спецпроект к двадцатилетию SHIFTBRAIN
Поделиться
Отправить
Запинить

Обсуждение