Logo
  • Бренд
  • Визуальный язык
    • Основы визуального языка
    • Палитра
    • Типографика
    • Иконографика
    • Структура и сетка
    • Эффекты
    • Анимации
  • Компоненты
    • Токены
    • Компоненты
  • Редполитика
    • О редполитике
    • Пишем чисто
    • Пишем просто
    • Пишем компетентно
    • Пишем для человека
    • Интерфейсные тексты
    • Глоссарий
  • Документация
    • Доступность
  • Figma
    • Принципы
    • Начало работы
    • Команды и проекты
    • Инструменты
    • Процесс
    • Дизайн-ревью
  • Благодарности
Типографика
Типографика и фирменный шрифт помогают считывать смысл сообщения и делают бренд узнаваемым.
Важно
Убедитесь, что пользователю не нужно прилагать усилий для чтения текста на странице. В интерфейсах мы рекомендуем использовать шрифты без засечек, для контента и длинных документов — с засечками.
VK Sans Display
VK Sans Display — фирменный шрифт и ключевой элемент брендинга наших продуктов. В интерфейсах мы рекомендуем использовать его в заголовках, промоэлементах и навигации.
Системные шрифты

Helvetica Neue

Для macOS

Arial

Для Windows

San Francisco

Наборный шрифт в iOS

Inter

Наборный шрифт в Android
Шрифтовые пары
Мы рекомендуем использовать проверенные шрифтовые пары и сочетания на основе фирменного VK Sans Display.
VK Sans Display + Inter
Заголовок — VK Sans Display в начертании Medium или Demibold. Наборный шрифт — Inter в начертании Regular. Эта шрифтовая пара подходит для любой платформы.
VK Sans Display + Native Font
Заголовок — VK Sans Display в начертании Demibold. Наборный шрифт — системный: Arial для Windows, Helvetica Neue для Mac, San Francisco для iOS, Roboto для Android. В Android  рекомендуем использовать Inter.
Настройки типографики
В зависимости от типа продукта мы используем разные подходы к типографике.
Важно
Внимательно отнеситесь к высоте текста, оптимальной для чтения. 
Чем больше размер шрифта и толщина линий, тем больше должна быть высота строки. Строки, расположенные слишком плотно или слишком свободно, ухудшают читаемость текста, глазу сложнее найти новую строку.
Сервисы
Для продуктов с высокой функциональной нагрузкой мы используем более компактную типографику.
Медиа
Для продуктов с высокой функциональной нагрузкой мы используем более компактную типографику.
Выключка
Рекомендуется использовать левую выключку для текста.
Левая выключка лучше всего подходит для чтения текста
Выключка по ширине усложняет  чтение текста
Центральная выключка допустима для небольших объемов текста и заголовков.
Выключка по ширине усложняет  чтение текста

Регистр

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