Как выделить скидку и старую цену без типографического шума

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

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

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

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

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

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

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

Например, в карточке курса можно разместить старую цену «12 900 ₽» над новой «7 900 ₽», а скидку «−39%» вынести в небольшой акцентный элемент сбоку. В баннере с ограниченной шириной безопаснее поставить новую цену на первой строке, старую — рядом с ней мелким кеглем, а процент скидки оставить в коротком бейдже в верхнем углу.

Знак валюты должен быть оформлен последовательно в обеих ценах. Если в новой сумме используется «₽», не заменяйте его в старой цене на слово «руб.» без смысловой причины. Разделители тысяч, десятичные знаки и пробелы также должны быть единообразными. Несогласованная запись выглядит как техническая ошибка и отвлекает от самого предложения.

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

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

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

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

Цвет должен разделять роли элементов, а не украшать каждую строку. Новая цена обычно остаётся самым контрастным текстом, старая цена становится нейтральнее, а скидка получает один акцентный цвет. Если красным выделены и процент, и старая цена, и кнопка, и заголовок, пользователь теряет ориентир.

Не полагайтесь только на цвет. Старая цена должна отличаться от новой также размером, начертанием, положением или зачёркиванием. Это важно для пользователей с особенностями цветового восприятия и для ситуаций, где макет просматривают на тусклом экране или печатают в оттенках серого.

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

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

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

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

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

Выберите размер и начертание для новой цены, старой цены и скидки до добавления декоративных элементов. Проверьте, что разница между уровнями видна даже в чёрно-белом варианте. Если иерархия не работает без цвета, цвет лишь замаскирует проблему, но не решит её.

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

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

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

Отдельная проблема — искусственное визуальное преувеличение скидки. Если старая цена выглядит огромной, а новая занимает мало места, пользователь может воспринять блок как рекламный трюк. Доверие поддерживает спокойная подача: старая сумма заметна, но не давит; новая сумма ясна; условия акции доступны для чтения.

Обычно самой крупной делают новую цену, потому что именно она отвечает на главный вопрос покупателя. Процент скидки можно увеличить в промо-баннере, если он является основным сообщением, но итоговая стоимость всё равно должна легко находиться рядом и не теряться среди акцентов.

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

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

Разместите процент рядом с новой ценой, используйте контрастное начертание или отделите его небольшим интервалом и знаком. Такой вариант подходит минималистичным интерфейсам и спокойным брендам. Без плашки особенно важны размер, положение и цвет: именно они должны объяснять роль процента.

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

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

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