У Авито не было своего шрифта. А теперь есть

Рассказываем, зачем и как

Привет! На связи Дмитрий Салливан, креативный директор Авито. Мы вместе со студией Contrast Foundry разработали первый собственный шрифт в компании — теперь он постепенно появится во всех наших коммуникациях и продуктах.

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

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

Почему отсутствие своего шрифта стало проблемой

Почему мы не создали свой шрифт раньше

Как мы сформулировали задачу

Как готовили бриф: воркшопы и «таблица антонимов»

Как построили работу и почему первый этап немного затянулся

Как отсекали лишнее

Как устроены три концепции

Почему вместо курсива сделали моношрифт

Что получилось в конце

Как тестировали шрифт

Какие итоги

В 2022 году мы освежили бренд, а в 2023-м сделали редизайн продукта: поработали над цветами, обновили логотип, осовременили графику. Тогда же вместе с Contrast Foundry мы обновили шрифтовое написание логотипа «Авито» и брендовых дескрипторов — «Авито Недвижимость», «Авито Авто» и остальных.

Узнать больше об эволюции нашего дизайна →

Раз уж обновляем константы бренда, встал вопрос и про шрифт. Но это задача на годы, а у проекта были сжатые сроки, поэтому мы выбрали готовые решения: шрифт Manrope для продукта, а Aeroport — для коммуникаций. Оба хорошие, но не совсем подходящие.

Оба шрифта компромиссные. Aeroport слишком широкий для рекламных носителей, а в Manrope не очень качественная кириллица, нарисованная без понимания всех её особенностей.

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

Минус к имиджу. У всех крупных компаний — Яндекса, Сбера, ВКонтакте — есть уникальный шрифт. Это важный знак зрелости бренда и уровня дизайн-культуры в компании.

Траты. Каждый год приходилось платить за лицензию Aeroport, который ещё и не на сто процентов нам подходил. Создание шрифта обходится примерно как несколько лет такой лицензии, поэтому в долгую свой продукт выгоднее. Хотя экономика тут не главный аргумент: собственный шрифт тоже нужно поддерживать.

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

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

✅ Проблема с экспертизой решается привлечением внешнего партнёра. Шрифт — сложный технический продукт, и экспертизу по созданию таких тяжело вырастить внутри даже большой ИТ-компании. У инхаус-команды всегда будут более срочные бизнес-задачи, а здесь нужен фокус на несколько лет.

Поэтому мы снова пригласили Contrast Foundry — студию с сильной экспертизой и большим набором кейсов в этой области.

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

✅ Бриф мы финализировали уже вместе с Contrast Foundry — о наших воркшопах расскажем чуть ниже.

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

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

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

Со стороны коммуникаций. Нужен шрифт компактнее, чем Aeroport. Например, у нас есть готовые графические решения, в которые встраивается информация, и туда надо уместить и посыл, и сроки, и скидки, и дисклеймеры.

Разработке шрифта предшествовал нулевой этап: несколько недель подряд мы встречались всей объединённой рабочей группой из продукта, маркетинга, инхаус-студии и Contrast Foundry.

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

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

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

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

Разрешали эти конфликты уже на эскизах. Главным оказался баланс технологичности и дружелюбия: Авито — ИТ-компания, шрифт должен быть в меру технологичным, но не сухим.

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

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

Из-за этого первый этап затянулся, но потом мы вернулись к привычному для студии режиму и поменяли порядок действий: сначала искать яркий, узнаваемый характер на коммуникационном шрифте, а уже потом приглушать его и переводить в пропорции Manrope.

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

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

❌ Уходили от всего бумажного, крафтового и рукодельного — всё-таки это прямые антонимы технологичности.

❌ Старались уйти и от Aeroport: основа работы была в том, чтобы изменить то, чем пользовались раньше.

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

👉 Дружелюбный, открытый, «свой парень» в мире шрифтов. Слишком мягкий для технологичной компании, а соединения под углом выглядели несовременно.

👉 Адаптивно гибкий гротеск. Он показался нам интересным, но плохо пересекался с логоблоком. Также нам не понравилась излишняя острота в местах соединения штрихов.

👉 Стильный гуманистический гротеск. Характерный и аккуратный, но такие открытые формы знаков уже использовали Сбер и Яндекс — попадать с ними в одну категорию не хотелось.

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

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

В гротесках всегда сначала разрабатывают прямые начертания: студия их сделала и попросила у нас макеты, где используется италик, чтобы понять, какие параметры настраивать. Мы посовещались и честно ответили: италик у нас на перспективу — может, будет использоваться, а может, и нет. В Manrope он есть — но мы им не пользуемся.

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

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

Мы разработали семейство Avito Sans из трёх подсемейств, по пять начертаний в каждом. Это округлый, равномерный и геометричный шрифт, который ассоциируется с уверенностью и надёжностью. Он не такой широкий, как Aeroport, и близок по пропорциям к Manrope — поэтому работает и в коммуникациях, и в продукте.

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

Шрифт поддерживает латиницу и кириллицу, а Avito Text — даже греческий, это важно для формул. При работе с ним консультировались со шрифтовым экспертом из Греции. Его же отхинтовали вручную, чтобы он чётко отображался на экранах любого разрешения.

Ещё в семействе два комплекта цифр разной ширины, отдельно отрисованные спецсимволы и два набора альтернативных букв для Display — глитчевый и с рукописными росчерками.

Ключевой вызов — сделать так, чтобы новый шрифт встроился в текущие продукты. То есть буквально: после внедрения интерфейсы не должны были поехать.

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

Готовый шрифт сначала внедрили в дизайн-систему Авито. Затем мы проверили шрифт на продакшене и запустили A/B-тесты, проанализировали перформанс-метрики — они не должны были упасть после обновления. После шрифт проверили сами сотрудники вертикалей — прошлись по своим экранам и убедились, что контент отображается корректно.

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

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

Довольны по каждому пункту :)

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

Ну а если хотите посмотреть на шрифт ещё, заглядывайте на отдельную страницу, посвящённую Avito Sans →