В 2023 году японское маркетинговое агентство SHIFTBRAIN запустило интерактивный сайт, посвящённый двадцатилетию компании. Для этого проекта команда TypeType разработала уникальный вариативный шрифт, способный экстремально растягиваться по горизонтали. За основу мы взяли бестселлер TT Norms® Pro, который уже использовался в качестве корпоративного шрифта компании — вы можете увидеть его на основном сайте 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!
Благодаря чёткой и слаженной работе команды ТypeТype клиенты получают:
- Уникальный шрифт «под ключ» — без переплат за лишние итерации;
- Прозрачность — сроки и бюджет известны на старте;
- Поддержку — менеджер решает вопросы быстрее, чем возникает стресс.
Почему это работает? Мы не просто продаём шрифты, а проектируем инструмент бренда. После реализации проекта 80% клиентов возвращаются за дополнительными услугами (например, иконки или локализация).
Хотите такую же предсказуемую работу над шрифтом? Давайте обсудим ваш проект! Напишите нам и опишите задачу — предложим решение за 24 часа.
