Шрифтовые пары и цветовой контраст в карточках товаров 3:4: как сделать текст читаемым со смартфона

В современных реалиях электронной коммерции на Wildberries и Ozon свыше 88% пользователей совершают покупки через мобильные приложения. В ленте поисковой выдачи главное фото карточки пропорции 3:4 (900×1200 px) отображается в миниатюре размером около 3×4 сантиметра. В таких экстремальных условиях покупатель принимает решение о клике за рекордные 0,8–1,2 секунды. Если ключевые преимущества товара не считываются мгновенно боковым зрением, карточка теряет до половины потенциального трафика.

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

Для мобильных экранов ориентиром служит международный стандарт доступности цифрового контента WCAG (Web Content Accessibility Guidelines):

• Стандарт 4.5:1 для второстепенного текста: минимальное соотношение яркости шрифта к фону для мелких поясняющих надписей. Если контраст ниже 4.5:1, человеческий глаз на ярком солнце или при пониженной яркости экрана не сможет разобрать буквы.
• Стандарт 7:1 для главного УТП: максимальный уровень контраста (черный на белом, белый на темно-графитовом, ярко-желтый на черном), который применяется для ключевого оффера («100% ХЛОПОК», «ГАРАНТИЯ 3 ГОДА»).
• Запрет на слепые сочетания: категорически запрещено использовать серый текст на белом фоне, красный на зеленом (эффект ряби) или синий на черном.

Выбор шрифта для карточки товара подчиняется жестким прагматичным правилам:

• Плотные закрытые гротески: шрифты без засечек с одинаковой толщиной штрихов — единственный рабочий выбор для маркетплейсов. Топ-гарнитуры: Inter, Montserrat, Unbounded, Bebas Neue, TT Norms, Manrope. Они сохраняют идеальную геометрию букв даже при сильном пиксельном сжатии.
• Отказ от тонких и рукописных начертаний: начертания Thin, ExtraLight и курсивные рукописные шрифты на мобильных экранах превращаются в нечитаемую серую кашу. Минимальная рекомендуемая плотность — Medium, а для главных акцентов — Bold или ExtraBold.
• Правило одной шрифтовой семьи: профессиональный дизайн использует 1 шрифт (максимум 2 гарнитуры) во всех слайдах серии, меняя только кегль и начертание. Это создает ощущение целостного премиального бренда.

Фотографии реальных товаров всегда неоднородны: они содержат текстуру ткани, блики на металле, тени и сложные цвета. Размещение текста прямо поверх фото — главная причина падения конверсии. Для изоляции надписей применяются три профессиональных инструмента:

• Контрастные плашки со скруглением (Badges): текст помещается внутрь плашки с радиусом скругления 8–16 px. Обязателен внутренний отступ (padding) не менее 12–16 px со всех сторон, чтобы текст не упирался в границы блока.
• Направленные градиентные подложки: мягкое затемнение фона от края карточки к центру с непрозрачностью от 40% до 80% позволяет сохранить объем фото и гарантировать идеальную контрастность белого текста.
• Твердые тени вместо размытых: если используется обводка или тень под текстом, она должна быть плотной и четкой. Размытая растровая тень создает ощущение грязи вокруг букв.

Покупатель не читает карточку как книгу — он сканирует ее по диагонали (F-паттерн). На первом слайде выносится ровно 1 главное УТП, отвечающее на вопрос «почему я должен купить именно этот товар». Второстепенные характеристики (размеры, состав, комплектация) разносятся на 2-й и 3-й слайды карусели.