VK Sans Display
+
VK Sans Text
+
VK Sans Display Expanded
+
VK Sans Display Condensed
+
Italics
Создать шрифт, который сможет доносить сообщения с разными эмоциями, характером и тональностью,
но при этом дисплейное начертание должно стать узнаваемым, а текстовое — остаться нейтральным и читабельным в любом формате. Такая задача стояла перед студией TypeType.
Работа началась в 2020 году, а уже через год, когда случился глобальный ребрендинг Mail.ru Group в VK, новое шрифтовое семейство стало основным для всей компании и сервисов: VK Музыки, VK Видео, VK Клипов, VK Знакомств и других.
VK Sans Display
Дисплейный, или акцидентный, шрифт — визитная карточка бренда.
Ему позволено выглядеть более харизматично и обладать характерными графическими фишками. В VK такой шрифт используется в оформлении заголовков разделов в приложениях, на рекламных баннерах и в роликах, макетах для наружной рекламы и внутренних коммуникаций.
VK Sans Display
VK Sans Display
+
VK Sans Text
+
VK Sans Display Expanded
+
VK Sans Display Condensed
+
Italics
VK Sans Text
Текстовый, или наборный, шрифт — для комфорта пользователей.
Именно он должен быть хамелеоном, подстраивающимся под различные задачи, обладать более спокойным и умеренным характером, вызывать чувство безопасности у пользователя. Текстовый шрифт является альтернативой системным шрифтам и используется на сайтах VK в больших блоках наборного текста.
VK Sans Text Light 10
После завершения работы над дисплейной гарнитурой мы приступили к разработке наборного шрифта. Перед началом работы организовали ещё одну встречу, чтобы обсудить промежуточные этапы и дополнительно пройтись по техническим особенностям. Основные параметры для текстового шрифта у нас уже были: маленькие размеры: (20, 14, 12 и меньше); начертания Light, Regular, Medium, DemiBold, Bold; кассовый состав из 17 языков на кириллице и 33 — на латинице, цифр, спецсимволов, пунктуации и логотипа.
VK Sans Text Regular 10
Команда VK поделилась результатами своих исследований и подробно рассказала нам про технические нюансы, важные при разработке текстового шрифта. Главными факторами выступали компактность шрифтовой гарнитуры и легкая читаемость в маленьком размере. Мы приступили к внутренним исследованиям и первым скетчам. Нам было важно сделать новый шрифт оригинальным, но при этом сохранить ощущение комфорта у пользователя. Первые наработки мы делали на кириллице и латинице.
VK Sans Text Medium 10
Ещё одной задачей стало обеспечение совместимости с системными шрифтами на случай, если пользователю придётся печатать символы, отсутствующие в фирменном шрифте. Мы решили эту задачу, сделав параметры шрифта похожими на системные по высоте, толщине и разрядке. В этом шрифте ведущим начертанием было Regular, с которого мы и начали работу. Работа шла плавно, мы попеременно вносили в шрифт правки, которые возникали и со стороны VK, и с нашей. Постепенно шрифт приобретал желаемые черты.
VK Sans Text DemiBold 10
В презентационных материалах предоставляли результаты совместных исследований текстового и дисплейного шрифтовых семейств. Различий с дисплейным шрифтом, необходимых для уникального облика гарнитуры, было достаточно: строчные знаки в текстовом шрифте стали выше, чтобы улучшилась читаемость; знаки стали стремиться к равноширинности, контраст в ширине ушёл. Так мы достигли компактности; круглые формы обрели сквадраченность, что также улучшает читаемость шрифта;
VK Sans Text Light 18
присоединение арок и полуовалов стало жесткое, что добавило динамики, улучшающей читаемость и восприятие; межбуквенные расстояния стали больше; апертуры стали более открытыми, что тоже является одним из классических изменений при разработке текстового и дисплейного шрифтов.
VK Sans Text Regular 18
Когда была готова большая часть наработок, мы начали расширять кассовый состав и вносить изменения в графику символов относительно первого скетча. Например, убрали диагональные срезы в буквах, экспериментировали со спейсингом, изменяли внешний вид цифр и добавляли в шрифт фичи.
VK Sans Text Medium 18
Интересная история случилась с трекингом, то есть изменением расстояния между буквами в зависимости от кегля. Пошла точечная работа по совершенствованию шрифта. После каждой итерации команда VK забирала наработки на тестирование, возвращалась и вносила изменения.
VK Sans Text Regular 32
Техническая работа над шрифтом часто остаётся за ширмой для зрителя, однако именно эта составляющая превращает набор нарисованных символов в рабочую шрифтовую гарнитуру, удобную и функциональную.
VK Sans Text Medium 32
По сравнению с дисплейным шрифтом строчные буквы в текстовом стали выше, увеличились межбуквенные расстояния, и знаки стали стремиться к равноширинности, чтобы обеспечить максимальный комфорт восприятия.
VK Sans Display
+
VK Sans Text
+
VK Sans Display Expanded
+
VK Sans Display Condensed
+
Italics
VK Sans Display Expanded & Condensed
VK Sans Display Expanded
VK Sans Display Condensed
Дополнительные начертания повышают градус дизайна.
Со временем стало понятно, что базовых начертаний не хватает для решения новых коммуникационных задач. Бренд VK продолжает активно развиваться, появляются новые направления и продукты, а вместе с этим и новые потребности. Возникла необходимость придать шрифту более акцидентное, смелое звучание для большей вариативности при создании характеров и настроений в коммуникациях.
VK Sans Display
+
VK Sans Text
+
VK Sans Display Expanded
+
VK Sans Display Condensed
+
Italics
VK Sans Display Italics
Наклонные начертания и курсив придают динамики и дружелюбности.
Ещё 15 дополнительно разработанных наклонных начертаний для семейства VK Sans Display, Condensed и Expanded помогают создавать динамичную, активную коммуникацию. Это знаки типа Oblique — графемы прямых начертаний, наклонённые на 12°.
Однако количество глифов в шрифтах Italic увеличивается с 249 до 272. Для этих начертаний был отрисован специальный сет True Italic, в котором часть строчных букв меняется на курсивные формы, что позволяет сделать шрифты более эмоциональными, дружелюбными и при этом академичными, усиливая тем самым коммуникацию.
VK Sans Display Bold Italic
АаБбВвГгДдЕеЁё
ЖжЗзИиЙйКкЛлМм
НнОоПпРрСсТтУу
ФфХхЦцЧчШшЩщ
ЪъЫыЬьЭэЮюЯя
VK Sans Display Expanded Medium Italic
АаБбВвГгДдЕеЁёЖжЗзИиЙйКкЛлМмНнОоПп
РрСсТтУуФфХхЦцЧчШшЩщЪъЫыЬьЭэЮюЯя
VK Sans Display Condensed Italic
АаБбВвГгДдЕеЁёЖжЗзИиЙйКкЛлМмНнОоПп
РрСсТтУуФфХхЦцЧчШшЩщЪъЫыЬьЭэЮюЯя
VK Sans Font Family
VK Sans Display
Light
Regular
Medium
DemiBold
Bold
Light
Italic Oblique
Italic Oblique
Regular
Italic Oblique
Italic Oblique
Medium
Italic Oblique
Italic Oblique
DemiBold
Italic Oblique
Italic Oblique
Bold
Italic Oblique
Italic Oblique
Light
True Italic
True Italic
Regular
True Italic
True Italic
Medium
True Italic
True Italic
DemiBold
True Italic
True Italic
Bold
True Italic
True Italic
VK Sans Display Condensed
Light
Regular
Medium
DemiBold
Bold
Light
Italic Oblique
Italic Oblique
Regular
Italic Oblique
Italic Oblique
Medium
Italic Oblique
Italic Oblique
DemiBold
Italic Oblique
Italic Oblique
Bold
Italic Oblique
Italic Oblique
Light
True Italic
True Italic
Regular
True Italic
True Italic
Medium
True Italic
True Italic
DemiBold
True Italic
True Italic
Bold
True Italic
True Italic
VK Sans Display Expanded
Light
Regular
Medium
DemiBold
Bold
Light
Italic Oblique
Italic Oblique
Regular
Italic Oblique
Italic Oblique
Medium
Italic Oblique
Italic Oblique
DemiBold
Italic Oblique
Italic Oblique
Bold
Italic Oblique
Italic Oblique
Light
True Italic
True Italic
Regular
True Italic
True Italic
Medium
True Italic
True Italic
DemiBold
True Italic
True Italic
Bold
True Italic
True Italic
VK Sans Text
Light
Regular
Medium
DemiBold
Bold
А
U+00c1
VK Sans Text
·
.
…
,
:
;
!
?
*
'
"
ʻ
’
“
”
‹
›
«
»
•
-
–
—
_
(
)
[
]
{
}
|
¦
/
\
#
№
&
§
¶
©
®
™
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
Á
Ă
Â
Ä
À
Ā
Ą
Å
Ã
Æ
Ắ
Ặ
Ằ
Ẳ
Ẵ
Ấ
Ậ
Ầ
Ẩ
Ẫ
Ạ
Ả
Ć
Č
Ç
Ĉ
Ď
Đ
DŽ
Dž
É
Ě
Ê
Ë
Ė
È
Ē
Ę
Ế
Ệ
Ề
Ể
Ễ
Ẹ
Ẻ
Ẽ
Ə
Ǵ
Ğ
Ĝ
Ģ
Ĥ
Í
Î
Ï
Ì
Ī
Į
Ị
Ỉ
Ĩ
IJ
Ĵ
Ķ
Ĺ
Ľ
Ļ
Ł
LJ
Lj
Ń
Ň
Ņ
Ñ
NJ
Nj
Ó
Ô
Ö
Ò
Ő
Ø
Õ
Œ
Ố
Ộ
Ồ
Ổ
Ỗ
Ọ
Ỏ
Ơ
Ớ
Ợ
Ờ
Ở
Ỡ
Ŕ
Ř
Ś
Š
Ş
Ș
Ŝ
ẞ
Ť
Ţ
Ț
Ú
Ŭ
Û
Ü
Ù
Ű
Ū
Ų
Ů
Ụ
Ủ
Ư
Ứ
Ự
Ừ
Ử
Ữ
Ũ
Ý
Ÿ
Ỳ
Ỵ
Ỷ
Ỹ
Ź
Ž
Ż
á
ă
â
ä
à
ā
ą
å
ã
æ
ắ
ặ
ằ
ẳ
ẵ
ấ
ậ
ầ
ẩ
ẫ
ạ
ả
ć
č
ç
ĉ
ď
đ
dž
é
ě
ê
ë
ė
è
ē
ę
ế
ệ
ề
ể
ễ
ẹ
ẻ
ẽ
ə
ǵ
ğ
ĝ
ģ
ĥ
ı
í
î
ï
ì
ī
į
ị
ỉ
ĩ
ij
ȷ
ĵ
ķ
ĺ
ľ
ļ
ł
lj
ń
ň
ņ
ñ
nj
ó
ô
ö
ò
ő
ø
õ
œ
ố
ộ
ồ
ổ
ỗ
ọ
ỏ
ơ
ớ
ợ
ờ
ở
ỡ
ŕ
ř
ś
š
ş
ș
ŝ
ß
ť
ţ
ț
ú
ŭ
û
ü
ù
ű
ū
ų
ů
ụ
ủ
ư
ứ
ự
ừ
ử
ữ
ũ
ý
ÿ
ỳ
ỵ
ỷ
ỹ
ź
ž
ż
А
Б
В
Г
Д
Е
Ё
Ж
З
И
Й
К
Л
М
Н
О
П
Р
С
Т
У
Ф
Х
Ц
Ч
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я
Ѓ
Ґ
Ќ
Є
Ѕ
І
Ї
Ј
Љ
Њ
Ћ
Ђ
Ў
Џ
а
б
в
г
д
е
ё
ж
з
и
й
к
л
м
н
о
п
р
с
т
у
ф
х
ц
ч
ш
щ
ъ
ы
ь
э
ю
я
ѓ
ґ
ќ
є
ѕ
і
ї
ј
љ
њ
ћ
ђ
ў
џ
Ӓ
Ӕ
Ғ
Ѐ
Ә
Җ
Ӂ
Ӝ
Ҙ
Ӟ
Ѝ
Ӣ
Ӥ
Ӏ
Қ
Ҝ
Ҡ
Ң
Ҥ
Ӧ
Ө
Ҫ
Ү
Ұ
Ӯ
Ӱ
Ҳ
Ҷ
Ҹ
Ӵ
Һ
Ӹ
ӓ
ӕ
ғ
ѐ
ә
җ
ӂ
ӝ
ҙ
ӟ
ѝ
ӣ
ӥ
ӏ
қ
ҝ
ҡ
ң
ҥ
ӧ
ө
ҫ
ү
ұ
ӯ
ӱ
ҳ
ҷ
ҹ
һ
ӹ
0
1
2
3
4
5
6
7
8
9
₿
¢
$
€
₴
₽
£
₸
¥
₫
¤
−
+
<
>
≤
≥
=
≠
~
≈
±
×
÷
%
^
°
Ω
μ
∅
∞
∫
Ω
µ
∆
∏
∑
√
∂
◊
℮
⌘
↑
↗
→
↘
↓
↙
←
↖
↔
↕
¨
˙
`
´
˝
ˆ
ˇ
˘
˚
˜
¯
VK Sans Display
·
.
…
,
:
;
!
?
*
'
"
‘
’
“
”
‹
›
«
»
•
-
–
—
_
(
)
[
]
{
}
|
/
\
#
№
&
§
¶
©
®
™
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
ı
ȷ
А
Б
В
Г
Д
Е
Ё
Ж
З
И
Й
К
Л
М
Н
О
П
Р
С
Т
У
Ф
Х
Ц
Ч
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я
Ґ
Є
І
Ї
Ў
а
б
в
г
д
е
ё
ж
з
и
й
к
л
м
н
о
п
р
с
т
у
ф
х
ц
ч
ш
щ
ъ
ы
ь
э
ю
я
ґ
є
і
ї
ў
0
1
2
3
4
5
6
7
8
9
₿
¢
$
€
₴
₽
£
₸
¥
¤
−
+
<
>
≤
≥
=
≠
~
≈
±
×
÷
^
°
%
←
↑
→
↓
↔
↕
↖
↗
↘
↙
̈
VK Sans Display Condensed
·
.
…
,
:
;
!
?
*
'
"
‘
’
“
”
‹
›
«
»
•
-
–
—
_
(
)
[
]
{
}
|
/
\
#
№
&
§
¶
©
®
™
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
ı
ȷ
А
Б
В
Г
Д
Е
Ё
Ж
З
И
Й
К
Л
М
Н
О
П
Р
С
Т
У
Ф
Х
Ц
Ч
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я
Ґ
Є
І
Ї
Ў
а
б
в
г
д
е
ё
ж
з
и
й
к
л
м
н
о
п
р
с
т
у
ф
х
ц
ч
ш
щ
ъ
ы
ь
э
ю
я
ґ
є
і
ї
ў
0
1
2
3
4
5
6
7
8
9
₿
¢
$
€
₴
₽
£
₸
¥
¤
−
+
<
>
≤
≥
=
≠
~
≈
±
×
÷
^
°
%
←
↑
→
↓
↔
↕
↖
↗
↘
↙
̈
VK Sans Display Expanded
·
.
…
,
:
;
!
?
*
'
"
‘
’
“
”
‹
›
«
»
•
-
–
—
_
(
)
[
]
{
}
|
/
\
#
№
&
§
¶
©
®
™
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
ı
ȷ
А
Б
В
Г
Д
Е
Ё
Ж
З
И
Й
К
Л
М
Н
О
П
Р
С
Т
У
Ф
Х
Ц
Ч
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я
Ґ
Є
І
Ї
Ў
а
б
в
г
д
е
ё
ж
з
и
й
к
л
м
н
о
п
р
с
т
у
ф
х
ц
ч
ш
щ
ъ
ы
ь
э
ю
я
ґ
є
і
ї
ў
0
1
2
3
4
5
6
7
8
9
₿
¢
$
€
₴
₽
£
₸
¥
¤
−
+
<
>
≤
≥
=
≠
~
≈
±
×
÷
^
°
%
←
↑
→
↓
↔
↕
↖
↗
↘
↙
̈
Credits
TypeType
Марина Ходак
Развитие шрифтовой системы, автор дополнительных подсемейств
Юлия Гонина
Автор и дизайнер основного шрифта
Анастасия Погорелова
Старший шрифтовой дизайнер
Тома Стрельцова
Старший шрифтовой дизайнер, италики
Антонина Самохина
Шрифтовой дизайнер, италики
Иван Гладких
Кернинг
Виктор Рубенко
Хинтинг
Юрий Наконечный
Мастеринг, тестирование шрифтов
Анастасия Врублевская
Мастеринг
Надыр Рахимов
Шрифтовой дизайнер, италики
VK
Виолетта Силенина
Бренд-директор VK
Марина Антоненко
Арт-директор коммуникационного дизайна VK
Нина Виноградова
Старший дизайнер коммуникационного дизайна VK
Маргарита Сергеенко
Руководитель направления развития бренда VK
Павел Князев
Ex-VK
Илья Гришин
Ex-VK
Михаил Лихачёв
Ex-VK
Артём Олещенко
Ex-VK
Для полного погружения рекомендуем открыть сайт на компьютере — там больше интерактива и анимаций