Шрифты для инфографики маркетплейса: какие выбрать и как подобрать цвета

Инфографику смотрят с телефона и мельком, поэтому от шрифта и цвета зависит, прочитают ли её вообще. Ниже — бесплатные шрифты с кириллицей, которые можно использовать в коммерческих проектах (лицензия и наличие кириллицы проверены по данным каталога Google Fonts 17.09.2026), как их сочетать, как подобрать цвета и проверить контраст текста по правилу Wildberries.

Какой шрифт выбрать для инфографики

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

• Полная кириллица. Проверьте буквы «ё», «й», «щ», «ъ» и кавычки-ёлочки: если в шрифте нет кириллицы, редактор подставит другой шрифт, и надпись «поедет».
• Несколько начертаний: обычное — для текста, полужирное или жирное — для заголовков и цифр.
• Отчётливые цифры и знаки: размеры, проценты, «×», «°».
• Лицензия, которая разрешает коммерческое использование: карточка товара — это реклама товара.

Бесплатные шрифты с кириллицей для карточек

Все шрифты ниже есть в каталоге Google Fonts, поддерживают кириллицу и распространяются по лицензии SIL Open Font License. Её условия разрешают бесплатно использовать шрифт в коммерческих проектах, в том числе в изображениях для маркетплейсов; запрещено продавать сам шрифт отдельно. Скачать шрифты можно на сайте Google Fonts, а в Figma шрифты Google доступны по умолчанию.

• Montserrat — геометрический шрифт, хорошо смотрится в заголовках и крупных цифрах.
• Inter — нейтральный шрифт для экранов, читается в мелком тексте.
• Roboto и Open Sans — универсальные шрифты для основного текста.
• Manrope, Onest и Golos Text — современные гротески для заголовков и текста.
• PT Sans — шрифт компании ParaType, спроектированный с кириллицей.
• Rubik — со скруглёнными углами, мягкий по характеру: подходит для детских товаров, товаров для дома и питомцев.
• Oswald — узкий, для коротких крупных заголовков и цифр.
• Unbounded — широкий и заметный, только для заголовков из одного-двух слов.

Шрифт без кириллицы: частая ошибка

Популярный в дизайн-подборках Bebas Neue в каталоге Google Fonts кириллицы не содержит, поэтому для русского текста его версия из Google Fonts не подойдёт. Прежде чем собирать макет, наберите в шрифте тестовую фразу со всеми «сложными» буквами — например, «Съешь же ещё этих мягких французских булок, да выпей чаю» — и проверьте, что все буквы из одного шрифта.

Как сочетать шрифты и размеры

• Лучше один шрифт на всю серию, а иерархию строить размером и жирностью. Максимум — два шрифта: один для заголовков, другой для текста.
• Заголовок слайда — одна короткая мысль, крупно и жирно.
• Подписи — заметно меньше заголовка, но читаемые на телефоне без увеличения.
• Не растягивайте и не сжимайте шрифт по ширине — возьмите готовое узкое или широкое начертание.
• Одинаковые размеры текста и отступы на всех слайдах серии.
• Не ставьте текст у края главного фото: Ozon может добавить на главное фото свои бейджи и иконки, и они закроют надпись.

Цвета для инфографики: как подобрать

Цвета удобнее брать от товара, а не из случайной палитры. Трёх ролей обычно хватает; чем больше цветов на слайде, тем сложнее выделить главное.

• Основной — цвет товара, упаковки или бренда.
• Акцентный — один, контрастный основному: для цифр и главных преимуществ.
• Нейтральные — белый, серый, тёмный: для плашек и основного текста.
• Для главного фото Wildberries советует минимум инфографики и плашки нейтрального цвета.
• Один набор цветов на все слайды — так серия выглядит единой.

Контраст текста: правило Wildberries и как проверить

В правилах к фото товаров Wildberries задаёт контрастность текста: для мелкого текста — не менее 4,5:1, для крупного или жирного — не менее 3:1. Это те же пороги, что в международных рекомендациях по доступности WCAG, поэтому проверить слайд можно любым калькулятором контраста: вводите цвет текста и фона и сравниваете результат с порогом.

Для ориентира — контраст нескольких пар цветов, посчитанный по формуле WCAG:

• Чёрный текст на белом — 21:1.
• Белый на чисто-красном #FF0000 — 4:1: крупный или жирный текст проходит, мелкий — нет. Белый на тёмно-красном #C62828 — 5,6:1, проходит любой текст.
• Белый на жёлтом #FFD600 — 1,4:1, почти не читается. Чёрный на том же жёлтом — 14,9:1.
• Белый на оранжевом #FF9800 — 2,2:1, чёрный на нём — 9,7:1.
• Белый на ярко-синем #2196F3 — 3,1:1, на тёмно-синем #1565C0 — 5,8:1.
• Белый на сером #9E9E9E — 2,7:1, на тёмно-сером #616161 — 6,2:1.

Текст поверх фото

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

В Yskra шрифты и цвета вручную подбирать не нужно: слайды инфографики собираются в одном стиле с фото товара, а преимущества для слайдов можно подтянуть из карточек конкурентов по ссылкам или артикулам. Первая сборка бесплатно, скачивание — 290 ₽, в пакете — от 199 ₽ за фотосессию.

Частые вопросы

Читайте также