VK Sans Display Medium — это среднее по насыщенности начертание дисплейной версии фирменного шрифта экосистемы VK, и чаще всего его ищут дизайнеры, которым нужно сверстать макет в фирменном стиле ВКонтакте, но файл шрифта не открывается, не отображается в Figma или отсутствует в системе. Ошибка «missing font» в Figma при открытии макета от команды VK почти всегда означает, что локально не установлено именно это начертание.
Шрифт распространяется бесплатно и легально — его можно скачать с официальных ресурсов VK. Ниже разберём, чем VK Sans Display отличается от обычного VK Sans, где взять файлы, как установить начертание Medium в Windows и macOS, как подключить его на сайт через CSS и почему в некоторых программах шрифт «не виден» даже после установки.
Что такое VK Sans Display и чем Medium отличается от других начертаний
VK Sans — гарнитура, разработанная для интерфейсов и коммуникаций VK. Семейство включает текстовую версию и дисплейную: VK Sans Display оптимизирована под крупные кегли — заголовки, обложки, промо-материалы. У дисплейной версии более выраженный характер: она рассчитана на то, чтобы читаться на плакатах и в шапках, а не в длинных абзацах.
Начертание Medium занимает промежуточное положение между Regular и DemiBold (SemiBold). В типографской шкале насыщенности оно обычно соответствует значению font-weight: 500. Это рабочая «середина»: достаточно акцентная для подзаголовков, но не такая тяжёлая, как жирные начертания.
- 🔤 Regular — базовое начертание для основного текста и интерфейсных подписей.
- ✍️ Medium — акцентное начертание для подзаголовков, кнопок и карточек.
- 🖋️ DemiBold / SemiBold — усиленный акцент для заголовков второго уровня.
- 🖼️ Bold — максимальная насыщенность для крупных заголовков и обложек.
VK Sans Display Medium — это не отдельный шрифт, а одно из начертаний внутри семейства VK Sans Display с насыщенностью 500.
Где скачать шрифт легально
Единственный надёжный источник — официальные ресурсы VK: разделы для дизайнеров и бренд-материалы на сайтах экосистемы VK, а также официальный репозиторий шрифта, если он опубликован компанией. Файлы обычно распространяются в форматах .ttf или .otf, иногда вместе с веб-версиями .woff2.
⚠️ Внимание: сторонние «каталоги шрифтов» нередко выкладывают переименованные или модифицированные файлы. Такой файл может содержать битые таблицы символов, из-за чего кириллица отображается некорректно. Сверяйте источник и, если файл вызывает сомнения, скачайте шрифт заново с официального ресурса VK.
Перед скачиванием проверьте условия лицензии на странице загрузки. VK публикует шрифт для свободного использования, однако точные условия (например, допустимость модификации) стоит прочитать в сопроводительном тексте — они могут уточняться.
Установка VK Sans Display Medium в Windows и macOS
Установка выполняется стандартными средствами системы. В Windows достаточно открыть файл шрифта двойным кликом и нажать кнопку Установить в окне просмотра. Альтернативный путь — перетащить файл в раздел Параметры → Персонализация → Шрифты. В macOS файл открывается через штатное приложение Шрифты (Font Book), где нужно подтвердить добавление.
После установки перезапустите программы, в которых планируете использовать шрифт: Photoshop, Figma Desktop, Word и другие приложения подхватывают новые гарнитуры только после перезапуска. Это самая частая причина ситуации «установил, но в списке нет».
☑️ Проверка корректной установки шрифта
Работа со шрифтом в Figma и графических редакторах
В десктопной версии Figma локально установленный VK Sans Display Medium появляется автоматически. Если вы работаете в браузерной версии, потребуется установить официальный помощник Figma font installer (font agent) — без него браузер не видит системные шрифты. Для командной работы файлы шрифта можно загрузить в организацию как shared fonts, чтобы у всех участников макет открывался без предупреждений о пропавших шрифтах.
В Photoshop и Illustrator начертание Medium выбирается в отдельном выпадающем списке стилей рядом с названием семейства. Если в списке стилей видны только Regular и Bold, а Medium отсутствует — вероятно, установлен неполный пакет семейства. Установите все файлы из архива, а не только один.
Подключение VK Sans Display Medium на сайт через CSS
Для веба шрифт подключается через правило @font-face. Начертание Medium корректно объявлять с весом 500, чтобы браузер мог подставить его при указании font-weight: 500 в стилях. Предпочтительный формат — woff2: он даёт наименьший размер файла при том же качестве.
@font-face {
font-family: 'VK Sans Display';
src: url('vk-sans-display-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
h2 {
font-family: 'VK Sans Display', Arial, sans-serif;
font-weight: 500;
}
Параметр font-display: swap указывает браузеру показать текст системным шрифтом, пока загружается файл VK Sans. Без font-display: swap текст заголовков может оставаться невидимым до полной загрузки шрифта — на медленном соединении это выглядит как «пропавшие» заголовки.
⚠️ Внимание: не присваивайте Medium вес 400 или 700 «для удобства». Тогда при смене шрифта на системный (если файл не загрузился) браузер применит неправильную насыщенность, и вёрстка визуально «поедет»: заголовки станут жирнее или тоньше, чем в макете.
Сравнение форматов файлов шрифта
| Формат | Где применяется | Особенности |
|---|---|---|
| TTF | Установка в систему, офисные программы | Широкая совместимость, крупнее размер файла |
| OTF | Дизайн-редакторы, полиграфия | Расширенные типографские возможности |
| WOFF2 | Веб-сайты | Максимальное сжатие, поддержка всеми современными браузерами |
| WOFF | Веб-сайты (устаревающий) | Запасной вариант для старых браузеров |
Для сайта достаточно WOFF2. Держать в проекте TTF «про запас» для браузеров не нужно — это лишний вес. А вот для установки в систему и работы в редакторах как раз используйте TTF или OTF из официального архива.
Типичные проблемы и их решение
Разберём ситуации, с которыми чаще всего сталкиваются при работе именно с начертанием Medium.
- 🚫 Шрифт установлен, но не виден в программе — перезапустите приложение; в браузерной Figma проверьте, что установлен font agent.
- 🔡 Отображаются «квадраты» вместо кириллицы — файл, скорее всего, повреждён или содержит только латиницу; скачайте полную версию с официального ресурса.
- ⚖️ Medium выглядит как Bold — проверьте, что в CSS или редакторе выбран вес 500, а не принудительное «псевдожирное» начертание.
- 🌐 На сайте шрифт не подгружается — проверьте путь к файлу в
@font-faceи откройте вкладку Network в инструментах разработчика: файл должен отдаваться с кодом 200.
Если в Figma макет пришёл с ошибкой missing font, но подменять шрифт не хочется — попросите автора макета приложить файл VK Sans Display или установите его с официального ресурса VK: подмена на похожий гротеск сломает межбуквенные интервалы и переносы строк.
Почему нельзя просто заменить VK Sans Display на Inter или Roboto
У этих шрифтов разные метрики: ширина символов, высота строчных знаков, межстрочные интервалы. При подмене текст займёт другую ширину, заголовки перенесутся иначе, а аккуратно выверенная сетка макета «поплывёт». Для черновика подмена допустима, для продакшн-вёрстки — нет.
FAQ: частые вопросы о VK Sans Display Medium
Бесплатен ли шрифт VK Sans Display для коммерческого использования?
VK публикует шрифт в открытом доступе на своих официальных ресурсах. Точные условия лицензии указаны на странице загрузки — перед коммерческим применением ознакомьтесь с ними, так как формулировки могут уточняться.
Чем VK Sans Display отличается от обычного VK Sans?
Display-версия предназначена для крупных кеглей: заголовков, обложек, промо. Текстовая версия оптимизирована для набора в интерфейсах и длинных текстах. Для абзацев используйте текстовую версию, для заголовков — Display.
Какому значению font-weight соответствует Medium?
Начертанию Medium в типографской шкале соответствует значение 500. В CSS его и объявляют: font-weight: 500 внутри правила @font-face и в стилях элементов.
Почему после установки шрифт не появился в Figma в браузере?
Браузерная версия Figma не имеет доступа к системным шрифтам напрямую. Установите официальный font agent с сайта Figma, перезапустите браузер — после этого локальные шрифты, включая VK Sans Display Medium, станут доступны.
Можно ли использовать VK Sans Display Medium в мобильном приложении?
Да, файлы TTF/OTF встраиваются в проект приложения стандартными средствами платформы. Учитывайте, что дисплейная версия рассчитана на крупные размеры — для мелкого интерфейсного текста берите текстовую версию семейства.