Типографика для интернет-магазина: читаемость и иерархия

Покупатель не читает страницу магазина — он её сканирует. За доли секунды взгляд ищет название, цену, условие доставки и кнопку. Если текст мелкий, строки слипаются, а заголовки не отличаются от подписей, сканирование ломается: человек не находит нужное, устаёт и уходит. Типографика в интернет-магазине — это не «эстетика», а инструмент, который направляет внимание к решению о покупке.

В этой статье разберём типографику магазина на 1С-Битрикс предметно: базовые размеры и интервалы, модульную шкалу заголовков, иерархию карточки товара, оформление цены, читаемость на мобильных и влияние шрифтов на скорость. Покажем, где именно в шаблоне и компонентах Битрикса это задаётся, чтобы стили не расползались по проекту. Навести порядок в вёрстке и производительности помогает наша услуга аудита и оптимизации 1С.

Почему типографика — это про деньги, а не про красоту

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

Есть и прямая связь с поисковым продвижением. Вес и способ подключения шрифтов влияют на скорость отрисовки контента и стабильность вёрстки, а это метрики LCP и CLS из Core Web Vitals. То есть аккуратная типографика улучшает и поведение людей, и технические сигналы для поисковика одновременно. Поэтому к ней стоит относиться как к части продуктовой работы, а не как к финальному «причёсыванию» дизайна.

База: размер, высота строки, длина строки

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

• Размер шрифта. Для тела текста комфортно 16–18 px на десктопе и не меньше 16 px на мобильных. На маленьких размерах покупатель напрягает зрение и хуже удерживает внимание.
• Высота строки (line-height). Для основного текста разумно 1.4–1.6. Слишком плотные строки сливаются, слишком разреженные — рассыпаются на отдельные фразы.
• Длина строки. Оптимально 45–75 символов. Длинные строки трудно «возвращать» глазом к началу, поэтому ширину текстовых блоков ограничивают через max-width.

Эти значения удобно вынести в CSS-переменные и опираться на них во всех компонентах. Тогда единая база размеров работает и в карточке товара, и в описании, и в статьях блога, а не задаётся заново в каждом месте.

Модульная шкала заголовков

Иерархия заголовков должна читаться мгновенно: H1 крупнее H2, H2 крупнее H3, и переходы между уровнями заметны, но не хаотичны. Для этого используют модульную шкалу — набор размеров, полученных умножением базы на постоянный коэффициент (например, 1.2 или 1.25). Так размеры связаны математически, а не подобраны на глаз.

Важно, чтобы уровни отличались не только размером, но и насыщенностью и отступами. Заголовку нужен воздух сверху и меньший отступ снизу — так он визуально «привязан» к своему блоку. И помните про семантику: H1 на странице один, а в каталоге на 1С-Битрикс это обычно название раздела или товара, а не логотип.

Иерархия карточки товара

Карточка товара — место, где типографика приносит больше всего денег. Здесь важно выстроить порядок, в котором взгляд встречает элементы, и подчинить ему размеры и насыщенность.

1. Название товара. Крупно и разборчиво, но не крупнее цены визуально по значимости. Это точка входа в карточку.
2. Цена. Самый акцентный числовой элемент. Старая цена — мельче и приглушённее, скидка — контрастным цветом.
3. Ключевая выгода. Наличие, срок доставки, гарантия — короткой строкой, читаемо, рядом с ценой.
4. Кнопка действия. Текст на кнопке достаточно крупный, чтобы читаться на мобильном, с внятной формулировкой.
5. Характеристики и описание. Основным размером тела, с ясной группировкой через H3 и списки.

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

Типографика цены и акцентов

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

• Акцент на актуальной цене. Текущая цена — крупная и насыщенная; старая — мельче, приглушённого цвета, с зачёркиванием.
• Единый формат чисел. Разделители разрядов, символ валюты и копейки оформляются одинаково по всему сайту — разнобой выглядит небрежно.
• Табличные цифры. Для списков и таблиц с ценами удобны моноширинные (табличные) цифры, чтобы числа выравнивались по разрядам.
• Сдержанность бейджей. «Хит», «−20%», «Новинка» полезны, но их не должно быть много и они не должны перебивать саму цену.

Для B2B-каталога добавляется нюанс: цена зависит от группы клиента и может быть скрыта для гостя. Типографика тут работает вместе с логикой отображения — важно, чтобы «Цена по запросу» или приглашение войти выглядели так же аккуратно, как обычная цена, а не как ошибка вёрстки.

Читаемость на мобильных

Большая часть трафика магазина — мобильная, поэтому типографику проектируют «от телефона». На маленьком экране требования жёстче: меньше места, больше бликов, палец вместо курсора.

