Статья · Инфографика и дизайн

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

Шрифты для инфографики маркетплейсов выбирают не по красоте, а по тому, читается ли надпись на экране телефона и в маленькой плитке каталога. Разбираем, какой кегль нужен на слайде 900×1200, какие начертания и сочетания работают, как проверить кириллицу и где взять бесплатные шрифты для коммерческого использования.

Почему надпись на слайде читается хуже, чем в макете

Дизайнер видит слайд на большом мониторе. Покупатель — на телефоне, и сильно уменьшенным. В галерее карточки слайд шириной 900 пикселей занимает ширину экрана телефона — а это около 400 точек, то есть картинка уменьшена больше чем вдвое. В каталоге, где товары стоят в две колонки, главное фото уменьшается ещё примерно вдвое.

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

Какой кегль нужен на слайде 900×1200

Площадки не задают размер шрифта в пикселях. Ниже — наши ориентиры для макета 900×1200 пикселей. Если делаете слайд 1200×1600, умножайте значения примерно на 1,3.

Если текст не помещается, сокращайте фразу, а не уменьшайте шрифт. Две строки по три слова читаются быстрее, чем одна на семь.

Начертания: какие брать и каких избегать

• Regular и Medium — для пунктов и подписей. У тонких начертаний на телефоне штрихи сливаются с фоном.
• SemiBold и Bold — для заголовков и цифр. Для крупного или жирного текста Wildberries допускает меньший контраст с фоном — 3:1 против 4,5:1 для мелкого.
• Thin, ExtraLight, Light — только для очень крупных слов на однотонном фоне. На фото и мелким кеглем их лучше не использовать.
• Курсив — для одного слова, а не для абзаца.
• Рукописные и декоративные шрифты — для одного-двух слов в заголовке, если это часть стиля бренда. Цифры и характеристики ими не набирают.
• Все прописные подходят для коротких меток вроде «СОСТАВ» или «РАЗМЕРЫ». Длинную фразу прописными читать труднее.
• Узкие начертания выручают, когда слово длинное: «водоотталкивающий», «антибактериальный». Слишком узкие на телефоне превращаются в частокол.

Сочетания шрифтов

Простое и почти всегда рабочее решение — одно семейство в двух-трёх начертаниях: Bold для заголовков, Medium для пунктов, Regular для подписей. Так слайды выглядят собранными, а вам не нужно подбирать пары.

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

• не больше двух семейств на всю галерею;
• роли не меняются: заголовки везде одним шрифтом, текст — другим;
• размеры одинаковые от слайда к слайду: заголовок на первом слайде и на пятом одного кегля;
• оба шрифта поддерживают кириллицу и все нужные знаки.

Удобные пары можно собрать из шрифтов, которые разрабатывались вместе, например PT Sans и PT Serif. Шрифты в фирменном стиле магазина стоит зафиксировать в шаблоне — об этом в статье про шаблоны инфографики.

Кириллица: как проверить шрифт перед работой

Многие популярные латинские шрифты не содержат русских букв. Например, у Poppins и Bebas Neue в Google Fonts кириллицы нет. Если набрать ими русский текст, редактор подставит другой шрифт, и слова на слайде соберутся из букв разного рисунка.

Проверка занимает минуту:

1. В Google Fonts включите фильтр по языку и выберите кириллицу — останутся только подходящие шрифты.
2. Наберите в макете тестовую строку со сложными знаками, например: Щётка, ёмкость 1,5 л, № 3, 25 °C, 10×20 см, «кавычки» — тире.
3. Проверьте буквы д, л, ф, й, ё, ъ — у некоторых шрифтов они нарисованы небрежно или выбиваются по ширине.
4. Проверьте все начертания, которые собираетесь использовать: бывает, что кириллица есть только в Regular.

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

Файл шрифта — это программа со своей лицензией. Самый простой путь — Google Fonts. В FAQ сервиса сказано, что все шрифты там распространяются с открытым исходным кодом, бесплатны и их можно использовать в коммерческих целях: в логотипах, на сайтах, в печати и на любых других носителях. Большинство шрифтов выпущено под лицензией SIL Open Font License, часть — под Apache License или Ubuntu Font License. Условие лицензий касается распространения самих файлов шрифта, а не картинок, сделанных с их помощью.

Шрифты из таблицы есть в Google Fonts, у всех есть кириллица (проверили по каталогу сервиса):

Чего избегать:

• сайтов «скачать шрифты бесплатно» — файл может быть изменён, а лицензия на нём не указана;
• коммерческих шрифтов без купленной лицензии, даже если файл «просто был на компьютере»;
• шрифтов из чужих макетов и шаблонов, если условия шаблона не разрешают коммерческое использование.

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

Шрифты во встроенных редакторах WB и Ozon

В фоторедакторе Wildberries и на вкладке «Инфографика» в редакторе Ozon можно выбрать шрифт, размер и цвет текста. Набор шрифтов там ограничен, поэтому выберите один, запишите название и размеры и используйте их во всех карточках. Если часть слайдов вы делаете в стороннем редакторе, а часть — в кабинете площадки, подберите в редакторе максимально похожий шрифт, иначе галерея будет выглядеть разнородно.

Как проверить шрифты для инфографики маркетплейсов перед загрузкой

• Слайд открыт на телефоне в размере карточки, текст читается без увеличения.
• Главное фото проверено в размере плитки каталога.
• Контраст текста и фона в норме — нормы WB мы разобрали в статье про инфографику для WB, а приёмы для фото-фона — в статье про фон для инфографики.
• Все буквы одного рисунка, «ё», «№», «°» и кавычки на месте.
• Нет опечаток и машинного перевода. Wildberries считает ошибкой текст, переведённый с ошибками, и искажённые символы в картинках от нейросети.
• Никаких декоративных символов вместо слов — звёздочек, стрелок из эмодзи, лишних восклицательных знаков.
• Не больше двух семейств и одинаковые размеры на всех слайдах.

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

Какие шрифты для инфографики маркетплейсов выбрать?

Гротески с кириллицей и несколькими начертаниями: Inter, Roboto, Manrope, Golos Text, Onest, Montserrat, PT Sans. Для заголовков можно добавить антикву, например PT Serif или Lora. Все они есть в Google Fonts.

Какой размер шрифта нужен на инфографике?

Площадки не задают его в пикселях. Наш ориентир для макета 900×1200: заголовок 60–80 px, пункты 40–52 px, надпись на главном фото — от 80–100 px. Проверяйте на телефоне.

Можно ли использовать Google Fonts в карточках товаров бесплатно?

Да. В FAQ Google Fonts сказано, что все шрифты бесплатны и их можно использовать в коммерческих целях, в том числе в изображениях и логотипах.

Почему в шрифте не отображаются русские буквы?

В шрифте нет кириллицы, и редактор подставляет вместо неё другой шрифт. Например, у Poppins и Bebas Neue в Google Fonts кириллицы нет. Выбирайте шрифты с фильтром по кириллице.

Сколько шрифтов использовать на одном слайде?

Одно семейство в двух-трёх начертаниях или два семейства с разными ролями. Больше — и слайды начинают выглядеть разнородно.

Источники: Google Fonts — FAQ: лицензии и коммерческое использование, Wildberries — «Фото товаров: правила, рекомендации и частые ошибки», Ozon — «Требования к фото, видео и видеообложкам».