CoFo Avito Sans—шрифтовая экосистема для Авито

CoFo Avito Sans—семейство из трёх гарнитур (Display, Text и Text Mono), разработанное Contrast Foundry для бренда Авито в 2022–2026 годах.

С 2022 по 2026 год мы вместе с командой Авито последовательно прошли путь от запроса на шрифт до тендера и разработки. Результатом нашей работы стали три гарнитуры: CoFo Avito Sans Display, CoFo Avito Sans Text и CoFo Avito Sans Text Mono. Каждая со своим характером и задачей, а вместе они стали финальным элементом ребрендинга Авито. 

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

Узнать больше о шрифте можно на странице CoFo Avito Sans.

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

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

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

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

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

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

Эти понятия отражают суть бренда Авито и должны быть проявлены в шрифте. Мы также работали с дополнительными ключевыми словами: вечный—как антипод трендам; современный; народный—дружелюбный, доступный, повседневный, располагающий и открытый.

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

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

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

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

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

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

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

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

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

Семейство CoFo Avito Sans состоит из трёх шрифтов—Display, Text и Mono, по пять начертаний в каждом. Display—лицо бренда и его главный «спикер»: смелый и уверенный. Text и Mono—универсальные и дипломатичные, они берут на себя задачи, где важны комфорт и надёжность.

Avito Display—заголовочный, для маркетинговых коммуникаций: рекламы, баннеров, крупных заголовков и лидов. Он считывается издалека и прежде всего работает как лицо Авито. Внутри гарнитуры есть дополнительные акцентные знаки для отдельных кампаний.

Avito Text—для продукта: приложения, сайта, длинных текстов. Он должен незаметно и честно вливаться в интерфейс, сохраняя те же характерные черты, но в более спокойном выражении.

Avito Mono—для внутренних коммуникаций: презентаций, таблиц, технической документации.

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

Латиница: больше круглых и узких букв: o n t f j.
Кириллица: больше прямоугольных и широких букв: и н п н ш ы.

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

В Avito Sans мы решили сблизить ширины круглых и прямоугольных знаков. В результате овальные буквы стали чуть уже привычного, а прямоугольные—немного шире.

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

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

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

Avito Sans должен уверенно работать как в латинице, так и в кириллице. Как этого добиться? В латинице вопрос оригинальности часто решается через детали—будь то необычные соединения штрихов в n или компенсаторы (ловушки для чернил). В кириллице таких возможностей гораздо меньше, поэтому уникальность должна быть заложена в самой основе шрифта.

В Avito Sans характер строится на пропорциях и формах отдельных букв, особенно тех, что часто встречаются в русском и английском языках, например, a б s.

Со срезами мы в этот раз не экспериментировали и сделали их горизонтальными. Это решение отлично поддержал набор альтернативных знаков, о котором мы расскажем чуть ниже.

Характер букв поддерживают два комплекта цифр—узкий и широкий, каждый для своих задач. В обоих сохраняются узнаваемые формы 3 и 5.

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

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

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

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

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

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

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

CONTRAST FOUNDRY
Мария Дореули / креативный директор
Лиза Рассказова / арт-директор
Егор Головырин / ведущий шрифтовой дизайнер
Тася Петелина / шрифтовой дизайнер и инженер
Полина Байдина / графический и моушн-дизайнер
Анна Волкова / моушн-дизайнер
Татьяна Егошина / графический и моушн-дизайнер

АВИТО
Андрей Тарасов / дизайн-директор
Дима Салливан / креативный директор 
Дима Коротевский / арт-директор
Денис Сбитний / арт-директор
Михаил Горлов / ведущий дизайнер
Ольга Моисеева / ведущий дизайнер
Алексей Рыбалкин / руководитель креативной группы
Наталья Лиликова / креативный продюсер