Как подобрать шрифт для карточки товара и не потерять читаемость
12.07.2026
Покупатель открывает карточку товара и тратит меньше двух секунд на то, чтобы понять — стоит ли читать дальше. За эти секунды его глаза цепляются за заголовок, цену и пару характеристик. Если текст плохо читается, человек уйдёт к конкуренту, даже если сам товар отличный. Шрифт здесь играет роль не меньше, чем фотография или цена.
Проблема в том, что выбор шрифта для карточки товара сильно отличается от подбора типографики для лендинга или блога. Здесь другие условия: маленькие экраны, сжатые сроки восприятия, ограниченное пространство и строгие технические ограничения площадок. Разберёмся, на что реально стоит обращать внимание.
Почему мобильная читаемость — это не про размер
Частая ошибка — просто увеличить шрифт, чтобы он «был виден на телефоне». Но крупный текст в ограниченном блоке создаёт новые проблемы: строки становятся слишком короткими, переносов нет, и абзац превращается в лестницу из обрубленных слов. Глаз спотыкается на каждом переходе, скорость чтения падает.
Читаемость на мобильных зависит от комбинации факторов:
- межстрочный интервал — для основного текста обычно нужен показатель 1.4–1.6 от размера кегля;
- длина строки — оптимально 45–75 символов, на экране телефона это примерно полная ширина контейнера с небольшими отступами;
- контраст с фоном — даже красивый серый текст на белом фоне может сливаться при ярком солнечном свете за окном.
Шрифт с крупным кеглем, но узким начертанием и плотным интерлиньяжем прочитается хуже, чем компактный, но правильно разведённый по вертикали. Отдельный материал Wild Card посвящён кириллическим гарнитурам и сочетаниям, которые сохраняют читаемость.
Гротески против антиквы: что работает в карточках
Антиквенные шрифты с засечками хорошо работают в длинных текстах — газетные полосы, книги, развёрнутые статьи. Засечки создают горизонтальные направляющие, по которым глаз скользит вдоль строки. Но в карточке товара длинных сплошных текстов нет. Есть заголовки, списки характеристик, короткие описания и кнопки.
Для таких задач лучше подходят гротески — шрифты без засечек. Они выглядят более нейтрально, занимают меньше визуального веса и лучше масштабируются на маленьких размерах. Inter, Roboto, Montserrat, SF Pro — типичные представители, которые показывают себя предсказуемо на разных экранах.
Это не значит, что засечки категорически запрещены. Заголовок в антикве может добавить карточке выразительности, если товар позиционируется как премиальный. Но основной текст характеристик и описания всё равно разумнее оставить в гротеске.
На что смотреть при выборе конкретного начертания
Не каждый гротеск одинаково хорош для карточки. Вот несколько параметров, которые стоит проверить перед окончательным выбором.
Открытость апертур. Апертура — это отверстие внутри знака. У шрифтов с открытыми апертурами (например, Nunito, Open Sans) буквы «а», «е», «о» читаются даже на 11–12 пикселях. У узких и плотных начертаний эти же буквы превращаются в точки при уменьшении.
Различимость похожих символов. На маленьком экране критически важно, чтобы «Il1» (заглавная i, строчная l, цифра 1) визуально отличались. То же касается пар «О0», «rn» и «m». Некоторые шрифты намеренно утолщают или смещают элементы, чтобы избежать путаницы — это ценное качество для карточки, где встречаются артикулы, модели и технические параметры.
Ширина символов. Узкие начертания экономят место по горизонтали, но на мобильных создают ощущение тесноты. Широкие — наоборот, требуют больше строк и заставляют прокручивать. Оптимальная золотая середина — обычная ширина.
Типичные ошибки, которые снижают конверсию
Первая — использование декоративных шрифтов для основного текста. Рукописные, готические, стилизованные под ретро начертания уместны в логотипе или крупном баннере. В описании товара они заставляют читателя напрягаться, а напряжение — прямой путь к закрытию вкладки.
Вторая — слишком много начертаний в одной карточке. Заголовок жирный, подзаголовок полужирный, характеристики курсивом, цена тонким начертанием, кнопка капсом. Визуальный шум отвлекает от содержания. Практика показывает, что двух весов в пределах одного блока обычно достаточно: один для акцентов, второй для основного текста.
Третья — игнорирование рендеринга на разных платформах. Один и тот же шрифт на iOS и Android может выглядеть по-разному из-за особенностей сглаживания. На Windows с включённым ClearType тонкие штрихи могут пропадать совсем. Стоит проверять, как выбранное начертание ведёт себя на разных системах, а не только на макете в Figma.
Практические ориентиры по размерам
Жёстких универсальных значений не существует — всё зависит от конкретного шрифта и дизайна карточки. Но есть отправные точки, которые хорошо работают как база:
| Элемент карточки | Рекомендуемый размер (мобильные) |
|---|---|
| Заголовок (название товара) | 16–20 px |
| Цена | 18–24 px |
| Основное описание | 13–15 px |
| Характеристики (ключ-значение) | 12–14 px |
| Мелкий текст (срок доставки, остатки) | 11–12 px |
Если шрифт визуально лёгкий — нижнюю границу лучше сдвинуть на 1–2 пикселя вверх. Плотные начертания с большим визуальным весом могут позволить себе минимальные значения из диапазона.
Контраст как скрытый фактор читаемости
Даже идеально подобранный шрифт не спасёт, если контраст между текстом и фоном недостаточный. WCAG рекомендует соотношение не ниже 4.5:1 для основного текста и 3:1 для крупного. На практике это означает, что тёмно-серый текст (#4A4A4A) на белом фоне уже находится на границе комфортного чтения, а светло-серый (#999999) для описания характеристик — это потерянный текст для значительной части аудитории.
Маркетплейсы часто используют светлые тона для второстепенной информации: статус наличия, имя продавца, отзывы. Это допустимо, если такой текст не является критически важным для принятия решения о покупке. Но ключевые параметры — вес, размер, состав, цена — должны быть в контрастном цвете.
Как проверить выбор до загрузки на площадку
Простой способ — собрать мокап карточки в реальном размере мобильного экрана (375×812 точек для типичного смартфона) и посмотреть на него с расстояния вытянутой руки. Если заголовок и характеристики читаются без усилий — скорее всего, всё в порядке. Если приходится прищуриваться или приближать экран — нужно что-то менять.
Ещё один приём — сфотографировать экран монитора с мокапом и открыть фотографию на телефоне. Это имитирует реальные условия просмотра примерно на 80% точности и сразу показывает проблемы, которые на большом экране ноутбука незаметны.
Выбор шрифта для карточки товара — это не вопрос эстетических предпочтений. Это инструмент, который либо помогает покупателю быстро получить нужную информацию, либо создаёт барьер между ним и решением о покупке. Нейтральный, хорошо читаемый гротеск с правильными интервалами и достаточным контрастом — не самое эффектное, но самое надёжное решение для большинства случаев.