На мобильных также важнее длина строки и отступы между кликабельными элементами. Заголовки не должны занимать пол-экрана, поэтому шкалу заголовков часто делают адаптивной — уменьшают верхние уровни на узких вьюпортах. А сама скорость мобильной отрисовки зависит от инфраструктуры: как её выстроить, мы описали в материале про хостинг и BitrixVM.

Шрифты и производительность

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

• Самостоятельный хостинг. Шрифты лучше отдавать со своего домена в формате woff2 — это быстрее и стабильнее внешних подключений, а также надёжнее с точки зрения приватности.
• Минимум начертаний. Обычно хватает Regular, Medium и Bold. Каждое лишнее начертание — это вес и время.
• font-display: swap. Текст сначала показывается системным шрифтом, а затем заменяется брендовым — без «немого» пустого экрана.
• Подмножество символов. Для кириллического магазина оставляют только нужные диапазоны, отбрасывая неиспользуемые алфавиты.

Разумный компромисс для большинства проектов — системный шрифт для основного текста и один брендовый шрифт для заголовков. Так фирменный стиль сохраняется, а вес страницы остаётся под контролем. Тему скорости системно мы поднимаем в рамках оптимизации 1С и сайта.

Контраст и доступность

Читаемость — это не только размер, но и контраст. Светло-серый текст на белом фоне выглядит «дизайнерски», но плохо читается на солнце и людьми со слабым зрением. Стандарт WCAG задаёт понятные ориентиры, и им стоит следовать.

• Контраст основного текста — не ниже 4.5:1 к фону; для крупных заголовков допустимо 3:1.
• Не только цветом. Скидку, ошибку или статус нельзя обозначать одним лишь цветом — добавляйте текст или значок.
• Масштабирование. При увеличении до 200% вёрстка не должна рассыпаться, а текст — обрезаться.
• Фокус и ссылки. Ссылки в тексте должны отличаться от обычного текста не только оттенком, но и подчёркиванием или начертанием.

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

Где задавать типографику в 1С-Битрикс

Чтобы типографика была единой и не расползалась по проекту, её задают централизованно в шаблоне сайта, а не в отдельных компонентах.

1. Токены в :root. Базовый размер, шаг шкалы, высоты строк и отступы вынесите в CSS-переменные — это единый источник правды.
2. Стили шаблона. Правила для body, заголовков, ссылок и списков держите в CSS шаблона сайта, а не дублируйте в шаблонах компонентов.
3. Классы компонентов. Кастомные шаблоны компонентов каталога (список, карточка, фильтр) наследуют типографику через общие классы.
4. Контентные области. Для описаний товаров и статей из инфоблоков задайте типовые стили обёртки, чтобы контент-редактор не форматировал вручную.
5. Проверка в композите. Убедитесь, что шрифты и критический CSS не ломают отрисовку на композитном сайте и первой загрузке.

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

Частые ошибки типографики

• Мелкий основной текст. 12–13 px в теле страницы — покупатель щурится и хуже воспринимает контент.
• Слишком много шрифтов. Три-четыре гарнитуры размывают стиль и утяжеляют страницу.
• Одинаковая насыщенность. Заголовки не отличаются от текста — иерархия не читается.
• Низкий контраст. Светло-серый текст на белом фоне «модно», но нечитаемо.
• Длинные строки во всю ширину. Без ограничения ширины текст трудно читать на больших экранах.
• Тяжёлые веб-шрифты. Десяток начертаний с внешнего домена бьют по LCP и вызывают мигание текста.
• Хаос в оформлении цен. Разный формат чисел и валюты на разных страницах выглядит небрежно и снижает доверие.

Чек-лист внедрения

1. База задана. Размер 16–18 px, высота строки 1.4–1.6, ограничение длины строки настроены в токенах.
2. Шкала заголовков. H1–H3 отличаются размером, насыщенностью и отступами; H1 на странице один.
3. Карточка выстроена. Порядок внимания название → цена → выгода → кнопка соблюдён.
4. Цена оформлена. Единый формат чисел, акцент на актуальной цене, аккуратные бейджи.
5. Мобильная версия. Текст в полях не меньше 16 px, адаптивная шкала, удобные интервалы.
6. Шрифты оптимизированы. Самохостинг woff2, минимум начертаний, font-display: swap, подмножество символов.
7. Доступность. Контраст не ниже 4.5:1, масштаб 200% не ломает вёрстку.
8. Централизация. Правила заданы в шаблоне и токенах, компоненты их наследуют.

Вывод

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

На 1С-Битрикс всё это удобно централизовать в токенах и стилях шаблона, чтобы правила были едиными, а поддержка — простой. Заложите систему один раз — и получите магазин, который читается легко, выглядит аккуратно и не проседает по скорости. А если стили уже расползлись, это ровно та задача, которую решает аудит и оптимизация.