Как рождались шрифты VK Sans и OK Sans — ключевые моменты лекции «Нельзя понижать градус дизайна…» с конференции на «Дизайн-выходных» в Казани

Казань на три дня стала эпицентром дизайн-мышления — с 30 мая по 1 июня здесь развернулись «Дизайн-Выходные», куда съехались лучшие творческие умы страны. На одной из многочисленных лекций прошел разбор кейса-долгожителя: две Марины — Антоненко (арт-директор VK) и Ходак (дизайн-лид студии TypeType) — впервые детально раскрыли пятилетнюю кухню создания одного из самых масштабных дизайн-проектов российского IT-гиганта VK.

(Фото 1 и Фото 2)

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

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

(Фото 3)

Команда TypeType изначально предусмотрела, что шрифт будет включать две стилистически связанные версии: акцентную и основную, оставаясь при этом конвенциональным, эстетичным и удобочитаемым.
"Наше исследование развивалось в двух направлениях: мы анализировали шрифтовые гарнитуры, созданные специально для брендов, и тиражные шрифтовые пары. Исследование показало: когда шрифт разрабатывается для бренда, дисплейная версия обычно представляет собой геометрический гротеск, а текстовая — интерфейсный геогротеск. В случае с тиражными шрифтами текст может содержать любые графические элементы, но общая тенденция сводится к упрощению графики", — рассказала о процессе создания Марина Ходак, дизайн-лид и приглашенный спикер от студии TypeType.

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

Команда ВКонтакте имела доступ ко всем ранее разработанным шрифтам студии, что позволило протестировать их в макетах, оценить визуальное восприятие и определить наиболее подходящий вариант. В результате был выбран шрифт TT Interphases, который затем подвергся доработкам.
"В процессе обсуждений мы внесли в шрифт ряд изменений: корректировали пропорции, толщину штрихов, округлость символов — искали оптимальный баланс графики, который позволил бы использовать его как основу для дальнейшей работы. Ключевым вопросом было определение степени выразительности: насколько яркой и заметной должна быть графика в этом шрифте. К 2020 году ВКонтакте уже стала платформой для публикации новостей и кейсов различной тематики. Трудно представить, чтобы серьезные новостные материалы набирались шрифтами вроде Comic Sans или Unbounded — это сразу вызвало бы вопросы у аудитории: "Почему такой эмоциональный шрифт используется для важного контента?", — пояснил спикер от команды дизайнеров студии TypeType.

В поисках идеального баланса между узнаваемостью и сдержанностью графики внимание сосредоточилось на тончайших деталях — анализировались срезы диагоналей, площадки в местах их пересечения, форма буквы «Y» и множество других элементов. Именно эти нюансы, как показывает практика, превращают шрифт в уникальный визуальный образ, делая его по-настоящему фирменным и узнаваемым.
Итоговый дисплейный шрифт, как и задумывалось, стал геометрическим гротеском. Это особенно заметно в буквах «О», «Р» и других знаках, стремящихся к геометрически правильным овалам. Однако в нём присутствуют характерные особенности: срезы терминалов под углом от 6,5° до 9,5°, что нетипично для классических геометрических гротесков (где срез либо отсутствует, либо превышает 15°). Команда TypeType сделали срезы на знаках заметными, но сохранили сдержанность, избегая излишней экспрессии.

Кроме того, в шрифте остались полочки в диагональных знаках и особая форма овалов, например, в букве «b». Хотя шрифт сохраняет строгость геометрического гротеска (линии одной толщины, чёткие пропорции), асимметричное влитие овалов в стемы добавляет динамику и эмоциональность, создавая ту самую «игру», которая делает его живым и запоминающимся.

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

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

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

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

(Фото 4)

Возникла задача расширить шрифтовую систему: для молодёжных и дерзких сервисов, таких как «VK Музыка» или «VK Видео», потребовались смелые начертания, тогда как для технологичных направлений (VK Cloud, VK Tech) — сдержанные и строгие. Даже внутри одного сервиса разные проекты зачастую нуждались в собственном «голосе». Так появились дополнительные версии шрифта — VK Sans Condensed/Expanded, которые позволили гибко поддерживать настроение брендов в макетах.

Марина Антоненко подчеркнула, что «этот этап стал логичным продолжением жизни шрифта в экосистеме VK, где адаптивность оказалась ключевой для поддержки разнообразия брендов».

«Для нас суть брифа сводилась к одной фразе: "Повысить градус дизайна". У команды VK была отличная формулировка: "VK Sans Display" раскрывает свою индивидуальность в строчных знаках — через уникальные пропорции, ритмику и срезы, тогда как прописные выглядят более традиционно. Возник вопрос: как сделать и прописные буквы эксклюзивными? Когда люди хотят выразить эмоции, они говорят громче, жестикулируют, а в тексте для этого используют капс. Именно в прописных нам нужно было заложить возможность передавать настроение», — объяснила Марина Ходак, описывая техническую задачу, стоявшую перед студией.

