Почему одни карточки читаются за три секунды, а другие — заставляют всматриваться
Опубликовано: 23.06.2026
Откройте любую категорию на маркетплейсе и пробегите глазами по сетке. Часть карточек считывается мгновенно: понятно, что за товар, сколько стоит, есть ли скидка. Другие требуют усилий — глаза прыгают между элементами, цена сливается с описанием, а название конкурирует с характеристиками за внимание. Разница между этими двумя сценариями почти всегда сводится к типографике.
Не к картинкам, не к верстке в целом, а именно к тому, как набран текст. Размер, начертание, интервалы, контраст между элементами — всё это определяет, сможет ли покупатель быстро принять решение или закроет карточку.
Три уровня заголовков и ни одного лишнего
В карточке товара одновременно живут несколько типов текстовой информации: название, цена, старая цена, краткие характеристики, описание, буллитные списки. Если всё это набрать одним размером — получится стена символов.
Рабочая иерархия строится из трёх уровней:
- Первый уровень — название товара. Самый крупный текст, обычно 16–20 пикселей в зависимости от общего масштаба макета. Полужирное начертание. Задача — привлечь взгляд первым и за полсекунды сообщить, что именно продаётся.
- Второй уровень — цена и ключевые цифры. Чуть меньше названия или такого же размера, но другое начертание. Цена часто выделяется цветом, но типографически она должна быть заметна даже без цвета — за счёт веса или размера.
- Третий уровень — пояснения, характеристики, описание. Мелкий текст, 12–14 пикселей, обычное начертание. Здесь покупатель читает только если первый и второй уровни его уже зацепили.
Ошибка, которая встречается постоянно — сделать название и цену одинаковыми по весу и размеру. Глаз не понимает, с чего начать, и тратит лишние миллисекунды на расшифровку. За три-четыре таких карточки наступает визуальная усталость, и человек уходит.
Цена: отдельный типографический объект
Цена — не просто число среди текста. Это элемент, который должен считываться боковым зрением. Для этого работают несколько приёмов.
Увеличенный кегль. Цена на 20–40% крупнее основного текста описания — нормальная практика. Не нужно доводить до абсурда, когда цена занимает половину карточки, но она точно не должна прятаться.
Жирное начертание или полуторный вес. Цифры в регулярном начертании теряются среди текста, особенно если рядом есть технические характеристики — те же цифры, но с единицами измерения. Контраст по весу разделяет эти смысловые блоки.
Отдельная строка. Никогда не ставьте цену в одну строку с названием или описанием. Даже если верстка позволяет, визуально это создаёт кашу. Цена заслуживает собственной строки, а часто и собственного блока с фоном.
Старая цена, если есть скидка, набирается мельче нового значения — примерно на 30%. Зачёркнутый стиль сам по себе создаёт визуальный шум, и если добавить к нему крупный кегль, блок цены превратится в пятно.
Пояснения: когда меньше значит больше
Описание товара в карточке — это не место для литературных упражнений. Покупатель на маркетплейсе не читает, он сканирует. Поэтому типографика пояснений должна помогать сканированию, а не мешать.
Короткие абзацы. Три-четыре строки максимум. После каждого — пустая строка. Сплошной текст из десяти строк в карточке товара — это гарантия того, что его никто не прочтёт.
Буллитные списки для характеристик. Мелкий текст в списках воспринимается легче, чем в сплошном абзаце, потому что маркеры создают точки входа для взгляда. Человек может прочитать только второй и четвёртый пункт — и этого достаточно для решения.
Контраст между заголовками внутри описания и телом текста. Если внутри блока с пояснениями есть подзаголовки вроде «Состав» или «Преимущества», они должны отличаться от основного текста хотя бы полуторным весом. Иначе структура теряется.
Какой шрифт подходит для карточки товара
Выбор шрифта — не вопрос вкуса, а вопрос читаемости на маленьком экране при быстром скроллинге. Два критерия сразу исключают большую часть библиотек. Раздел «шрифты для карточек товаров» собирает правила иерархии заголовков, цифр и пояснений.
Первый — шрифт должен иметь хорошо различимые символы в мелком кегле. Декоративные антиквы, рукописные начертания, шрифты с минимальным контрастом штрихов — всё это работает только на заголовках выше 24 пикселей. В карточке товара основной текст будет 12–14 пикселей, и здесь нужны гротески с открытыми формами.
Второй — шрифт должен содержать табличные цифры. Это критически важно для цен и характеристик. Пропорциональные цифры, где «1» узкая, а «4» широкая, в столбике цен или характеристик создают рябь. Табличные цифры одинаковой ширины выстраиваются в ровные колонки, и глаз считывает их без усилий.
Практические варианты, которые проверены на тысячах карточек:
- Inter — сейчас де-факто стандарт для интерфейсов. Хорошо читается в мелком кегле, есть табличные цифры, много весов для иерархии.
- Roboto — немного более механический, чем Inter, но проверенный годами. Работает, хотя стал визуально привычным до пресыщения.
- Montserrat — для случаев, когда нужен более выраженный характер. В заголовках смотрится отлично, но в мелком тексте требует чуть большего кегля, чем гротески с меньшим x-height.
- SF Pro, Segoe UI — системные шрифты, не требуют загрузки, хорошо выглядят на своих платформах. Минус — разное отображение на iOS и Windows.
Комбинировать два шрифта в одной карточке обычно не нужно. Один гротеск с тремя-четырьмя весами решает все задачи. Два шрифта оправданы только если карточка является частью брендированного лендинга, а не элементом маркетплейсовой сетки.
Межстрочный интервал и плотность набора
Ещё один параметр, который часто игнорируют — межстрочный интервал. Для текста 12–14 пикселей в карточке товара оптимальный диапазон 140–150% от кегля. Меньше — строки сливаются, глаз перепрыгивает на строку ниже или выше. Больше — текст распадается, и блок кажется не связанным.
Межбуквенный интервал в мелком кегле лучше оставить нулевым или даже слегка отрицательным. Положительный трекинг в 12-пиксельном тексте увеличивает расстояния между буквами настолько, что слова перестают считываться как целые формы — приходится собирать их по буквам.
Типичные ошибки, которые убивают конверсию
Тонкий шрифт для цены. Полулёгкое или лёгкое начертание на белом фоне с серым цветом — цена становится невидимой. Вес не ниже regular, лучше medium.
Одинаковый размер для названия и описания. Покупатель не понимает, где главная информация, а где второстепенная. Иерархия существует именно для того, чтобы не заставлять человека думать.
Цвет как единственный инструмент выделения. Если цена выделена только красным цветом, но набрана тем же размером и весом, что и остальной текст, то при дальтонизме или на экране с плохой цветопередачей она просто потеряется. Типографика должна работать даже в градациях серого.
Слишком много начертаний. Когда в одной карточке встречаются light, regular, medium, semibold и bold — это хаос. Двух-трёх весов достаточно для любой иерархии.
Выравнивание по ширине в коротких строках. В карточке товара ширина блока с текстом невелика, и выравнивание по ширине создаёт огромные пробелы между словами. Это ломает ритм чтения. По левому краю — единственный правильный выбор для такого формата.
Чеклист для самопроверки
Прежде чем отдавать карточку в работу или выкладывать на площадку, несколько простых проверок:
- Отойти от экрана на метр. Название и цена должны оставаться различимыми. Если сливаются — нужно увеличить контраст по размеру или весу.
- Сфотографировать экран телефона и посмотреть превью. Мелкие экраны безжалостно показывают все проблемы с кеглем и интервалами.
- Перевести в градации серого. Если иерархия пропадает — значит, она строилась только на цвете, а это ненадёжно.
- Засечь три секунды и посмотреть на карточку. За это время должно быть понятно: что это, сколько стоит, есть ли выгода. Если нет — типографика не справляется.
Хорошая типографика в карточке товара не замечается. Она просто позволяет человеку сделать покупку быстрее и без раздражения. А плохая — заставляет думать о том, почему всё так неудобно читать, вместо того чтобы думать о покупке.