Шрифт как метафора поездки по городу: новый типографический голос CityMobil

В начале 2021 года компания Ситимобил запустила масштабный ребрендинг. Из второго по величине в России агрегатора такси она трансформировалась в систему сервисов городской мобильности с каршерингом, доставкой и арендой самокатов, помимо такси. Такая смена концепции привела к обновлению айдентики и поиску своего собственного типографического голоса. Первым занялось лондонское агентство Saffron Brand Consultants, а за вторым Ситимобил обратились к нам.
 

С самого начала речь шла о создании гибкой системы логотипов и фирменного шрифта для использования в обновлённой коммуникации бренда. Ситимобил пришёл к нам с уже готовой концепцией фирменного стиля—цветовой гаммой, кейвижуалом в виде искры, объёмной векторной графикой, звукоподражательными словами вроде «вжух», «ииха» и «бип-бип», которые должны были использоваться в медиа—и подробным брифом на разработку шрифта.

Нам предстояло нарисовать логотипы Ситимобил и Ситидрайв и шрифт в трёх начертаниях: Display, Title и Text. Небанальность задачи заключалась в том, что с одной стороны, ввиду размера компании и сложности экосистемы у Ситимобила было множество ограничений, из-за которых визуальный язык обычно вынужденно получается слишком нейтральным. Но с другой стороны, Ситимобил как раз не хотели быть нейтральными или серьёзными. Поэтому нам предстояло найти баланс и создать максимально яркий и выразительный образ, не промахнувшись при этом с интонацией. И мы с удовольствием взялись за поиски решения.

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

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

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

Первое направление: дружелюбность и энергия. Читая бриф, мы обратили внимание на то, какое значение придавалось дружелюбности и человечности в описании новой концепции. Это показалось нам необычным в контексте разговора о городе, скорости и автомобилях, и мы решили подчеркнуть эту условную «мягкость» с помощью сильной насыщенности букв, округлости и «надутости» форм, отказа от жёсткой геометрии. Строчные знаки в логотипе позволили нам использовать курсивные конструкции, а в узкие внутрибуквенные просветы мы заложили формы фирменных искр Ситимобил.

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

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

Третье направление: дерзость и актуальность. Нам было интересно попробовать сделать что-то смелое, но уместное в рамках стиля такой крупной компании, как Ситимобил. Отсюда и неожиданные «вырезы» в буквах, острые углы, упрощённые и декоративные формы. Они создавали ощущение динамичности и дерзости.

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

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

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

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

Мы решили протестировать, насколько эта система будет работать: на примере логотипа и используя задействованные в нём буквы, мы нарисовали комплект узких и широких знаков. Чередование только узких и широких знаков в строке создавало ощущение скачков и движения в пробке. Но постепенно изменяя ширины букв, у нас получилось создать иллюзию «плавной поездки». А когда мы добавили ещё одну ось вариативности—наклон,—эффект движения с ускорением и замедлением стал более явным. Для максимальной выразительности наклонных начертаний мы сделали угол достаточно большим—18 градусов.
 

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

Ещё одна важная характеристика шрифта, которая доставила нам немало хлопот—открытость/закрытость форм знаков. Всё начиналось с геометричных радиусов и максимально открытой формы С с вертикальными окончаниями штрихов. Но такая конструкция создавала проблемы в широком начертании из-за огромного белого внутри и была чересчур «технической» по стилю.

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

Таким образом у нас наметилась концепция—совмещение геометрии с динамикой. Стремление к кругу в овалах, мягкое присоединение овалов к прямым штрихам (p b q и т.д.) и максимально низкий контраст отвечали за техничность, а динамические элементы (например, сужение в середине е), ассиметричное присоединение в к ж k и приоткрытые формы овалов с диагональными резами—за гуманистические признаки и динамику в шрифте.

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

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

Основные сервисы Ситимобил—это такси и каршеринг Ситидрайв. Рисуя логотип второго, мы столкнулись с тем, что изначально задуманный плотный интерлиньяж был просто невозможен из-за бреве над Й. Тогда мы вспомнили о ключевом визуальном образе бренда «искре» и решили использовать его вместо обычной бреве. Это не только помогло нам найти общий комфортный интерлиньяж для всех логотипов, но и подчеркнуть фирменную графику бренда в шрифте.

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

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

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

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

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

Узкое начертание имеет уже знакомые нам сплющенные овалы с прямыми вертикальными сегментами, широкое—овалы, вытянутые по горизонтали. Для нас было принципиально важно сохранить сжатость круглых знаков в узком мастере, потому что она служила отличной рифмой широким буквам, в которых есть горизонтальные узкие полуовалы, например, Б В Р R Я. В первом подходе мы нарисовали оба начертания независимо друг от друга и посмотрели, что получается при интерполяции. Все круглые знаки выглядели очень квадратными на фоне круглости крайних начертаний. Чтобы решить эту проблему, нам пришлось максимально сократить прямые сегменты в узком начертании и сбалансировать длины усов между мастерами.

Знаки с незамкнутыми овалами Сс Ss Ээ Зз оказались ещё сложнее. Изначально мы собирались выбрать единый угол окончаний штрихов для обоих мастеров, но так широкие знаки смотрелись очень закрытыми. Тогда было решено нарисовать буквы в широком мастере более открытыми, с более вертикальными наклонами резов. Это привело к новой сложности—при интерполировании окончания штрихов должны были открыться с 12 до 54 градусов, то есть кардинально изменить свою форму, и в промежуточных начертаниях они становились очень узкими, с заметными наплывами на дугах. Нам удалось решить эту проблему после нескольких недель тонкой настройки длин и углов усов и расширения штрихов к концам. В результате такое значительное изменение не повлияло на характер шрифта, а только добавило ему ещё больше динамики.

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

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

Citymobil Sans имеет две оси вариативности—по ширине и по наклону. Для удобства работы со шрифтом мы добавили на осях ключевые точки и получили пять шагов по ширине: Condensed, Narrow, Normal, Wide, Extended. Крайние начертания на этой оси предназначены для использования как Display, то есть в самой крупной и короткой акциденции, а близкие к Normal допустимо использовать как начертание Title—в более длинных заголовках и коротких предложениях.

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

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

Благодаря открытости клиента к нашим самым безумным идеям, Citymobil Sans получился динамичным, интересным и узнаваемым. Он не рассчитан на набор длинных текстов, ведь для этого у него слишком тесные апроши и большая насыщенность, но движение и большие масштабы—это его стихия.

Креативный директор: Мария Дореули
Дизайнеры: Егор Головырин, Никита Сапожков
Мастеринг и хинтинг: Noe Blanco
Специальный консультант: Лиза Рассказова
Моушн: Никита Сапожков, Дима Козляев
Копирайтер и редактор: Сусанна Агабабян

Ситимобил
Маркетинг директор: Лена Доброхотова
Руководитель отдела бренда: Никита Шипов
Глава продуктового дизайна: Александр Всехвальнов
Глава мобильного дизайна: Артур Касимов
Арт-директор: Татьяна Хрусталева

Saffron Consultants
CCO: Gabor Schreier
Creative director: Drew Vann Coughlan
Designer: Alex Poryadina
Programme Director: Anna Tyurina