Было принято решение разработать вариативный шрифт — систему, где основное начертание дополняется производными: от предельно узкого до максимально широкого, с плавными промежуточными вариантами, полученными интерполяцией. Главным изменением стал чёткий фокус на две крайние формы: Condensed (сжатый до 55% от оригинала) и Expanded (расширенный до 145%). Критически важно сохранялось стилевое единство и узнаваемость базового шрифта, несмотря на радикальные деформации.

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

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

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

(Фото 5)

«VK Sans Expanded действительно стал чаще применяться в технологичных проектах. Этот шрифт позволяет нам управлять эмоциональным восприятием макета — в одних случаях он передаёт серьёзность через сочетание с графикой, в других придаёт более смелый и дерзкий характер. С VK Sans Condensed ситуация была сложнее — команда не сразу приняла это начертание. Оно более экспрессивное и яркое, поэтому первыми его начали использовать VK Музыка и различные фестивальные проекты. Этот вариант шрифта идеально работает в смелых, ориентированных на молодёжь решениях», — дополнила Марина Антоненко, рассказав о процессе внедрения новых начертаний шрифта в дизайн-команде VK.

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

VK Sans Italic стал чаще всего применяться в смелых, агрессивных и дерзких коммуникациях. Например, этот шрифт активно используется в брендинге VK Play и VK Музыка. В то же время True Italic лег в основу более мягких и дружелюбных сервисов, таких как VK Добро и VK Education. На данный момент уже создано более 50 начертаний шрифта VK Sans, но развитие не останавливается — с появлением новых брендов растёт потребность в уникальной текстовой стилистике.

(Фото 6)

«В рамках нашего бренд-контура находится и социальная сеть "Одноклассники", для которой также было проведено обновление шрифтовой системы. В 2023 году ОК реализовали ребрендинг, чтобы подчеркнуть новый статус платформы: теперь это не просто соцсеть для взрослой аудитории, а динамично развивающееся пространство по интересам, где пользователи могут находить единомышленников и делиться хобби. Первым шагом стало обновление логотипа — он приобрёл современные черты благодаря острым углам, но сохранил дружелюбие за счёт мягких округлых форм. Новый шрифт должен был соответствовать этой философии: оставаться открытым и приветливым, чтобы не отталкивать взрослую аудиторию, но при этом отвечать актуальным трендам. Прежняя гарнитура с её широкими пропорциями и неравномерным кернингом плохо работала в рекламных материалах, а недостаточная насыщенность снижала читаемость на расстоянии», — пояснила Марина Антоненко, описывая задачи студии TypeType по разработке шрифта для "Одноклассников" в рамках общей системы VK Sans.

«Ключевым требованием технического задания для студии стала "дружелюбность". У команды VK уже были наработки — выбранный шрифт Rounded с закруглёнными штрихами и мягкими углами. Такой стиль знаков ассоциировался с излишней детскостью и легкомысленностью, теряя техничность и элегантность. Перед нами стояла задача: передать дружелюбие через шрифт, но избежать явных скруглений», — объяснила Марина Ходак.

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

В новом шрифте главным компонентом стали расставленные в знаках акценты, придающие ему наивность, веселость, но выдерживающие строгость: приподнятая середина в букве “А”, повышенный угол наклона ножки в букве “Я”, специфическая серединная линия в букве “J”, небольшие радиусы в буквах “Л”, “У”. Шрифт не передаёт эмоции явно — глядя на него, нельзя сразу сказать, что он весёлый и яркий, однако чувства добра, открытости и дружелюбия воспринимаются скорее интуитивно благодаря этим тонким деталям. Шрифт является геометрическим гротеском, поскольку формы букв стремятся к кругу, но при этом в нём присутствует доля гуманизма, вызывающая ассоциации с рукотворной работой. Гуманистический гротеск основан на на каллиграфический основе, в нем считываются следы от пера, свободные терминалы, наклоны. Текст после доработок стал более емким, разряженным, формы более простые, из-за чего мелкий текст стал читаться лучше. В процессе разработки пропорции шрифта корректировались, чтобы выявить графические элементы, требующие доработки, и повысить его функциональность.

(Фото 7)

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

«В шрифтах OK Sans Display и OK Sans Text пропорции знаков стали компактнее, а графика — проще. Это снижает визуальную активность букв, делая их менее заметными в тексте». — Отметила Марина Ходак.Шрифт представляет собой векторный объект, и его хинтинг играет ключевую роль: он помогает знакам корректно встраиваться в пиксельную сетку. Фактически, хинтинг — это набор правил, определяющих, как векторный контур будет отображаться на экране.

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

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

Валерия ФЕДОРОВА

Фото автора