Цифры в дашборде: какой размер помогает быстро считывать KPI

Для главного KPI на десктопном дашборде обычно подходит размер 32–48 пикселей, а для вторичных метрик — 20–32 пикселя. Но универсального значения нет: размер цифр зависит от роли показателя, расстояния до экрана, длины значения, плотности интерфейса и шрифта. Ниже — практический способ выбрать размер без перегрузки и потери иерархии.

Цифра в дашборде — не просто текстовый элемент, а визуальный сигнал о состоянии бизнеса или процесса. Пользователь сначала ищет крупные контрастные значения, затем уточняет подпись, период и изменение относительно цели. Если все показатели набраны одинаково, взгляд не понимает, с чего начать. Если главный KPI слишком мал, он теряется среди подписей и графиков; если все числа огромные, важные и второстепенные данные выглядят одинаково.

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

Одинаковый кегль может выглядеть по-разному в разных гарнитурах. Шрифт с высокой высотой строчных знаков воспринимается крупнее, чем гарнитура с низкой x-height. У цифр также различаются ширина, форма, насыщенность и высота относительно букв. Поэтому значения в пикселях следует считать стартовой точкой, а окончательное решение принимать по реальному макету и тесту на типичных данных.

Для большинства веб-дашбордов удобно начинать с относительной шкалы. Главный показатель в крупной карточке можно проверить в диапазоне 32–48 пикселей, вторичное изменение — в диапазоне 16–24 пикселя, а подпись и период — примерно 12–16 пикселей. Это не стандарт и не обязательная формула, а безопасный диапазон для первого прототипа. После этого нужно проверить самые длинные реальные значения и поведение интерфейса на узком экране.

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

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

Проверяйте типичные, минимальные и максимальные значения, а также разные единицы измерения. Карточка, рассчитанная только на «84%», может сломаться на «1 248 760 ₽», «−12,8%» или «3 456 789». Для денег заранее решите, нужны ли копейки и полная валюта; для больших объёмов — можно ли использовать сокращения вроде «1,2 млн». Сокращение допустимо только тогда, когда оно не меняет смысл показателя.

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

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

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

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

Представим карточку интернет-магазина с показателем «Выручка за месяц». Значение «1,24 млн ₽» можно набрать крупно, например 40 пикселями, а подпись «за месяц» — заметно меньше. Рядом разместите изменение «+8,4% к прошлому месяцу» размером 16–18 пикселей. Пользователь сначала увидит результат, затем поймёт период и только после этого оценит динамику.

Другой сценарий — служба поддержки, где важен показатель «Среднее время ответа». Значение «12 мин» не должно конкурировать с карточкой «Открытые обращения», если именно очередь определяет нагрузку команды. В этом случае размер главной цифры можно оставить в диапазоне 32–40 пикселей, а время ответа сделать вторичным значением 24–32 пикселя. Иерархия должна следовать рабочему приоритету, а не длине числа.

Для таблицы с ежедневными продажами крупный заголовочный размер обычно не нужен. Здесь важнее быстро сравнивать строки и столбцы, поэтому значение 14–16 пикселей с хорошим интервалом, табличными цифрами и выравниванием по разрядам может быть эффективнее, чем 24 пикселя. Крупный шрифт в таблице увеличивает прокрутку и уменьшает объём данных в рабочем поле.

Для дашборда выбирайте гарнитуру с различимыми цифрами: символы 0, 6, 8 и 9 должны легко отличаться, а единица — не путаться с буквой «I» или вертикальным разделителем. Слишком декоративный шрифт ухудшает скорость сверки. Для крупных KPI часто подходит среднее или полужирное начертание, но максимальная жирность не всегда повышает читаемость: она может слипать цифры и визуально утяжелять карточку.

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

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

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

Для главной KPI-карточки на десктопе разумно начать с 32–48 пикселей и проверить результат на реальных значениях. Если карточка небольшая или рядом находятся несколько равнозначных показателей, используйте более умеренный диапазон 24–32 пикселя. Финальный размер зависит от гарнитуры, длины числа, контраста и расстояния до экрана.

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

Сначала проверьте, нужна ли пользователю полная точность. Для обзорной карточки можно использовать сокращение «1,25 млн ₽», а точное значение оставить в подсказке, деталях или таблице. Если сокращать нельзя, уменьшите размер только в пределах сохранения читаемости и предусмотрите перенос или расширение карточки.

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

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

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

Оптимальный размер цифр в дашборде — это баланс между заметностью, иерархией и вместимостью интерфейса. Начните с 32–48 пикселей для главного KPI на десктопе, проверьте реальные значения, настройте шрифт и убедитесь, что период и динамика читаются вместе с числом. Хорошая типографика помогает принять решение, а не просто украшает карточку.

Дата актуальности: 22 июля 2026 г.